echarts 横向柱状图 以及dataZoom属性

2024.11.08今天我学习了如何实现横向柱状图，效果如下：

代码如下：

      let series_data = [
            {name:'第一',value:1},
            {name:'第二',value:2},
            {name:'第三',value:3},
            {name:'第四',value:4},
            {name:'第五',value:5},
            {name:'第六',value:6},
            {name:'第七',value:7},
            {name:'第八',value:8},
                        ];
      let option = {
        tooltip: {
          show: true
        },
        grid: {
          containLabel: true,
          left: '5%',
          right: '7%',
          top: '5%',
          bottom: '10%'
        },
        xAxis: {
          type: 'value',
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        yAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLabel: {
            color: 'white',
            textStyle: {
              fontSize: '1.2rem',
              fontWeight: 'bold'
            },
            formatter: function (value) {
              let str = "";
              let num = 4; //每行显示字数
              let valLength = value.length; //该项x轴字数
              let rowNum = Math.ceil(valLength / num); // 行数
              if (rowNum > 1) {
                for (let i = 0; i < rowNum; i++) {
                  let temp = "";
                  let start = i * num;
                  let end = start + num;
                  temp = value.substring(start, end) + "";
                  str += temp;
                }
                return str.length > 5 ? str.slice(0, 4) + '...' : str;
              } else {
                return value.length > 5 ? value.slice(0, 4) + '...' : value;
              }
            },
          },
          splitLine: {
            show: false
          },
          axisLine: {
            show: false
          },
          data: series_data.map(item => item.name)
        },
        dataZoom: [
          {
            yAxisIndex: [0, 1], // 控制y轴滚动对象
            type: "slider",
            startValue: 100,
            endValue: 97,
            width: 7,
            height: "90%",
            top: "5%",
            right: 0,
            fillerColor: "#2aa5ff", // 滚动条颜色
            borderColor: "rgba(17, 100, 210, 0.12)",
            // backgroundColor: "#b9b9b9", //两边未选中的滑动条区域的颜色
            backgroundColor: "transparent", //两边未选中的滑动条区域的颜色
            handleSize: 0, // 两边手柄尺寸
            showDataShadow: false, //是否显示数据阴影 默认auto
            showDetail: false, // 拖拽时是否展示滚动条两侧的文字
            zoomLock: true, // 禁用缩放功能
            realtime: true, // 拖动时，是否实时更新系列的视图
            brushSelect: false,//禁止刷选 就是防止出现+号横移框
          },
          {
            type: "inside",
            minValueSpan: 10,
            yAxisIndex: [0],
            zoomOnMouseWheel: false, // 关闭滚轮缩放
            moveOnMouseWheel: true, // 开启滚轮平移
            moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
          },
        ],
        series: [
          {
            type: 'bar',
            data: series_data,
            label: {
              show: true,
              position: 'right',
              textStyle: {
                color: 'white',
                fontSize: '1.2rem',
                fontWeight: 'bold'
              }
            },
            barWidth: 20,
            itemStyle: {
              normal: {
                barBorderRadius: 7,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 0,
                  color: "#00d5fc",
                },
                  {
                    offset: 1,
                    color: "#00afff",
                  },
                ]),
              },
              emphasis: {
                barBorderRadius: 7
              },
            }
          }
        ]
      }
      this.xxxxx.clear();
      this.xxxxx.resize();
      this.xxxxx.setOption(option);

dataZoom属性详情：

dataZoom: [
      {
        type: "slider",
        realtime: true, // 拖动时，是否实时更新系列的视图
        startValue: 0,
        endValue: 5,
        width: 5,
        height: "90%",
        top: "5%",
        right: 0,
        // orient: 'vertical', // 设置横向还是纵向, 但是官方不太建议如此使用，建议使用 yAxisIndex 具体指明
        yAxisIndex: [0, 1], // 控制y轴滚动对象
        fillerColor: "#0093ff", // 滚动条颜色
        borderColor: "rgba(17, 100, 210, 0.12)",
        backgroundColor: "#cfcfcf", //两边未选中的滑动条区域的颜色
        handleSize: 0, // 两边手柄尺寸
        showDataShadow: false, //是否显示数据阴影 默认auto
        showDetail: false, // 拖拽时是否展示滚动条两侧的文字
        zoomLock: true,
        moveHandleStyle: {
          opacity: 0,
        },
      },
      {
        type: "inside",
        // width: 0,
        startValue: 0,
        endValue: 10,
        minValueSpan: 10,
        yAxisIndex: [0],
        zoomOnMouseWheel: false, // 关闭滚轮缩放
        moveOnMouseWheel: true, // 开启滚轮平移
        moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
      },
    ],

灵感来自echarts记录篇(三 )：使用横向柱状图实现左侧分类对齐右侧显示数据效果及数据过多加滚动条无缩放效果 - 夏小夏吖 - 博客园