Echarts 问题解决 —— Vue3 实现词云图

目录

1.在 vue3 中安装 Echarts 和 词云

2.引入（局部）

3.代码示例

4.常用的配置

5.扩展

---

• 
• 

 

1.在 vue3 中安装 Echarts 和 词云

• npm install echarts
• npm install echarts-wordcloud‘

 

2.引入（局部）

• import * as echarts from 'echarts'; // Echart引入
• import 'echarts-wordcloud/dist/echarts-wordcloud';  // 词云引入
• import 'echarts-wordcloud/dist/echarts-wordcloud.min';

 

3.代码示例

 

4.常用的配置

• shape ：词云的形状，默认是 circle，可选的参数有cardioid 、 diamond 、 triangle-forward 、 triangle 、 star
• left top right bottom ：词云的位置，默认是 center center
• width height ：词云的宽高，默认是 75% 80%
• sizeRange ：词云的文字字号范围，默认是[12, 60] ，词云会根据提供原始数据的 value 对文字的字号进行渲染。以默认值为例， value 最小的渲染为 12px ，最大的渲染为 60px ，中间的值按比例计算相应的数值
• rotationRange rotationStep ：词云中文字的角度，词云中的文字会随机的在 rotationRange 范围内旋转角度，渲染的梯度就是 rotationStep ，这个值越小，词云里出现的角度种类就越多。如果是45度到135度，可能旋转的角度就是 -90 -45 0 45 90 
• gridSize ：词云中每个词的间距
• drawOutOfBound ：是否允许词云在边界外渲染，直接使用默认参数 false 就可以，否则容易造成词重叠
• textStyle ：词云中文字的样式， normal 是初始的样式， emphasis 是鼠标移到文字上的样式
• 其他的就可以参考Echarts官方文档中配置项
• 注意：对于放词云图的div，一定要设置足够大的大小，也就是 width、height 必须要写

 

5.扩展

5.1 文字分配随机颜色

            color() {
              return `rgb(${[
                 Math.round(Math.random() * 160),
               Math.round(Math.random() * 160),
              Math.round(Math.random() * 160),
               ].join(',')})`;
             },

5.2 添加点击事件

      // 添加点击事件
      function eConsole(param:any) {
        if (typeof param.seriesIndex === 'undefined') {
          return;
        }
        // eslint-disable-next-line eqeqeq
        if (param.type == 'click') {
          alert(param.name);
          console.log(param);
          console.log(param.value);
        }
      }
      myChart.on('click', eConsole);