echarts柱形图 每个柱子设置不同的渐变色

 实现如图所示效果

option配置项如下

  let options = {
                grid: {
                    show: false,
                    left: '20',
                    top: 20,
                    right: '20',
                    bottom: '0',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    show: false,
                    bottom: 0,
                    textStyle: {
                        color: 'rgba(255, 255, 255, 0.65)'
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        axisTick: { show: false },

                        axisLabel: {
                            show: true,
                            interval: 0,
                            textStyle: {
                                color: 'rgba(255,255,255,0.65)', // 更改坐标轴文字颜色
                                fontSize: 12 // 更改坐标轴文字大小
                            }
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "rgba(255,255,255,0.2)",
                                width: 1,
                                type: "solid"
                            },
                        },
                        data: this.chartData.xAxis
                    }
                ],
                yAxis: [

                    {
                        type: 'value',
                        nameTextStyle: {
                            color: 'rgba(255, 255, 255, 0.45)'
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: 'rgba(255,255,255,0.65)', // 更改坐标轴文字颜色
                                fontSize: 12 // 更改坐标轴文字大小
                            }
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: 'rgba(255, 255, 255, 0.1)'
                            }

                        },
                        axisTick: { show: false },
                        axisLine: {
                            show: false,

                        },
                    }
                ],
                series: [
                    {
                        type: 'bar',
                        barWidth: 20,
                        itemStyle: {
                            normal: {
                                //柱体的颜色
                                //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
                                color: function (params) {
                                    console.log(params);
                                    var colorList = [
                                        ['#00D273FF', '#00D27300'],
                                        ['#1AAF87FF', '#1AAF8700'],
                                        ['#00B1FFFF', '#00B1FF00'],
                                        ['#FFA900FF', '#FFA90000']
                                    ];

                                    var colorItem = colorList[params.dataIndex];
                                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: colorItem[0]
                                    },
                                    {
                                        offset: 1,
                                        color: colorItem[1]
                                    }
                                    ], false);
                                },
                            },
                        },
                        data: this.chartData.series
                    }
                ]
            };