echarts堆积柱状图，渐变色

 

const option = {

        

 color: [

          new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{

            offset: 0,

            color: '#488BFF' // 渐变起始颜色

          }, {

            offset: 1,

            color: '#9abffd' // 渐变结束颜色

          }]),

          new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{

            offset: 0,

            color: '#26CEBA'

          }, {

            offset: 1,

            color: '#8efaed'

          }]),

          new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{

            offset: 0,

            color: '#FFC069'

          }, {

            offset: 1,

            color: '#fadfba'

          }]),

          new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{

            offset: 0,

            color: '#FFC182'

          }, {

            offset: 1,

            color: '#FF792B'

          }]),

          new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{

            offset: 0,

            color: '#8BBCFC'

          }, {

            offset: 1,

            color: '#5387F7'

          }]),

          new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{

            offset: 0,

            color: '#FFECA1'

          }, {

            offset: 1,

            color: '#FFD961'

          }]),

          new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{

            offset: 0,

            color: '#5387F7'

          }, {

            offset: 1,

            color: '#80B4F7'

          }]),

          new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{

            offset: 0,

            color: '#4D69F3'

          }, {

            offset: 1,

            color: '#879CFF'

          }]),

          new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{

            offset: 0,

            color: '#77D3F8'

          }, {

            offset: 1,

            color: '#4ABDEB'

          }]),

          new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{

            offset: 0,

            color: '#FFD961'

          }, {

            offset: 1,

            color: '#FFECA1'

          }]),

          new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{

            offset: 0,

            color: '#FFC182'

          }, {

            offset: 1,

            color: '#FF792B'

          }]),

          new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{

            offset: 0,

            color: '#FFECA1'

          }, {

            offset: 1,

            color: '#FFD961'

          }])

        ]

,

        tooltip: {

          trigger: 'axis',

          backgroundColor: '#fff',

          axisPointer: {

            type: 'none'

          },

          textStyle: {

            color: '#666'

          },

          formatter: (e) => {

            let tip = ''

            tip += '<b>' + e[0].name + '</b><br />'

            e.forEach(params => {

              let colorList = params.color.colorStops

              tip += `<span style="width: 8px;height: 8px;display: inline-block;margin-right: 5px;background: linear-gradient(229deg, ${colorList[0].color} 0%, ${colorList[1].color} 100%);;border-radius: 4px;"></span>` + params.seriesName + '：' + `<b style="background: linear-gradient(229deg, ${colorList[0].color} 0%, ${colorList[1].color} 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">` + params.value + '</b>' + '<br />'

            })

            return tip

          }

        },

,

        legend: {

          top: '94%',

          type: 'scroll',  //name太多，可用按钮切换

          itemWidth: 10,

          itemHeight: 4,

          itemGap: 10,

          textStyle: {

            padding: [2, 0, 0, 0],

          },

          data: [

            {

              name: '权益占净比',

              icon: 'circle'

            },

            {

              name: '固定收益占净比',

              icon: 'circle'

            },

            {

              name: '基金占净值合计',

              icon: 'circle'

            },

            {

              name: '金融衍生品投资市值',

              icon: 'circle'

            },

            {

              name: '买入返售金融资产投资市值',

              icon: 'circle'

            },

            {

              name: '货币市场工具投资市值',

              icon: 'circle'

            }, {

              name: '银行存款和结算备付金投资市值合计',

              icon: 'circle'

            },

            {

              name: '其他投资市值',

              icon: 'circle'

            }, {

              name: '贵金属投资',

              icon: 'circle'

            },

            {

              name: '净资产',

              icon: 'rect'

            }]

        },

        grid: {

          left: 70,

          right: 50,

          bottom: 60,

          top: 15,

          width: 740,

          height: 270

        }，

xAxis： [{.....}],

yAxis:[{...}],

series:[{...}],

dataZoom: [

          {

            type: 'slider',

            show: true,

            startValue: dataZoomStart,   // dataZoomStart = Xdata.length - 20 (Xdata x轴的长度--默认展示最新的20条数据)

            endValue: dataZoomEnd, // dataZoomEnd = Xdata.length - 1  (Xdata x轴的长度)

            dataBackground: {

              areaStyle: { opacity: 0 },

              lineStyle: { opacity: 0 }

            },

            left: 81,

            right: 79,

            bottom: 20,

            height: 16,

            filterMode: 'empty'

          }

        ]

}