多系列漸變效果圖

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
    }
],