需求:均匀分布,并且呈椭圆形,全部的词云都可以点击,点击后会在中间显示。
npm install echarts-wordcloud@1.1.2
npm install echarts-wordcloud@1.1.2
代码使用
<div ref="myChart" style="width: 100%; height: 341px"></div>
js部分,引入echarts与echarts-wordcloud
import * as echarts from "echarts"
import 'echarts-wordcloud'
mounted() {
this.getIint()
}
data(){
apiData : [{
value: 50,
name: easd,
},{
value: 20,
name: esdf,
},{
value: 30,
name: excv,
},{
value: 10,
name: esdf,
},{
value: 80,
name: esd,
},{
value:10,
name: esd,
},{
value: 12,
name: esdf,
},{
value: 34,
name: esxxc,
},
]}
methods: {
this.getIint(
// 先销毁之前的实例
if (this.myChart) {
this.myChart.dispose();
}
// 初始化新的实例
this.myChart = echarts.init(this.$refs.myChart);
let that = this;
let option = {
series: [
{
type: 'wordCloud',
shape: 'circle', // 词云图的形状在这里来设置
width: '100%',
height: '100%',
sizeRange: [12, 50],
rotationRange: [0, 0],
gridSize: 25,
layoutAnimation: true,
textStyle: {
normal: {
color: function (params) {
// 这里是设置单个词的颜色,我这里用了两个颜色,
return params.value === 50 ? '#0C245D' : '#CCD0E5';
}
}
},
data: [...this.apiData],
}
]
};
this.myChart.setOption(option);
this.myChart.off('click');
// 此处可以添加点击词云时执行的事件
this.myChart.on('click', function (params) {
that.getTabData(params.name);
that.changtypeWord(params.name);
});)}
```