类目柱状图图例优化echarts rgba(0,0,0,0.6)配置项内容和展示

      option = {
    legend: {
        type: 'scroll',
        orient: 'vertical',
        left: '5%',
        top: 'center',
        itemGap: 40,
        selectedMode: true,
        icon: 'pin',
        textStyle: {
            rich: {
                a: {
                    color: '#000',
                },
                b0: {
                    color: '#36CFC9',
                    fontSize: 20,
                    padding: [0, 0, 0, 40]
                },
                b1: {
                    color: '#40A9FF',
                    fontSize: 20,
                    padding: [0, 0, 0, 40]
                },
                b2: {
                    color: '#597EF7',
                    fontSize: 20,
                    padding: [0, 0, 0, 40]
                },
                b3: {
                    color: '#9254DE',
                    fontSize: 20,
                    padding: [0, 0, 0, 40]
                },
                b4: {
                    color: '#F759AB',
                    fontSize: 20,
                    padding: [0, 0, 0, 40]
                },
                b5: {
                    color: '#FFA940',
                    fontSize: 20,
                    padding: [0, 0, 0, 40]
                }
            }
        },
        formatter: function(name) {
            let title = ''
            var total = 0;
            var target;
            var index;
            for (var i = 0, l = option.series[0].data.length; i < l; i++) {
                if (option.series[0].data[i].name == name) {
                    target = option.series[0].data[i].value;
                    title = option.series[0].data[i].label
                    index = i < 6 ? i : 5
                }
            }
            return `{a| ${name}}{b${index}| ${target}}`
        }
    },
    grid: {
        left: "30%",
        right: "10%",
        bottom: "10%",
        top: "15%",
    },
    xAxis: {
        type: "category",
        axisLabel: {
            color: 'rgba(0,0,0,0.6)',
            fontSize: '12'
        },
        axisLine: {
            lineStyle: {
                color: '#E8E8E8',
            }
        },
        axisTick: {
            show: false
        },
    },
    yAxis: {
        type: "value",
        show: true,
        textStyle: {
            width: 0,
        },
        axisTick: {
            show: false,
        },
        axisLabel: {
            show: false,
        },
        axisLine: {
            show: false
        },
        splitLine: {
            show: true,
            lineStyle: {
                type: "dashed"
            }
        }
    },
    series: [{
            data: [{
                    name: 'name1',
                    value: 12
                },
                {
                    name: 'name2',
                    value: 20
                },
                {
                    name: 'name3',
                    value: 3
                },
                {
                    name: 'name4',
                    value: 12
                },
                {
                    name: 'name5',
                    value: 123
                },
                {
                    name: 'name6',
                    value: 1
                },
            ],
            width: 0,
            height: 0,
            type: 'pie',
            hoverAnimation: false,
            labelLine: {
                show: false,
            },
            itemStyle: {
                normal: {
                    color: function(params) {
                        var colorList = ['#36CFC9', '#40A9FF', '#597EF7', '#9254DE', '#F759AB', '#FFA940'];
                        return colorList[params.dataIndex]
                    },
                }
            }
        },
        {
            data: [{
                    name: 'name1',
                    value: 12
                },
                {
                    name: 'name2',
                    value: 20
                },
                {
                    name: 'name3',
                    value: 3
                },
                {
                    name: 'name4',
                    value: 12
                },
                {
                    name: 'name5',
                    value: 123
                },
                {
                    name: 'name6',
                    value: 1
                }
            ],
            barWidth: '50%',
            type: 'bar',
            itemStyle: {
                normal: {
                    color: function(params) {
                        var colorList = ['#36CFC9', '#40A9FF', '#597EF7', '#9254DE', '#F759AB', '#FFA940'];
                        return colorList[params.dataIndex]
                    },
                }
            }
        },
    ]
};