echarts折线图折线的颜色渐变
时间: 2023-11-10 10:03:28 浏览: 167
Echarts实现的折线图
5星 · 资源好评率100%
可以使用 echarts 中的渐变色来实现折线图折线的颜色渐变。具体实现方法如下:
1. 在 series 中设置 lineStyle.normal.color 为一个对象,该对象包含 type 和 colorStops 两个属性。
2. type 属性表示渐变类型,可以是 linear(线性渐变)或 radial(径向渐变)。
3. colorStops 属性是一个数组,每个元素表示一个颜色停止点,包含 offset 和 color 两个属性。offset 表示该停止点在渐变中的位置,取值范围为 0-1,color 表示该停止点的颜色。
示例代码如下:
```
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
lineStyle: {
normal: {
color: {
type: 'linear',
colorStops: [{
offset: 0,
color: 'red' // 0% 处的颜色
}, {
offset: 1,
color: 'blue' // 100% 处的颜色
}],
}
}
}
}]
};
```
阅读全文