1.安装
npm install echartsnpm install echarts-wordcloud注意版本：echarts版本5只能和wordcloud版本2的一起使用 ；echarts版本4只能和wordcloud版本1的一起使用
2.在main.js引入
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts
require('echarts-wordcloud')3.使用
<template><div id="echartsWordcloud" style="width:200px;height:200px;background-color:#0d071f"></div>
</template>
<script>
var run = 999var createRandomItemStyle2 = function () {var colorArr = ['#fda67e', '#81cacc', '#cca8ba', "#88cc81", "#82a0c5", '#fddb7e', '#735ba1', '#bda29a', '#6e7074', '#546570', '#c4ccd3'];var flag = parseInt(Math.random() * 10);return {normal: {fontFamily: '微软雅黑',color:colorArr[flag]}};
}
var createRandomItemStyle1 = function (params) { //此方法与下方配置中的第一个textStle下的color等同var colors = ['#fda67e', '#81cacc', '#cca8ba', "#88cc81", "#82a0c5", '#fddb7e', '#735ba1', '#bda29a', '#6e7074', '#546570', '#c4ccd3'];return colors[parseInt(Math.random() * 10)];
}
export default{data() {return {data : [{name: "小区",value: "283"},{name: "留言板",value: "101"},{name: "业主",value: "148"},{name: "同学",value: "283"},{name: "老师",value: "101"},{name: "话痨",value: "148"}]}},mounted(){this.initEcharts(this.data)},methods:{initEcharts(data){let echartsWordcloud = this.$echarts.init(document.getElementById("echartsWordcloud"));let option = {title: {text: "标题",x: "center"},// backgroundColor: "#fff",series: [{type: "wordCloud",//用来调整词之间的距离gridSize: 10,//用来调整字的大小范围sizeRange: [14, 26],rotationRange: [0, 0],//随机生成字体颜色// textStyle: {// fontFamily: 'sans-serif',// // fontWeight: 'bold',// // Color can be a callback function or a color string// color: function () {// // Random color// return 'rgb(' + [// Math.round(Math.random() * 160),// Math.round(Math.random() * 160),// Math.round(Math.random() * 160)// ].join(',') + ')';// }// },// 也可以自己定制颜色textStyle: {fontFamily: '微软雅黑',color: function () {var colors = ['#fda67e', '#81cacc', '#cca8ba', "#88cc81", "#82a0c5", '#fddb7e', '#735ba1', '#bda29a', '#6e7074', '#546570', '#c4ccd3'];return colors[parseInt(Math.random() * 10)];}},// textStyle: {// color: function() {// return (// "rgb(" +// Math.round(Math.random() * 255) +// ", " +// Math.round(Math.random() * 255) +// ", " +// Math.round(Math.random() * 255) +// ")"// );// }// },//位置相关设置left: "center",top: "center",right: null,bottom: null,width: "100%",height: "100%",//数据data: data}]};echartsWordcloud.setOption(option);//点击事件echartsWordcloud.on("click",function(e){alert(e)})}}
}
</script>效果图：
插件地址：echarts-wordcloud