多系列渐变效果图

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