bar渐变echarts rect配置项内容和展示

      data = {
    type: ['要案数', '案件数'],
    xData: ['2018年', '2019年', '2020年', '2021年'],
    type1: [13, 17, 15, 16],
    type2: [212, 352, 316, 256],
    color:['rgba(255, 215, 54, 1)','rgba(21, 219, 203, 1)']
};
option = {
    backgroundColor: '#000',
    tooltip: {
            show: true,
            formatter: function (params) {
                console.log(params)
              let text =
                '<p  style="font-size:16px;font-weight: 400;color:rgba(255, 255, 255, 1);"><span style="display:inline-block;width:10px;height: 10px;background: ' +
                 data.color[params.seriesName=='要案数'?0:1]+ ';border-radius: 50%;margin-right: 10px;"></span>' + params
                .name + '<br>'+params.seriesName+':' + params.data + '件</p>';
                
              return text
            },
            backgroundColor: 'rgba(38, 68, 110, 0.8)',
            padding: 10,
            borderColor: 'rgba(38, 68, 110, 1)',
            textStyle: {
              color: '#fff',
            }
          },
    grid: {
        top: '28%',
        left: '10%',
        right: '9%',
        bottom: '25%',
    },
    legend: {
        align: 'left',
        left: '9%',
        itemWidth: 15,
        itemHeight: 15,
        itemStyle: {
            borderWidth: 1,
        },
        textStyle: {
            padding: [6, 6, 6, 6],
        },
        data: [
            {
                name: data.type[0],
                icon: 'rect',
                textStyle: {
                    color: '#FFFFFF',
                },
                itemStyle: {
                    borderColor: 'rgba(255, 215, 54, 1)',
                    borderWidth: 1,
                },
            },
            {
                name: data.type[1],
                icon: 'rect',
                textStyle: {
                    color: '#FFFFFF',
                },
                itemStyle: {
                    borderColor: 'rgba(21, 219, 203, 1)',
                    borderWidth: 1,
                },
            },
        ],
    },
    xAxis: [
        {
            type: 'category',
            axisLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 1)',
                },
            },
            axisLabel: {
                textStyle: {
                    fontSize: 16,
                    color: 'rgba(255, 255, 255, 1)',
                },
            },
            axisTick: {
                show: false,
            },
            data: data.xData,
        },
    ],
    yAxis: {
        max: 500,
        splitNumber: 5,
        type: 'value',
        axisTick: {
            show: false,
        },
        axisLine: {
            show: false,
        },
        axisLabel: {
            show: false,
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: '#8EEEFF',
                opacity: 0.2,
                type: 'dashed',
            },
        },
    },

    series: [
        {
            name: data.type[0],
            type: 'bar',
            barWidth: '25%',
            data: data.type1,
            label: {
                normal: {
                    show: true,
                    formatter: (params) => {
                        return params.value + '件';
                    },
                    textStyle: {
                        fontSize: 14,
                        fontFamily: 'zcool-gdh',
                        color: 'rgba(255, 215, 54, 1)',
                    },
                    position: 'outside',
                },
                emphasis: {
                    show: true,
                },
            },
            itemStyle: {
                borderColor: 'rgba(255, 215, 54, 1)',
                borderWidth: 1,
                color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                        {
                            offset: 0,
                            color: 'rgba(15, 51, 82, 1)',
                        },
                        {
                            offset: 1,
                            color: 'rgba(255, 215, 54, 1)',
                        },
                    ],
                    false
                ),
            },
        },
        {
            name: data.type[1],
            type: 'bar',
            barWidth: '25%',
            data: data.type2,
            label: {
                normal: {
                    show: true,
                    formatter: (params) => {
                        return params.value + '件';
                    },
                    textStyle: {
                        fontSize: 14,
                        fontFamily: 'zcool-gdh',
                        color: 'rgba(21, 219, 203, 1)',
                    },
                    lineHeight: 30,
                    position: 'top',
                },
                emphasis: {
                    show: true,
                },
            },
            itemStyle: {
                borderColor: 'rgba(21, 219, 203, 1)',
                borderWidth: 1,
                color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                        {
                            offset: 0,
                            color: 'rgba(15, 51, 82, 1)',
                        },
                        {
                            offset: 1,
                            color: 'rgba(21, 219, 203, 1)',
                        },
                    ],
                    false
                ),
            },
        },
    ],
};