echarts+vue气泡图实践

今天使用echarts画气泡图，但是我这次我画的气泡图有一定的要求，网上没有完全满足我的要求的。气泡要求重叠，气泡有最大和最小直径，尽量不要遮挡文字。气泡的位置是固定的，只是气泡大小会发生变化。大概是这样一个图，如下：

今天在一个vue项目中大致实现要求。去echarts官网找灵感，下面这两个可以参考一下。那么开始做吧！

一、vue项目引入echarts并初始化

1.1新建一个vue项目

参考 vue官网

1.2引入

参考 echarts官网先npm install echarts --save安装包。在vue项目下建立一个bubble.vue文件

1.3初始化

根据教程，将代码选择性复制到自己的vue文件中。

代码如下：

js 复制代码

<template>
  <div id="main"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  mounted() {
    var myChart = echarts.init(document.getElementById("main"));
    myChart.setOption({
      title: {
        text: "ECharts 入门示例",
      },
      tooltip: {},
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    });
  },
};
</script>
<style scoped >
#main{
    width: 500px;
    height: 500px;
}
</style>

启动服务，打开浏览器，可以看到图表正确展示了。

二、绘制气泡图

找到要参考的echarts实例，复制代码到vue项目中。

启动成功。

对代码进行一定的修改，删除data中多的数据，原图只有两种颜色，在data中加一个数组。经过一定的修改后，得到新的data,在这样[25, 30, 200, "cc", 3]的一组数据中，分别代表气泡的x轴位置，y轴位置,大小,name

js 复制代码

 const data = [
      [[25, 30, 200, "cc"]],
      [[10, 20, 200, "aa"]],
      [[30, 15, 200, "bb"]],
 ];

修改了一下option,如下

js 复制代码

myChart.setOption({
      grid: {
        left: "25%",
        top: "25%",
        bottom: "30%",
        right: "25%",
      },
      xAxis: {
        show: false,
        splitLine: false,
      },
      yAxis: {
        show: false,
        splitLine: false,
        // scale: true,
      },
      series: [
        {
          name: "1",
          data: data[0],
          type: "scatter",
          symbolSize: function (data) {
            return data[2];
          },
          label: {
            show: true,
            color: "#FFF",
            formatter: function (param) {
              return param.data[3];
            },
            position: "inside",
          },
          itemStyle: {
            shadowBlur: 10,
            shadowColor: "rgba(120, 36, 50, 0.5)",
            shadowOffsetY: 5,
            color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
              {
                offset: 0,
                color: "rgb(251, 118, 123)",
              },
              {
                offset: 1,
                color: "rgb(204, 46, 72)",
              },
            ]),
          },
        },
        {
          name: "2",
          data: data[1],
          type: "scatter",
          symbolSize: function (data) {
            return data[2];
          },
          label: {
            show: true,
            color: "#FFF",
            formatter: function (param) {
              return param.data[3];
            },
            position: "inside",
          },
          itemStyle: {
            shadowBlur: 10,
            shadowColor: "rgba(25, 100, 150, 0.5)",
            shadowOffsetY: 5,
            color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
              {
                offset: 0,
                color: "rgb(129, 227, 238)",
              },
              {
                offset: 1,
                color: "rgb(25, 183, 207)",
              },
            ]),
          },
        },
        {
          name: "2",
          data: data[2],
          type: "scatter",
          symbolSize: function (data) {
            return data[2];
          },
          label: {
            show: true,
            color: "#FFF",
            formatter: function (param) {
              return param.data[3];
            },
            position: "inside",
          },
          itemStyle: {
            shadowBlur: 10,
            shadowColor: "rgba(25, 100, 150, 0.5)",
            shadowOffsetY: 5,
            color: new echarts.graphic.RadialGradient(0.4, 0.5, 1, [
              {
                offset: 0,
                color: "rgb(13, 14, 238)",
              },
              {
                offset: 1,
                color: "rgb(255, 255, 255)",
              },
            ]),
          },
        },
      ],
    });

大概这样一个图。

写一个方法，计算圆形的大小。目前是这样计算的，圆的范围在200-250之间，写了一个方法，根据比较计算圆的大小。

js 复制代码

 const minWidth = 200;
      const maxWidth = 250;
      const widthRange = maxWidth - minWidth;
      const max = Math.max(this.aa, this.bb, this.cc);
      const min = Math.min(this.aa, this.bb, this.cc);
      const range = max - min;
      console.log(min, max, range);

      let ra = minWidth;
      let rb = minWidth;
      let rc = minWidth;

      if (range != 0) {
        ra = ((this.aa - min) / range) * widthRange + minWidth;
        rb = ((this.bb - min) / range) * widthRange + minWidth;
        rc = ((this.cc - min) / range) * widthRange + minWidth;
      }
       const data = [
        [[25, 30, rc, "cc"]],
        [[10, 20, ra, "aa"]],
        [[30, 15, rb, "bb"]],
      ];

把data里的第三个数据用自己计算的结果替换。然后每次数据变化，重新渲染echarts图表。效果如下图。

大概这样一个效果吧。