echarts词云图echarts-wordcloud使用方法

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);
      }
    });
相关推荐
EMT1 小时前
在 Vue 项目中使用 URL Query 保存和恢复搜索条件
javascript·vue.js
艾小码1 小时前
还在被超长列表卡到崩溃?3招搞定虚拟滚动,性能直接起飞!
前端·javascript·react.js
前端康师傅1 小时前
JavaScript 作用域常见问题及解决方案
前端·javascript
Mintopia1 小时前
🚀 Next.js 全栈 E2E 测试:Playwright vs Cypress
前端·javascript·next.js
原生高钙1 小时前
JS设计模式指南
前端·javascript
Mintopia2 小时前
⚡ WebAssembly 如何加速 AIGC 模型在浏览器中的运行效率?
前端·javascript·aigc
断竿散人2 小时前
乾坤微前端框架的沙箱技术实现原理深度解析
前端·javascript·前端框架
uhakadotcom2 小时前
在python中,使用conda,使用poetry,使用uv,使用pip,四种从效果和好处的角度看,有哪些区别?
前端·javascript·面试
鹏多多2 小时前
深入解析vue的keep-alive缓存机制
前端·javascript·vue.js
吃饺子不吃馅2 小时前
为什么SnapDOM 比 html2canvas截图要快?
前端·javascript·面试