echarts legend字体线性渐变
时间: 2025-07-10 11:10:40 浏览: 7
在 ECharts 中,图例(legend)文字的样式可以通过 `legend.textStyle` 属性进行自定义。如果希望将图例文字的颜色设置为线性渐变样式,则可以利用 ECharts 提供的富文本样式支持以及 `rich` 配置项来实现。
具体实现方法如下:
- 使用 `legend.rich` 定义一个富文本样式,在其中通过 `color` 属性应用线性渐变色。
- 在 `legend.textStyle` 中引用该富文本样式名称。
- 线性渐变色可通过 `new echarts.graphic.LinearGradient(...)` 构造函数指定方向和颜色断点。
以下是一个配置示例代码片段:
```javascript
option = {
legend: {
data: ['系列1', '系列2'],
rich: {
gradientText: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{ offset: 0, color: '#ff0000' },
{ offset: 1, color: '#0000ff' }
]
}
}
},
textStyle: {
rich: 'gradientText'
}
},
xAxis: { type: 'category', data: ['A', 'B', 'C'] },
yAxis: {},
series: [
{ name: '系列1', type: 'bar', data: [10, 20, 30] },
{ name: '系列2', type: 'bar', data: [15, 25, 35] }
]
};
```
上述代码中,`rich` 定义了一个名为 `gradientText` 的样式,其 `color` 属性使用了线性渐变,从左到右依次由红色过渡到蓝色。此样式被应用于图例文字[^2]。
### 注意事项
- `echarts.graphic.LinearGradient` 的参数 `x`, `y`, `x2`, `y2` 控制渐变方向,取值范围为 0 到 1,分别表示起点和终点在容器中的相对位置。
- `colorStops` 数组定义了渐变的颜色断点,每个对象包含 `offset` 和 `color` 两个属性,`offset` 表示颜色的位置比例,`color` 表示对应的颜色值。
阅读全文
相关推荐














