echarts - 设置滚动条&鼠标拖动滚动

1 适用场景

页面空间有限,数据无法完全展示,或者展示内容又被隐藏,或者间隔展示时,可以通过添加dataZoom配置 来优化页面体验

2 解决方案

2.1. 页面直接显示滚动条, 让用户可以拖动展示-柱状图为例

// html部分
 <div style="width: 500px; height:500px;" id="echartCon" ref="echartCon"></div>
// js部分
 initChart() {
      let option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        dataZoom:[
          {
            type: "slider", // 在底部
            show: true, // 是否显示 组件。如果设置为 false，不会显示，但是数据过滤的功能还存在。
            start: 0, // 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。
            end: 3, // 数据窗口范围的结束百分比。范围是：0 ~ 100。
            bottom: 25, // 控制滚动条距离底部的位置;
            /**
            不指定时，当 dataZoom-slider.orient 为 'horizontal'时，
            默认控制和 dataZoom 平行的第一个 xAxis。但是不建议使用默认值，建议显式指定。
            如果是 number 表示控制一个轴，如果是 Array 表示控制多个轴。
            */
            xAxisIndex: [0]
          }
        ],
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar'
          }
        ]
      };
      let myChart = this.$echarts.init(this.$refs.echartCon);
      myChart.setOption(option)

    },

显示滚动条.png

2.2 页面不展示滚动条, 直接操作鼠标即可拖动数据展示(个人倾向第二种)

 // 两种方式只有dataZoom配置项有区别
  dataZoom:[
          {
            type: "inside", // 内嵌入图标中
            startValue: 0, // 用绝对值的方式定义了窗口数据默认展示的数据开始范围
            endValue: 3, // 用绝对值的方式定义了窗口数据默认展示的数据终止范围
            filterMode: 'filter',
            /**
            不指定时，当 dataZoom-slider.orient 为 'horizontal'时，
            默认控制和 dataZoom 平行的第一个 xAxis。但是不建议使用默认值，建议显式指定。
            如果是 number 表示控制一个轴，如果是 Array 表示控制多个轴。
            */
            xAxisIndex: [0]
          }
        ],

内嵌滚动条.png

参考

echarts- dataZoom 配置项