let echarts = require('echarts/lib/echarts') //引入基本模板
require('echarts-wordcloud');
Vue.prototype.$echarts = echarts
const that = this;
myChart = that.$echarts.init(that.$refs.wordCloudEcharts);
var maskImage = new Image();
maskImage.src = that.ImageURL;
maskImage.onload = function () {
myChart.setOption({
series: [
{
type: "wordCloud",
shape: "circle",
maskImage: maskImage,
left: "center",
top: "center",
width: "100%",
height: "100%",
sizeRange: [16, 36],
rotationRange: [0, 0],
gridSize: 26,
drawOutOfBound: false,
textStyle: {
color: function () {
return (
"rgb(" +
[
Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
].join(",") +
")"
);
},
},
data: list,
},
],
});
that.timer = setTimeout(() => {
that.wordCloudLoad = false;
}, 600);
};
},
echarts词云
最新推荐文章于 2024-06-17 17:18:14 发布
这段代码展示了如何在Vue项目中结合Echarts库创建一个词云图,并使用指定的图片作为遮罩。通过设置series中的参数,如形状、大小范围、旋转范围等,以及动态颜色生成和数据加载,实现了自定义的词云效果。
摘要由CSDN通过智能技术生成