渐变使用方式：
1、new echarts.graphic.LinearGradient
2、type: linear
?拿官网的例子举例：
这个图中渐变核心部分：
series: [
{
type: 'bar',
showBackground: true,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#83bff6' },
{ offset: 0.5, color: '#188df0' },
{ offset: 1, color: '#188df0' }
])
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#2378f7' },
{ offset: 0.7, color: '#2378f7' },
{ offset: 1, color: '#83bff6' }
])
}
},
data: data
}
]?上面例子中用到了new echarts.graphic.LinearGradient，在方向是也是 四个值 ，分别为 x, y, x2, y2
x:为1?从左往右
y:为1 从上往下
x2:为1 从右往左
y2: 为1 从下往上
2、当我们需要使用渐变的时候还要再应用一次 echarts 才能拿到上面的 LinearGradient 类，有时候很不方便，所以一般才有直接用 type 来写
代码：
showBackground: true,
itemStyle: {
color: {
type: 'linear', // 线性渐变
x: 0, // x: 从左向右 1 ——> 0
y: 0, // y: 从上向下 1 ——> 0
x2: 0, // x2: 从右向左 1 ——> 0
y2: 1, // y2: 从下向上 1 ——> 0
colorStops: [
{ offset: 0, color: '#83bff6' }, //
{ offset: 0.5, color: '#188df0' },
{ offset: 1, color: '#188df0' }
]
}
},
emphasis: {
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: '#2378f7' }, // offset：坐标为0处的颜色
{ offset: 0.7, color: '#2378f7' },
{ offset: 1, color: '#83bff6' } // offset：坐标为1处的颜色
]
}
}
},
data: data
}
]
