Echarts词云图字体颜色根据设置色系顺序展示_echarts词云图颜色-优快云博客

本文介绍了如何在ECharts中自定义词云图的颜色，强调了颜色与字体大小结合对于提升词云展示效果的重要性。作者通过研究源码，发现可以利用dataIndex属性结合预定义色系数组实现动态颜色配置，提供了一种不同于官方示例的解决方案。建议初学者深入研究项目依赖包源码以提高问题解决能力。

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

效果图:

echarst词云图先要前往echarts-wordcloud.js的包网址进行下载对应的包，注意：

项目上echarts的版本也对应着你要安装的echarts-wordcloud版本，

echarts4对应着echarts-wordcloud1.x版本;

echarts5对应着echarts-wordcloud2.x版本；

官方示例上只有两种方式设置词云颜色：

一种是根据随机数生成随机颜色；

一种是设置只能设置一种颜色，但是这样感觉没啥意义，因为本身词云就是不同关键词的权重来显示大小的，所以词云的展示效果，最好的方式就是字体大小与混合色结合展示，这样效果看起来更加舒适。

好了，接下来我介绍一下我发现的另一种形式，先来看一下我的图形配置

const color = [
     '#009DFF', '#22E4FF', '#3BFFD0', '#04E38A', '#FEE588', '#5B6E96', '#E65A56',
];
const options = {
    ...,
    series: [
       {
            type: 'wordCloud',
            shape: 'pentagon',
            left: 'center',
            width: '100%',
            height: '70%',
            sizeRange: [10, 50], // 字体大小范围
            rotationRange: [0, 0],
            rotationStep: 45,
            gridSize: 2,
            drawOutOfBound: true,
            textStyle: {
              normal: {
                color: v => (
                  `${color[v.dataIndex]}`
                ),
              },
            },
            data,
       },
    ],
}

可以看到color那里我根据dataIndex属性作为下标去访问了我定义的color色系数组，这个dataIndex是怎么来的呢？因为官方示例中color定义随机色是在一个函数里，那么这个函数上是否有回调参数呢，我设置了一个v的形参进行控制台打印，然后我发现了v形参下dataIndex这个属性刚刚好适合我设置色系下标。

最后对大部分刚刚进入前端的朋友们，时间上不是很赶的话，研究一下项目依赖包的源码，对于一些问题上的处理可以更加得心应手，大致看了一下依赖包源码，只有几个js文件，没有压缩的话几个js文件加起来也就刚刚过千行，所以稍微看一下依赖包的源码就锁定了对应的配置处理，你就可以发现。项目上处理一个页面的业务处理有时候就几百行，有时候复杂点的页面，交互逻辑上处理可能就过千行了，所以像这种体积小的依赖包稍微看下还是合适的。