echart图表之气泡图

样式图

代码

• hotOption.js

export const hotOptions = {
  //数据项
  animationEasingUpdate: "bounceIn",//数据更新动画的缓动效果。


  top: "10%",
  bottom: "10%",
  series: [
    {
      type: "graph", 
      layout: "force",//采用力引导布局
      force: {
        repulsion: 0,//节点之间的斥力因子。值越大则斥力越大
        gravity: 0.1,//节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
        layoutAnimation: true,//因为力引导布局会在多次迭代后才会稳定,这个参数决定是否显示布局的迭代动画
        edgeLength: [10, 50],//边的两个节点之间的距离
      },
      // 是否开启鼠标缩放和平移漫游
      roam: true,
      label: {
        position: ["50%", "50%"],
        normal: {
          show: true,
          textStyle: {
            align: "center",
            rich: {
              a: {
                fontWeight: 500,
                fontSize: 17,
                color: "#c9e0ff",
              },
              b: {
                fontWeight: 400,
                fontSize: 12,
                lineHeight: 30,
                color: "#99b4da",
              },
            },
          },
          formatter: function (value) {
            const arr = ["{a|" + value.value + "}", "\n", "{b|" + value.name + "}"];
            return arr.join("");
          },
        },
      },
      data: [],
    },
  ],
};

• hotVue.vue

    <div
       id="hotChart"
       style="width: 100%; height: 95%"
    ></div>
   import { hotOptions } from "./hotOption";
   
   hotChart: null,
   
   async initHotChart() {
      this.hotChart = echarts.init(document.getElementById("hotChart"));
      const option = deepCopy(hotOptions);
      await 你的请求api().then((res) => {
        if (res.success) {
          const list = res.data;
          const { bubbleData, repulsion } = this.bubbleData(list, ["name", "num"]);
          option.series[0].data = bubbleData;
          option.series[0].force.repulsion = repulsion;
        }
      });
    },
    //数据处理 大小及偏移量斥力
    bubbleData(data, format, dom) {
      let [maxValue, temp] = [0, []];
      data.forEach((item) => {
        temp.push(item[format[1]]);
      });
      maxValue = Math.max.apply(null, temp);

      let Symbol = ["blue", "purple", "green"];
      // 气泡颜色备份
      let bakeSymbol = [...Symbol];
      // 气泡数据
      let bubbleData = [];
      // 气泡基础大小
      let basicSize = 100;
      // 节点之间的斥力因子,值越大,气泡间距越大
      let repulsion = 380;
      // 根据气泡数量配置基础大小和斥力因子（以实际情况进行适当调整，使气泡合理分布）
      if (data.length >= 5 && data.length < 10) {
        basicSize = 80;
        repulsion = 280;
      } else {
        basicSize = 70;
        repulsion = 230;
      }
      // 填充气泡数据数组bubbleData
      for (let item of data) {
        // 确保气泡数据条数少于或等于气泡颜色数组大小时，气泡颜色不重复
        if (!bakeSymbol.length) bakeSymbol = [...Symbol];
        let SymbolSet = new Set(bakeSymbol);
        let curIndex = Math.round(Math.random() * (SymbolSet.size - 1));
        let curSymbol = bakeSymbol[curIndex];
        SymbolSet.delete(curSymbol);
        bakeSymbol = [...SymbolSet];
        // 气泡大小设置
        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,
          symbol: `image://图片地址/${curSymbol}.png`,
        });
      }
      return { bubbleData, repulsion };
    }