echarts横向柱状图 双y轴滚动

滚动代码

   dataZoom: [
          {
            width: 5,
            type: "slider",
            // type: "inside",
            show: true,
            yAxisIndex: [0, 1],
            showDataShadow: false,
            backgroundColor: "rgba(0,0,0,0)",
            borderWidth: 0,
            endValue: 5, //从0开始的相当于8个
            handleIcon:
              "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
            handleSize: "0%",
            handleStyle: {
              color: "#d3dee5",
            },
          },
          {
            //没有下面这块的话，只能拖动滚动条，鼠标滚轮在区域内不能控制外部滚动条
            type: "inside",
            yAxisIndex: [0, 1], //控制哪个轴，如果是 number 表示控制一个轴，如果是 Array 表示控制多个轴。此处控制第二根轴
            zoomOnMouseWheel: false, //滚轮是否触发缩放
            moveOnMouseMove: true, //鼠标移动能否触发平移
            moveOnMouseWheel: true, //鼠标滚轮能否触发平移
          },
        ],

双柱滚动代码

 this.option2 = {
        grid: {
          left: "15%",
          right: "14%",
          bottom: "0%",
          top: "0%",
          containLabel: false, // 图表两侧是否留白
        },
        xAxis: {
          show: false,
        },
        yAxis: [
          {
            type: "category",
            data: this.echarts2yAxis,
            inverse: true,
            axisLabel: {
              show: true,
              margin: 15,
              textStyle: {
                color: "#BDC8DC",
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
          },
          {
            type: "category",
            inverse: true,
            axisTick: "none",
            axisLine: "none",
            show: true,
            axisLabel: {
              inside: true,
              formatter: "{value}个",
              color: "#fff",
            },
            position: "right",
            offset: 56,
            data: this.echarts2Data,
          },
        ],
        dataZoom: [
          {
            width: 5,
            type: "slider",
            // type: "inside",
            show: true,
            yAxisIndex: [0, 1],
            showDataShadow: false,
            backgroundColor: "rgba(0,0,0,0)",
            borderWidth: 0,
            endValue: 5, //从0开始的相当于8个
            handleIcon:
              "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
            handleSize: "0%",
            handleStyle: {
              color: "#d3dee5",
            },
          },
          {
            //没有下面这块的话，只能拖动滚动条，鼠标滚轮在区域内不能控制外部滚动条
            type: "inside",
            yAxisIndex: [0, 1], //控制哪个轴，如果是 number 表示控制一个轴，如果是 Array 表示控制多个轴。此处控制第二根轴
            zoomOnMouseWheel: false, //滚轮是否触发缩放
            moveOnMouseMove: true, //鼠标移动能否触发平移
            moveOnMouseWheel: true, //鼠标滚轮能否触发平移
          },
        ],
        series: [
          {
            data: this.echarts2Data,
            type: "bar",
            barWidth: 10,
            showBackground: true,
            backgroundStyle: {
              color: "rgba(35,108,127,0.65)",
              barBorderRadius: [10, 10, 10, 10],
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  1,
                  0,
                  ["#51FFE3", "#00FE9C"].map((color, offset) => ({
                    color,
                    offset,
                  }))
                ),
                barBorderRadius: [10, 10, 10, 10],
              },
            },
          },
        ],
      };