我有尝试着使用官方提供的案例来使用渐变,但事实上是在我这个场景中并不适用,并且网上很多都是跟官方的这个例子相差无几,所以我从配置手册中换了另一种方式。
// 目前官方示例中这个方式在我这里是无法使用的!所以就换了下面的方式来实现渐变!
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#000'},
{offset: 0.5, color: '#888'},
{offset: 1, color: '#ddd'}
]
)
}
}
正确的例子:
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0, color: '#3FC8D1'
}, {
offset: 1, color: '#179CEB'
}]
}
},
目前有提供线性渐变和径向渐变两种,x0, y0, x2, y2这四个参数分别代码着四个方位,colorStops是一个颜色的变化。
我的理解是下面这种方式的方向的变化,大家可以作为参考。
渐变色配置手册官网地址