（一） 线性渐变
// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
color: {
type: 'linear',
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [{
offset: 0, color: '#0E5FFF' // 0% 处的颜色
}, {
offset: 1, color: '#03DFFC', // 100% 处的颜色
}],
globalCoord: false,// 缺省为 false
},
},
实现效果：
（二）径向渐变
// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 5,
colorStops: [{
offset: 0, color: '#0E5FFF' // 0% 处的颜色
}, {
offset: 1, color: '#03DFFC', // 100% 处的颜色
}],
globalCoord: false,// 缺省为 false
},
},
实现效果：
（三）纹理填充
const imageDom = document.createElement("img")
imageDom.src = '${appRes}/map-bg.png'
// 纹理填充
{
image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
}
（四）多个图形不同渐变色
series中分别设置itemStyle的color渐变
series: [
{
name: "xxx",
type: "bar",
barWidth : 12, //柱形宽度
data: [0, 0, 0, 0, 0, 0],
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#0BB5D1' // 0% 处的颜色
}, {
offset: 1, color: '#41E0DF', // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
},
label: {
show: false,
position: "top",
distance: 10,
color: "#aaa"
}
},
{
...},
{
...},
实现效果：
