echarts词云图echarts-wordcloud使用方法

小白菜丨真香2023-12-08 15:31

1、echarts5.0以下的版本使用 echarts-wordcloud 1.0 的词云

1. 安装 wordCloud 1.0 依赖包
    npm install echarts-wordcloud@1
    
2. man.js 注入
    import 'echarts-wordcloud'

2、echarts5.0及以上的下载 echarts-wordcloud 2.0 版本

注意：npm install echarts-wordcloud 默认安装的是 2.0 版本

具体使用：

项目中引用：

import * as echarts from 'echarts';
import 'echarts-wordcloud';

echarts-wordcloud 基本配置

<div ref="word-cloud" class="flex can-class" ></div>

// 这里和echarts的使用一样，先拿到容器元素
  const myChart = echarts.init(this.$refs['word-cloud']);
  window.addEventListener('resize', function() {
    myChart.resize();
  });
  appProto().then(res => {
      if (res.data.code === 200) {
    　　// 因为UI设计规定了颜色，因此我就采用这几个颜色座位随机的颜色调整
        const color = ['#1890FF', '#13C2C2', '#2FC25B', '#009DFF', '#8496FA'];
        var option = {
          backgroundColor: '#fff',
          series: [
            {
              type: 'wordCloud',
              sizeRange: [15, 70], // 用来调整字的大小范围
              rotationRange: [0, 0],// 每个词旋转的角度范围和旋转的步进
              rotationStep: 45,
              gridSize: 10, // 用来调整词之间的距离
              shape: 'pentagon',// shape这个属性虽然可配置，但是在词的数量不太多的时候，效果不明显，它会趋向于画一个椭圆
              //位置的配置
              width: '100%',
              height: '100%',
              drawOutOfBound: false,// 允许词太大的时候，超出画布的范围
              layoutAnimation: true,// 布局的时候是否有动画
              textStyle: {
                normal: {
                  // 颜色可以用一个函数来返回字符串，这里是随机色
                  color: function(v) {
                    const index = Math.floor(Math.random() * color.length);
                    return color[index];
                  },
                  fontFamily: 'sans-serif',
                  fontWeight: '550'
                }
              },
              //划过添加的阴影，因为我不需要，因此注释了
              <!-- emphasis: {
                focus: 'self',
                textStyle: {
                    textShadowBlur: 10,
                    textShadowColor: '#333'
                }
              }, -->
              //data格式是一个数组
              data: res.data.data
            }
          ]

        };
        myChart.setOption(option);
      }
    });