vue-echarts-wordcloud词云
作者:互联网
一,注意事项
在vue中引入echarts-wordcloud依赖,发觉无法正常显示,后经过查找相关资料,发觉是版本问题,echarts-wordcloud 2 对应的是echarts5, echarts-wordcloud 1对应的是echarts 4
二, 步骤
1 安装 npm
npm install echarts
npm install echarts-wordcloud
2 导入
import * as echarts from 'echarts'
import 'echarts-wordcloud';
3
<div ref="wordCloudChart" style="width: 100%; height: 180px"/>
wordCloudChart: undefined,
// 初始化 echarts
this.$nextTick(() => {
this.initCharts();
this.setTasteAndToppingPreference();
});
//初始化视图
initCharts() {
this.wordCloudChart = echarts.init(this.$refs.wordCloudChart)
this.__resizeChartHandler = debounce(() => {
this.wordCloudChart.resize()
}, 50)
window.addEventListener('resize', this.__resizeChartHandler)
},
// 初始化数据
setTasteAndToppingPreference(data) {
this.wordCloudChart.setOption({
tooltip: {},
series: [{
type: 'wordCloud',
left: 'center',
top: 'center',
width: '70%',
height: '80%',
right: null,
bottom: null,
gridSize: 2,
sizeRange: [12, 40],
rotationRange: [-90, 90],
shape: 'smooth',
drawOutOfBound: true,
textStyle: {
color: function () {
return randomColor({hue: '#1785ff', count: 1})[0];
//使用 randomColor.js 获取蓝色的相近色
}
},
data: data
}]
})
this.wordCloudChart.resize()
},
标签:npm,vue,wordcloud,wordCloudChart,词云,data,echarts,resize 来源: https://blog.csdn.net/qq_45055165/article/details/119282629