echarts 气泡文字云

1. 代码

<template>
  <div :id="id" :ref="id" class="main"></div>
</template>
  <script>
import * as echarts from "echarts";
export default {
  name: "radar",
  data() {
    return {
      myEchart: null
    };
  },
  props: {
    id: {
      type: String,
      default: "mainId1"
    }
  },
  watch: {
    indicatorList: {
      handler(newName, oldName) {
        this.$nextTick(() => {
          this.drawChart();
          window.addEventListener("resize", this.drawChart);
        });
      },
      deep: true
    }
  },
  destroyed() {
    window.removeEventListener("resize", this.drawChart);
  },
  methods: {
    drawChart() {
      let that = this;
      let timer = null;
      timer = setTimeout(() => {
        if (
          this.myEchart != null &&
          this.myEchart != "" &&
          this.myEchart != undefined
        ) {
          this.myEchart.dispose(); //销毁
        }
        if (!this.$refs[this.id]) return;
        that.myEchart = this.$echarts.init(this.$refs[this.id]);
        let option = {
          series: [
            {
              type: "graph",
              layout: "force",
              legendHoverLink: false,
              force: {
                repulsion: 160,
                edgeLength: 70
              },
              categories: [
                {
                  itemStyle: {
                    color: "#409EFF"
                  }
                },
                {
                  itemStyle: {
                    color: "#67C23A"
                  }
                },
                {
                  itemStyle: {
                    color: "#E6A23C"
                  }
                },
                {
                  itemStyle: {
                    color: "#F56C6C"
                  }
                },
                {
                  itemStyle: {
                    color: "#ff7edb"
                  }
                }
              ],
              label: {
                normal: {
                  show: true
                }
              },
              data: [
                {
                  category: 3,
                  label: { fontSize: 23 },
                  name: "15",
                  symbolSize: 42.5,
                  value: 15
                },
                {
                  category: 1,
                  label: { fontSize: 23 },
                  name: "14",
                  symbolSize: 42.5,
                  value: 3
                },
                {
                  category: 2,
                  label: { fontSize: 23 },
                  name: "30",
                  symbolSize: 42.5,
                  value: 300
                }
              ]
            }
          ]
        };
        this.myEchart.setOption(option);
      }, 500);
    }
  },
  mounted() {
    this.drawChart();
  }
};
</script>
  <style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
}
</style>
  

2. 说明

（1）name不能相同，不然会报错

（2）category不同，颜色就不同