1.安装
npm install echarts
npm 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="200px;height:200px;background-color:#0d071f"></div>
</template>
<script>
var run = 999
var 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,
"100%",
height: "100%",
//数据
data: data
}
]
};
echartsWordcloud.setOption(option);
//点击事件
echartsWordcloud.on("click",function(e){
alert(e)
})
}
}
}
</script>
原文链接：https://blog.csdn.net/qq_37550440/article/details/116779706