首页echarts 词云每个字体设置颜色渐变效果

echarts 词云每个字体设置颜色渐变效果

时间: 2024-12-24 08:30:57 浏览: 149

ECharts 的词云（Word Cloud）图可以使用 `color` 和 `emphasis.color` 配置项来设置字体颜色渐变效果。首先，你需要为每个词定义一个颜色值，这可以通过数组或者配置对象来实现。然后，你可以利用 ECharts 提供的颜色映射函数，如 `linearGradient` 或 `radialGradient`，来创建线性或径向渐变。下面是一个简单的示例： ```javascript option = { wordCloud: { // 字体大小数据 words: [ { value: '词1', color: 'red' }, { value: '词2', color: 'green' }, { value: '词3', color: 'blue' }, // 更多词... ], // 设置渐变色 color: function(word) { return { type: 'linear', xStart: 0, yStart: 0, xEnd: 1, yEnd: 1, colors: ['red', 'yellow', 'green'] }; }, // 强调状态下的颜色渐变 emphasis: { color: function(word) { return { type: 'linear', xStart: 0, yStart: 0, xEnd: 1, yEnd: 1, colors: ['blue', 'purple', 'white'] }; } } } }; ``` 在这个例子中，词“词1”将从红色渐变到黄色再到绿色，“词2”和“词3”也是如此。当鼠标悬停在词上时，强调颜色会按照不同的路径渐变。

阅读全文