echarts设置滚动条或鼠标拖动滚动

1 适用场景

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

2 解决方案

方法一 ：页面直接显示滚动条, 让用户可以拖动展示 - 柱状图为例

 div style="width: 500px; height:500px;" id="echartCon" ref="echartCon">/div>

 initChart() {
      let option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        dataZoom:[
          {
            type: "slider", 
            show: true, 
            start: 0, 
            end: 3, 
            bottom: 25, 
            
            xAxisIndex: [0]
          }
        ],
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar'
          }
        ]
      };
      let myChart = this.$echarts.init(this.$refs.echartCon);
      myChart.setOption(option)

    },

效果：

方法二 ：页面不展示滚动条, 直接操作鼠标即可拖动数据展示

 
  dataZoom:[
          {
            type: "inside", 
            startValue: 0, 
            endValue: 3, 
            filterMode: 'filter',
            
            xAxisIndex: [0]
          }
        ],

效果：

如果想自定义切换按钮可以在 graphic 中添加样式

   graphic:[
          {
            type: "polygon", 
            left: "9%", 
            bottom: "7%", 
            z: 100, 
            shape: {
              points: [
                [8, 16],
                [8, 8],
                [0, 12],
              ],
            },
            style: {
              fill: "#CDE2FF", 
            },
            onclick: (event) => {
              
              
            },
          },
          {
            type: "polygon", 
            right: "4%", 
            bottom: "7%", 
            z: 100, 
            shape: {
              points: [ 
                [0, 16],
                [0, 8],
                [8, 12],
              ],
            },
            style: {
              fill: "#CDE2FF", 
            },
            onclick: (event) => {
              
              

            },
          }
          ]