echarts做了一个气泡图

今天，用echarts做了一个气泡图，功能只是实现了，样式还需要自己修改，
我用的echarts的版本是v4.2.1

<template>
  <div>
    <div style="width:50%">
      <div class="perstatimg">
        <div id="myHorizontal" class="myHorizontalClass" :style="{ width: '643px', height: '300px' }"></div>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
    }
  },
  mounted(){
    this.drawLine()
  },
  methods: {
    // 画图
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myHorizontal"));
      // 绘制流程数量图表
      myChart.setOption({
        backgroundColor: this.$echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [
          {
            offset: 0,
            color: '#f7f8fa'
          },
        ]),
        title: {
          text: '气泡图',
          x:'center',
        },
        legend: {
          show: false
        },
        grid: {
          left: '8%',
          top: '10%'
        },
        xAxis: {
          show: false
        },
        yAxis: {
          show: false
        },
        toolbox: {
          show: true,
          type: ["bar"]
        },
        series: [
          {
            name: '1990',
            data: [],
            type: 'scatter',
            symbolSize: function (data) {
              return data[2];
            },
            itemStyle: {
              color: 'rgba(46,107,230,0.10)',
              borderColor: ' #7FB1FF'
            },
            label: {
              show: true,
              position: 'inside',
              color: '#666666',
              fontSize: 12,
              formatter: function (param) {
                let data = param.data[3].length > 4 ? param.data[3].slice(0, 4) + '...' : param.data[3];
                var astr = '{a|' + param.data[4].toFixed(2) + '%' + '}' + '\n' + data;
                return astr;
              },
              rich: {
                a: {
                  color: '#2E6BE6',
                  align: 'center'
                }
              }
            }
          }
        ]
      });
      var data =  [
        { name: "dns", value: 66 },
        { name: "htte", value: 155 },
        { name: "sdf", value: 911 },
        { name: "sd", value: 8 },
        { name: "s", value: 6221 },
        { name: "asd", value: 206 },
        { name: "qwe", value: 209 },
        { name: "qwewq", value: 132776 },
        { name: "999", value: 12 },
        { name: "fdgd", value: 550 },
        { name: "dns", value: 66 },
        { name: "htte", value: 155 },
        { name: "sdf", value: 911 },
        { name: "sd", value: 8 },
        { name: "s", value: 6221 },
        { name: "asd", value: 206 },
        { name: "qwe", value: 209 },
        { name: "qwewq", value: 132776 },
        { name: "999", value: 12 },
        { name: "fdgd", value: 550 },
        // { name: "11", value: 99 },
        // { name: "12", value: 123 },
        // { name: "13", value: 11 },
        // { name: "14", value: 55 },
        // { name: "15", value: 77 },
        // { name: "999", value: 234 },
        // { name: "101", value: 78 },
        // { name: "11", value: 99 },
        // { name: "12", value: 123 },
        // { name: "13", value: 11 },
        // { name: "14", value: 55 },
        // { name: "15", value: 77 },
      ];
      var newdata = [];
      let len = data.length;
      if (len) {
        let total = 0;
        data.forEach(element => {
          total += element.value;
        });
        let indexArr = this.generateNRandomCoords(len, len);
        data.forEach((element, index) => {
          // 重构数组x轴、y轴、球的大小、name、value
          newdata.push([index * 3, indexArr[index], this.getTotalValue(element.value / total * 100), element.name, element.value / total * 100]);
        });
      }
      myChart.setOption(
        this.option = {
          series: [
            {
              data: newdata,
            },
          ],
        }
      );
    },
    // 随机生成球的y轴坐标，x轴在下方有体现，取了index * 3
    generateNRandomCoords(height, n) {
        let coords = [];
        function next() {
          let y = Math.random() * height;
          if (coords.find((y1) => {
            y1 === y;
          })) {
            return next();
          }
          return y;
        }
        for (let i = 0; i < n; i++) {
          coords[i] = next();
        }
        return coords;
    },
    /**
      * 避免数值非常大的时候，球会非常大，这里做个限制，超过某个值后，球的大小就固定为40
      * data: 返回的某一个球的value值
      * retura值是球的大小
    */
    getTotalValue(data) {
      if (data < 0.1) {
        return 5;
      } else if (0.1 <= data && data < 1) {
        return 10;
      } else if (1 <= data && data < 10) {
        return 20;
      } else if (10 <= data && data < 50) {
        return 30;
      } else {
        return 40;
      }
    }
  }
};
</script>
<style>
.perstatimg{
  margin-top:20px;
  height: 500px;
  overflow: hidden;
}
</style>复制

参考链接：Echarts实现气泡图