渐变蝴蝶图-左右分隔echarts 柱状配置项内容和展示

颜色渐变；左右通过中间文字隔开；数值显示

      let data = [{
    name: "aaaa",
    value: 40
}, {
    name: "bbbb",
    value: 30
}, {
    name: "cccc",
    value: 20
}, {
    name: "ddd",
    value: 10
}]
let label = data.map((item) => {
    return item.name
})
let lineColor='rgba(255,255,255,0.2)'
let colors = [{
        borderColor: "rgba(0, 183, 238,1)",
        start: "rgba(0, 183, 238,0.3)",
        end: "rgba(0, 183, 238,0.9)"
    },
    {
        borderColor: "rgba(235, 204, 123,1)",
        start: "rgba(235, 204, 123,0.9)",
        end: "rgba(235, 204, 123,0.3)"
    },
];
option = {
    backgroundColor: '#012248',
    dataZoom: {
        type: 'inside',
        start: 0,
        end: 100,
        yAxisIndex: [0]
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    legend: {
        show: true,
        icon: 'rect',
        itemWidth: 30,
        itemHeight: 10,
        itemGap: 9,
        top: '10',
        left: 'center',
        textStyle: {
            fontSize: 20,
            color: '#F1F1F3'
        },
        data: ['左', '右'],
    },
    grid: [{
        show: false,
        left: '5%',
        top: 60,
        bottom: 60,
        containLabel: true,
        width: '42%'
    }, {
        show: false,
        left: '50.5%', //调整中间文字位置
        top: 80, //使中间文字对齐
        bottom: 60,
        width: '0%',
    }, {
        show: false,
        right: '5%',
        top: 60,
        bottom: 60,
        containLabel: true,
        width: '42%'
    }],
    xAxis: [{
        type: 'value',
        inverse: true,
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        position: 'top',
        axisLabel: {
            show: true,
            color: '#fff'
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: lineColor
            }
        },
    }, {
        gridIndex: 1,
        show: false
    }, {
        gridIndex: 2,
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        position: 'top',
        axisLabel: {
            show: true,
            color: '#fff'
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: lineColor
            }
        },
    }],
    yAxis: [{
        type: 'category',
        inverse: true,
        position: 'right',
        axisLine: {
            show: false,
            lineStyle: {
                color: lineColor
            }
        },

        axisTick: {
            show: false
        },
        axisLabel: {
            show: false
        },
        data: label
    }, {
        gridIndex: 1,
        type: 'category',
        inverse: true,
        position: 'left',
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            show: true,
            textStyle: {
                color: '#ffffff',
                fontSize: 16,
            },
        },
        data: label.map((value) => {
            return {
                value: value,
                textStyle: {
                    align: 'center',
                }
            }
        })
    }, {
        gridIndex: 2,
        type: 'category',
        inverse: true,
        position: 'left',
        axisLine: {
            show: false,
            lineStyle: {
                color: lineColor
            }
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            show: false

        },
        data: label
    }],
    series: [{
            name: '左',
            type: 'bar',
            barWidth: '15',
            stack: 'left',
            label: {
                show: true,
                fontSize: 14,
                distance: 10,
                color: '#fff',
                position: 'left', //inside|right
                formatter: (params) => {
                    return params.value + '%'
                }
            },
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                            offset: 0,
                            color: colors[0].start
                        },
                        {
                            offset: 1,
                            color: colors[0].end
                        }
                    ]),
                    // color:colors[0].borderColor
                }
            },
            data: data
        },
        {
            name: '右',
            type: 'bar',
            barWidth: '15',
            stack: 'right',
            xAxisIndex: 2,
            yAxisIndex: 2,
            label: {
                show: true,
                fontSize: 14,
                distance: 10,
                color: '#fff',
                position: 'right', //inside|right
                formatter: (params) => {
                    return params.value + '%'
                }
            },
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                            offset: 0,
                            color: colors[1].start
                        },
                        {
                            offset: 1,
                            color: colors[1].end
                        }
                    ]),
                    // color:colors[1].borderColor
                }
            },
            data: data
        }
    ]
}