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'

? ? ? ? ? }

? ? ? ? ]

}