vue实现气泡词云图

1、下载插件 echarts-wordcloud跟echarts

2、修改插件代码WordCloudView.js

import * as echarts from 'echarts/lib/echarts';

echarts.extendChartView({
  type: 'wordCloud',

  render: function (seriesModel, ecModel, api) {
    var group = this.group;
    group.removeAll();

    var data = seriesModel.getData();

    var gridSize = seriesModel.get('gridSize');

    seriesModel.layoutInstance.ondraw = function (text, size, dataIdx, drawn) {
      var itemModel = data.getItemModel(dataIdx);
      var textStyleModel = itemModel.getModel('textStyle');

      var textEl = new echarts.graphic.Text({
        style: echarts.helper.createTextStyle(textStyleModel),
        scaleX: 1 / drawn.info.mu,
        scaleY: 1 / drawn.info.mu,
        x: (drawn.gx + drawn.info.gw / 2) * gridSize,
        y: (drawn.gy + drawn.info.gh / 2) * gridSize,
        rotation: drawn.rot
      });
      textEl.setStyle({
        x: drawn.info.fillTextOffsetX,
        y: drawn.info.fillTextOffsetY + size * 0.5,
        text: text,
        verticalAlign: 'middle',
        fill: data.getItemVisual(dataIdx, 'style').fill,
        fontSize: size
      });

      group.add(textEl);

      data.setItemGraphicEl(dataIdx, textEl);

      textEl.ensureState('emphasis').style = echarts.helper.createTextStyle(
        itemModel.getModel(['emphasis', 'textStyle']),
        {
          state: 'emphasis'
        }
      );
      textEl.ensureState('blur').style = echarts.helper.createTextStyle(
        itemModel.getModel(['blur', 'textStyle']),
        {
          state: 'blur'
        }
      );

      echarts.helper.enableHoverEmphasis(
        textEl,
        itemModel.get(['emphasis', 'focus']),
        itemModel.get(['emphasis', 'blurScope'])
      );

      textEl.stateTransition = {
        duration: seriesModel.get('animation')
          ? seriesModel.get(['stateAnimation', 'duration'])
          : 0,
        easing: seriesModel.get(['stateAnimation', 'easing'])
      };
      // TODO
      textEl.__highDownDispatcher = true;
    };

    this._model = seriesModel;
  },

  remove: function () {
    this.group.removeAll();

    this._model.layoutInstance.dispose();
  },

  dispose: function () {
    this._model.layoutInstance.dispose();
  }
});

<template>
  <div>
    <div class="left-center">
      <div class="left-center-title">
        <img src="../../../assets/large-screen/title-img.png" alt="">
        <div class="titleName"> 气泡列表</div>
      </div>
      <div id="hotChart" style="width: 100%; height:220px; margin:0 auto;"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import barY from "@/assets/large-screen/cicle01.png"
import 'echarts-wordcloud';
import { getPageList } from "@/api/algorithm-house/index";
export default {
  data () {
    return {
      hotChart: null,
      searchForm: {
        pageIndex: 1,
        pageSize: 10,
      },
      bubbleData: [
        { value: 12, label: "", symbolSize: 40 },
        { value: 25, label: "", symbolSize: 70 },
        { value: 20, label: "", symbolSize: 41 },
        { value: 30, label: "", symbolSize: 49 },
        { value: 18, label: "", symbolSize: 60 },
        { value: 15, label: "", symbolSize: 38 },
        { value: 11, label: "", symbolSize: 57 },
        { value: 13, label: "", symbolSize: 45 },
        { value: 25, label: "", symbolSize: 50 },
        { value: 13, label: "", symbolSize: 40 },
      ],
      arrList: []
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.getChart4();
    });
  },
  methods: {
    // 随机设置气泡大小
    getRandom (max, min) {
      return Math.floor(Math.random() * (max - min) + min);
    },

    async getChart4 (data) {
      this.myChart4 = this.$echarts.init(document.getElementById("hotChart"));
      let res = await getPageList(this.searchForm);
      if (res.code == 200) {
        this.arrList = [];
        res.data.records.forEach((item, recordIndex) => {
          if (recordIndex < this.bubbleData.length) {
            // const bubbleItem = this.bubbleData[recordIndex];
            this.arrList.push({
              symbolSize: this.getRandom(80, 40), //气泡大小
              draggable: true, //是否可以拖动
              symbol: "image://" + barY, //气泡图片
              name: item.algName //气泡名称
            });
          }
        });
      }
      this.myChart4.setOption({
        tooltip: {},
        color: ['#59EBE8', '#f29701'],
        animationDurationUpdate: function (idx) {
          return idx * 100;
        },
        animationEasingUpdate: "bounceIn",
        series: [
          {
            type: "graph",
            layout: "force",
            left: "center",
            width: '100%',
            height: 220,
            // top: 25,
            gridSize: 20,
            sizeRange: [30, 80],
            rotationRange: [0, 0],
            rotationStep: 90,
            drawOutOfBound: true,
            layoutAnimation: true,
            force: {
              repulsion: 70,  //节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
              edgeLength: 50,   //边的两个节点之间的距离，值越小则长度越长，这个距离也会受                                             repulsion影响。    
              gravity: 0.11,  //节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
              layoutAnimation: true,  //初始化时转动动画
              // edgeLength: [10, 50],//边的两个节点之间的距离
            },
            label: {
              show: true,
              formatter: ["{b|{b}}"].join("\n"),
              fontWeight: "1000",
              fontSize: "18",
              align: "center",
              verticalAlign: "center",
              rich: {
                a: {
                  color: "#fff",
                  fontSize: 12,
                  lineHeight: 30,
                  textBorderColor: "transparent",
                  textBorderWidth: 0,
                },
                b: {
                  color: "#fff",
                  fontSize: 12,
                  lineHeight: 30,
                  textBorderColor: "transparent",
                  textBorderWidth: 0,
                },

              },
            },
            data: this.arrList
          },
        ],
      });
    },

  }
}
</script>

<style lang="scss" scoped>
.left-center {
  background-image: url("../../../assets/large-screen/border-bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 25px 10px 21px 30px;
  margin-bottom: 10px;

  .left-center-title {
    font-size: 24px;
    font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
    color: #C8DAFF;
    font-weight: bold;
    text-shadow: 0px 0px 35px rgba(0, 255, 234, 0.68);
    position: relative;

    .titleName {
      position: absolute;
      top: -2px;
      left: 25px;
    }
  }

}
</style>