Echarts双柱图的配置

这是一个类目轴在中间，左右两边数值轴的配置，话不多说，直接上效果

      const dataZoomEndValue = 4;
      const Xdata = [
        "省农信社",
        "农业银行",
        "建设银行",
        "工商银行",
        "苏州银行",
        "邮储银行",
        "江苏银行",
        "交通银行",
        "中国银行",
        "南京银行",
        "光大银行",
        "兴业银行",
        "招商银行",
        "民生银行",
        "中信银行",
        "宁波银行",
      ]
     const fp_key = ["最短制卡时间(分钟)", "平均制卡时间(分钟)"]
      // 左侧数据
     const LF_val= [
        0.2, 0.25, 0.2, 0.32, 0.67, 0.2, 0.18, 0.47, 0.55, 0.68, 0.8, 0.83,
        1.02, 1.28, 1.45, 3,
      ]
      // 右侧数据
     const TS_val= [
        1.64, 2.15, 1.97, 1.78, 1.92, 3.36, 1.73, 2.02, 2.53, 1.57, 6.57, 4.25,
        3.18, 9.28, 3.57, 3.83,
      ]

    option = {
        legend: {
          data: fp_key,
          top: "1%",
          right: "center",
          textStyle: {
            color: "#000",
          },
          itemWidth: 16,
          itemHeight: 10,
        },
        tooltip: {
          show: true,
          trigger: "item",
          backgroundColor: "#051144",
          borderColor: "#1e74a0",
          textStyle: {
            color: "#000",
          },
          formatter: "{b}<br />{a}: {c}分钟",
          axisPointer: {
            // type: "shadow",
          },
        },

        grid: [
          {
            // 左侧边框
            show: false,
            left: "3%",
            top: "13%",
            bottom: "8%",
            containLabel: false,
            width: "40%",
          },
          {
            // 中间文字边框
            show: false,
            left: "51%",
            bottom: "8%",
            top: "14%",
            containLabel: false,
            width: "20%",
          },
          {
            // 右侧边框
            show: false,
            right: "3%",
            // left: '95%',
            top: "13%",
            bottom: "8%",
            containLabel: false,
            width: "40%",
          },
        ],

        dataZoom: [
          {
            show: false,
            type: "slider",
            yAxisIndex: [0, 1], // 这里是从X轴的0刻度开始
            startValue: 0, // 数据窗口范围的起始数值
            endValue: dataZoomEndValue, // 数据窗口范围的结束数值(一次性展示几个)
          },
          {
            show: false,
            type: "slider",
            yAxisIndex: [1, 2], // 这里是从X轴的0刻度开始
            startValue: 0, // 数据窗口范围的起始数值
            endValue: dataZoomEndValue, // 数据窗口范围的结束数值(一次性展示几个)

            // start: 1, // 默认为0
            // end: 100, // 默认为100
            // type: 'slider',
            // maxValueSpan: 3, // 显示数据的条数(默认显示10个)
            // yAxisIndex: [0],
            // handleSize: 0, // 滑动条的 左右2个滑动条的大小
            // height: '80%', // 组件高度
            // left: 600, // 左边的距离
            // right: 8, // 右边的距离
            // bottom: 10, // 上边边的距离
            // borderColor: '#0e426c',
            //   fillerColor: "#1b579e", //滑动块的颜色
            // fillerColor: '#1890ff', // 滑动块的颜色
            // backgroundColor: '#0e426c', // 两边未选中的滑动条区域的颜色
            // showDataShadow: false, // 是否显示数据阴影 默认auto
            // showDetail: false, // 即拖拽时候是否显示详细数值信息 默认true
            // realtime: true, // 是否实时更新
            // filterMode: 'filter',
            // yAxisIndex: [0, 1], // 控制的y轴
            // brushSelect: false // 刷选功能，设为false可以防止拖动条长度改变 ************（这是一个坑）
          },
        ],

        xAxis: [
          {
            gridIndex: 0,
            type: "value",
            triggerEvent: true,
            // 翻转
            inverse: true,
            axisLine: {
              show: false,
              lineStyle: {
                color: "#BDD8FB",
              },
            },
            axisTick: {
              show: false,
            },
            position: "top",
            axisLabel: {
              show: false,
              textStyle: {
                color: "#BDD8FB",
                fontSize: 12,
              },
            },
            splitLine: {
              show: false,
            },
          },
          {
            gridIndex: 1,
            show: false,
          },
          {
            gridIndex: 2,
            type: "value",
            axisLine: {
              show: false,
              lineStyle: {
                color: "#BDD8FB",
              },
            },
            axisTick: {
              show: false,
            },
            position: "top",
            axisLabel: {
              show: false,
              color: "#BDD8FB",
              fontSize: 12,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            gridIndex: 0,
            type: "category",
            inverse: true,
            position: "right",
            axisLine: {
              show: false,
              lineStyle: {
                width: 1,
                color: "#B2D3E4",
              },
            },
            axisTick: {
              show: false,
            },

            axisLabel: {
              show: false,
              textStyle: {
                color: "#BDD8FB",
                fontSize: 14,
              },
            },
            data: Xdata,
          },
          {
            gridIndex: 1,
            type: "category",
            inverse: true,
            position: "left",
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#BDD8FB",
                fontSize: 14,
              },
            },
            data: Xdata.map((value) => {
              return {
                value: value,
                textStyle: {
                  color: "#000",
                  align: "center",
                  top: "center",
                },
              };
            }),
          },
          {
            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: 15,
            xAxisIndex: 0,
            yAxisIndex: 0,
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
              borderRadius: [0, 0, 0, 0],
            },
            label: {
              show: true,
              position: "left",
              textStyle: {
                color: "#efdf79",
                fontSize: 14,
                align: "right",
              },
              emphasis: {
                show: true,
                position: "left",
                offset: [0, 0],
                textStyle: {
                  color: "#FFCB58",
                  fontSize: 14,
                },
              },
            },
            itemStyle: {
              color: {
                type: "linear",
                x: 0, // 右
                y: 0, // 下
                x2: 1, // 左
                y2: 0, // 上
                colorStops: [
                  {
                    offset: 0.1,
                    color: "#d28b45", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#f6b25a", // 100% 处的颜色
                  },
                ],
                global: false, //设置为false 使得渐变色不受全局影响
              },
              borderRadius: [0, 0, 0, 0], // 设置圆角半径
            },

            // 左侧数据
            data: LF_val,
          },
          // 右边
          {
            name:fp_key[1],
            stack: "right",
            type: "bar",
            realtimeSort: false,
            barGap: 10,
            barWidth: 15,
            xAxisIndex: 2,
            yAxisIndex: 2,
            showBackground: false,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
              borderRadius: [0, 0, 0, 0],
            },
           
           
            label: {
              show: true,
              position: "right",
              textStyle: {
                color: "#d78f7c",
                fontSize: 14,
              },
              emphasis: {
                show: true,
                position: "right",
                offset: [0, 0],
                textStyle: {
                  color: "#2EBAFF",
                  fontSize: 14,
                },
              },
            },
            itemStyle: {
              color: {
                type: "linear",
                x: 1, // 右
                y: 0, // 下
                x2: 0, // 左
                y2: 0, // 上
                colorStops: [
                  {
                    offset: 0.1,
                    color: "#1552cc ", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#3e8bfe", // 100% 处的颜色
                  },
                ],
              },
              borderRadius: [0, 0, 0, 0], // 设置圆角半径,
            },
            // 右侧数据
            data: TS_val,
          },
        ],
      };