echarts-wordcloud1.0版本与echarts4.0版本使用

129 阅读1分钟

需求:均匀分布,并且呈椭圆形,全部的词云都可以点击,点击后会在中间显示。

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);
           });)}

```