多系列渐变效果图
image
实现:直接在 option 下面添加渐变色,
设起止颜色
offset0,offset1,可以设置offset0.5,按方位起止位置，0开始1结束
以下为 柱图红绿渐变 示例:
option = {
"color": [
{colorStops:
[
{ color: '#ff0000', offset: 0 },
{ color: '#00ff00', offset: 1 }
],
"global": false,
"type": "linear",
//4个参数用于配置渐变色的起止位置,
// 这4个参数依次对应 左,右,下,上 四个方位.
"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
}
],
