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'])};// TODOtextEl.__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>