vue中echarts不重叠且分布均匀的气泡图

安装步骤略过…import echarts from “echarts”;
最终效果图

1.需要先给一个宽高，不然有的时候出不来

<div class="bubble">
        <h4>诉求热词分析</h4>
        <div id="bubbleImg"></div>//这是我的图
 </div>

#bubbleImg {
  width: 100%;
  height: 300px;
}

2.data中定义一个变量，这个也是气泡图的参数

data() {
	poparray: [
        //气泡图的数据，label是字，amount是大小
        { label: "发放工资", amount: 100 },
        { label: "买社保", amount: 70 },
        { label: "住建局", amount: 30 },
        { label: "疫情防控", amount: 50 },
        { label: "噪音扰民", amount: 70 },
      ],
}

3.methods方法

 bubbleData(data, format, dom) {
      let [maxValue, temp] = [0, []];
      data.forEach((item) => {
        temp.push(item[format[1]]);
      });
      maxValue = Math.max.apply(null, temp);

      // 气泡颜色数组
      let color = ["#246FEC", "#9EC2F7", "#2D71EA"];
      // 气泡颜色备份
      let bakeColor = [...color];
      // 气泡数据
      let bubbleData = [];
      // 气泡基础大小
      let basicSize = 70;
      // 节点之间的斥力因子,值越大,气泡间距越大
      let repulsion = 380;
      // 根据气泡数量配置基础大小和斥力因子（以实际情况进行适当调整，使气泡合理分布）
      if (data.length >= 5 && data.length < 10) {
        basicSize = 50;
        repulsion = 230;
      }
      if (data.length >= 10 && data.length < 20) {
        basicSize = 40;
        repulsion = 150;
      } else if (data.length >= 20) {
        basicSize = 30;
        repulsion = 75;
      }

      // 填充气泡数据数组bubbleData
      for (let item of data) {
        // 确保气泡数据条数少于或等于气泡颜色数组大小时，气泡颜色不重复
        if (!bakeColor.length) bakeColor = [...color];
        let colorSet = new Set(bakeColor);
        let curIndex = Math.round(Math.random() * (colorSet.size - 1));
        let curColor = bakeColor[curIndex];
        colorSet.delete(curColor);
        bakeColor = [...colorSet];
        // 气泡大小设置
        let size = (item[format[1]] * basicSize * 2) / maxValue;
        if (size < basicSize) size = basicSize;

        bubbleData.push({
          name: item[format[0]],
          value: item[format[1]],
          symbolSize: size,
          draggable: true,
          itemStyle: {
            normal: { color: curColor },
          },
        });
      }

      let bubbleId = document.getElementById(dom);
      let bubbleChart = echarts.init(bubbleId);
      let bubbleOptions = {
        backgroundColor: "#fff",
        animationEasingUpdate: "bounceIn",
        series: [
          {
            type: "graph",
            layout: "force",
            force: {
              repulsion: repulsion,
              edgeLength: 10,
            },
            // 是否开启鼠标缩放和平移漫游
            roam: false,
            label: { normal: { show: true } },
            data: bubbleData,
          },
        ],
      };
      bubbleChart.setOption(bubbleOptions);
    },

4.mounted调用

mounted() {
    this.bubbleData(this.poparray, ["label", "amount"], "bubbleImg");
 }

参考链接：https://blog.csdn.net/qq_34295211/article/details/106797988