多系列漸變效果圖
image
實(shí)現(xiàn):直接在 option 下面添加漸變色,
設(shè)起止顏色
offset0,offset1,可以設(shè)置offset0.5,按方位起止位置，0開始1結(jié)束
以下為 柱圖紅綠漸變 示例:
option = {
"color": [
{colorStops:
[
{ color: '#ff0000', offset: 0 },
{ color: '#00ff00', offset: 1 }
],
"global": false,
"type": "linear",
//4個(gè)參數(shù)用于配置漸變色的起止位置,
// 這4個(gè)參數(shù)依次對(duì)應(yīng) 左,右,下,上 四個(gè)方位.
"x": 0, "x2": 0,
"y": 0,"y2": 1
},
],
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}
]
};
image
多漸變色效果圖 色盤
"color": [
{colorStops:
[
{ color: '#ccfbff', offset: 0 },
{ color: '#ef96c5', offset: 1 }
],
"global": false,
"type": "linear",
"x": 0,
"x2": 0,
"y": 0,
"y2": 1
},
{colorStops:
[
{ color: '#eae5c9', offset: 0 },
{ color: '#6cc6cb', offset: 1 }
],
"global": false,
"type": "linear",
"x": 0,
"x2": 0,
"y": 0,
"y2": 1
},
{colorStops:
[
{ color: '#ead6ee', offset: 0 },
{ color: '#a0f1ea', offset: 1 }
],
"global": false,
"type": "linear",
"x": 0,
"x2": 0,
"y": 0,
"y2": 1
},
{colorStops:
[
{ color: '#eebd89', offset: 0 },
{ color: '#d13abd', offset: 1 }
],
"global": false,
"type": "linear",
"x": 0,
"x2": 0,
"y": 0,
"y2": 1
},
{colorStops:
[
{ color: '#f9957f', offset: 0 },
{ color: '#f2f5d0', offset: 1 }
],
"global": false,
"type": "linear",
"x": 0,
"x2": 0,
"y": 0,
"y2": 1
}
],
