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

1 适用场景

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

2 解决方案

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

c 复制代码

// 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)

    },

效果：

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

c 复制代码

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

效果：

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

c 复制代码

   graphic:[
          {
            type: "polygon", // 自定义图形类型为三角形
            left: "9%", // 三角形的中心位置水平方向
            bottom: "7%", // 三角形的中心位置垂直方向
            z: 100, // z 层级
            shape: {
              points: [
                [8, 16],
                [8, 8],
                [0, 12],
              ],
            },
            style: {
              fill: "#CDE2FF", // 填充色
            },
            onclick: (event) => {
              // 在这里可以通过 event 对象访问事件数据
              // 同时，你也可以自定义传递参数
            },
          },
          {
            type: "polygon", // 自定义图形类型为三角形
            right: "4%", //三角形的中心位置水平方向
            bottom: "7%", // 三角形的中心位置垂直方向
            z: 100, // z 层级
            shape: {
              points: [ //分别设置三角形的三个顶点
                [0, 16],
                [0, 8],
                [8, 12],
              ],
            },
            style: {
              fill: "#CDE2FF", // 填充色
            },
            onclick: (event) => {
              // 在这里可以通过 event 对象访问事件数据
              // 同时，你也可以自定义传递参数，

            },
          }
          ]