echarts词云库的使用

最新推荐文章于 2025-05-08 14:55:15 发布

原创最新推荐文章于 2025-05-08 14:55:15 发布

· 1k 阅读

3 ·

版权

文章标签：

#echarts #前端 #javascript

笔记专栏收录该内容

15 篇文章

订阅专栏

在ECharts升级到2.0版本后，不再内置词云库支持。为使用词云图，需手动安装`echarts-wordcloud`2.0.0版。在引入库并配置时，需注意`textStyle.normal`对象可能导致颜色单一的问题。移除`normal`对象可实现颜色多样化。此外，确保ECharts与echarts-wordcloud版本对应，如5.1.0对应1.1.3，5.2.0对应2.0.0，以避免报错。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

echarts在升级到2.0版本之后，不再支持词云库的使用，在最新版本的echarts（5.2.0）情况下控制台会出现如下报错

解决方法:

下载npm install echarts-wordcloud 【注：版本号：2.0.0】

下载成功之后，在min.js中写入

const wordCloud = require('echarts-wordcloud');

之后词云库会正常展示

但是显示正常之后可能会遇到出现的词云只有一个颜色，如图

出现这种情况可能是因为我们配置写的有问题

//这种配置写法已经不生效了
textStyle: {
     normal: {
        color: function() {
                 return 'rgb(' + [
                         Math.round(Math.random() * 160),
                         Math.round(Math.random() * 160),
                         Math.round(Math.random() * 160)
                 ].join(',') + ')';
        }
     },
}

//可以把normal对象去掉，就会正常显示不同的颜色。
textStyle : {
   fontFamily: 'PingFangSC-Semibold',
   fontWeight: 400,
   color: function () {
       return 'rgb(' + [
               Math.round(Math.random() * 160), 
               Math.round(Math.random() * 160), 
               Math.round(Math.random() * 160)
       ].join(',') + ')' ;
                                    
   },
}

配置完成之后没有其他的问题，应该就可以正常显示我们想要的词云库