echart柱状图 左右两个柱状图

效果如下：

 

const Xdata = ["1:50", "200:1", "10:10", "100:100"];
const fp_key = ["入栏", "标题", "出栏"];
// 左侧数据
const LF_val = [2200, 1200, 2500, 200];
// 右侧数据
const TS_val = [2500, 1500, 1000, 2000];
let option = {
    backgroundColor: '#0a2e62',
    legend: {
        show: true,
        data: fp_key,
        top: "3%",
        icon: 'none',
        left: "center",
        textStyle: {
            color: "rgba(255,255,255,0.75)",
            fontSize: 18
        },
        //itemWidth: 16,
        //: 10,
        width: 'auto',
        itemGap: 40,
    },
    tooltip: {
        show: false,
        trigger: "item",
        axisPointer: {
            type: "shadow",
            textStyle: {
                color: "#fff",
            },
        },
        textStyle: {
            color: "#fff",
        },
        backgroundColor: "rgba(17,95,182,0.5)", //设置背景颜色
        borderColor: "rgba(255, 255, 255, .8)",
        confine: true,
        formatter: "{b}<br />{a}: {c}头",
    },
    grid: [
        // 左侧
        {
            show: false,
            left: "3%",
            top: "10%",
            bottom: "10%",
            containLabel: true,
            width: "45%",
        },
        // 文字
        {
            show: false,
            left: "50.5%",
            top: "10%",
            bottom: "13%",
            width: "0%",
        },
        // 右侧
        {
            show: false,
            right: "3.1%",
            top: "10%",
            bottom: "10%",
            containLabel: true,
            width: "45%",
        },
    ],
    xAxis: [
        {
            type: "value",
            inverse: true,
            axisLine: {
                show: false,
                lineStyle: {
                    color: "rgba(5, 140, 151, 0.3)",
                },
            },
            axisTick: {
                show: false,
            },
            min: 0,
            max: 5000,
            position: "bottom",
            axisLabel: {
                show: true,
                color: "#BCC8D4",
            },
            splitLine: {
                show: false,
                lineStyle: {
                    type: "line",
                    color: "rgba(5, 140, 151, 0.3)",
                },
            },
        },
        {
            gridIndex: 1,
            type: "value",
            axisLabel: { //坐标轴刻度标签的相关设置。
                show: true,
                color: "#BCC8D4",
            },
        },
        {
            gridIndex: 2,
            axisLine: {
                show: false,
                lineStyle: {
                    color: "rgba(5, 140, 151, 0.3)",
                },
            },
            axisTick: {
                show: false,
            },
            min: 0,
            max: 5000,
            position: "bottom",
            axisLabel: {
                show: true,
                color: "#BCC8D4",
            },
            splitLine: {
                show: false,
                lineStyle: {
                    color: "rgba(5, 140, 151, 0.3)",
                },
            },
        },
    ],
    yAxis: [
        {
            name: "",
            gridIndex: 0,
            type: "category",
            inverse: true,
            position: "top",
            axisLine: {
                show: false,
                lineStyle: {
                    width: 1,
                    color: "#B2D3E4",
                },
            },
            axisTick: {
                show: false,
            },

            axisLabel: {
                show: false,
                textStyle: {
                    color: "#fff",
                    fontSize: 14,
                },
            },
            data: Xdata,
        },
        {
            gridIndex: 1,
            type: "category",
            inverse: true,
            position: "left",
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: "rgba(255,255,255,0.75)",
                    fontSize: "13px",
                },
                padding: [0, 0, 0, 0],
                align: "center",

            },
            data: Xdata.map((value) => {
                return {
                    value: value,
                };
            }),
        },
        {
            name: "",
            gridIndex: 2,
            type: "category",
            inverse: true,
            position: "left",
            axisLine: {
                show: false,
                lineStyle: {
                    width: 1,
                    color: "#B2D3E4",
                },
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                show: false,
                textStyle: {
                    color: "#BDD8FB",
                    fontSize: 14,
                },
            },
            data: Xdata,
        },
    ],
    series: [
        // 左边
        {
            name: fp_key[0],
            type: "bar",
            stack: "one",
            realtimeSort: false,
            barGap: 10,
            barWidth: "10px",
            xAxisIndex: 0,
            yAxisIndex: 0,

            itemStyle: {
                color: {
                    type: "linear",
                    x: 0, // 右
                    y: 0, // 下
                    x2: 1, // 左
                    y2: 0, // 上
                    colorStops: [
                        {
                            offset: 0,
                            color: "rgba(42,130,228,0.5)",
                        },
                        {
                            offset: 1,
                            color: "rgba(255,255,255,0.58)",
                        },
                    ],
                    global: false, //设置为false 使得渐变色不受全局影响
                },
                barBorderRadius: [15, 0, 0, 15], // 设置圆角半径
            },
            // 左侧数据
            data: LF_val,
        },
        {
            name: fp_key[1],
            type: "bar",
            stack: "one",
            data: [],
            label: {
                show: true,
            }
        },
        // 右边
        {
            name: fp_key[2],
            stack: "right",
            type: "bar",
            realtimeSort: false,
            barGap: 10,
            barWidth: "10px",
            xAxisIndex: 2,
            yAxisIndex: 2,
            itemStyle: {
                color: {
                    type: "linear",
                    x: 1, // 右
                    y: 0, // 下
                    x2: 0, // 左
                    y2: 0, // 上
                    colorStops: [
                        {
                            offset: 0,
                            color: "rgba(255,196,0,0.5)",
                        },
                        {
                            offset: 1,
                            color: "rgba(255,255,255,0.58)",
                        },
                    ],
                },
                barBorderRadius: [0, 15, 15, 0], // 设置圆角半径,
            },
            // 右侧数据
            data: TS_val,
        },
    ],
};