博客

项目需求中经常会遇到请求数据量很大并且需要通过图表来展示的问题，这时候便需要在柱状图、折线图组件上增加横向滚动条，方便用户查看数据。

上图：

其实很简单，只需要在图表组件中增加dataZoom属性，便可以增加滚动条，配置如下：

dataZoom=[  
       {
          type: 'slider', //滑动条型数据区域缩放组件
          realtime: true, //拖动时，是否实时更新系列的视图。如果设置为 false，则只在拖拽结束的时候更新。
          // start: 0, //数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。
          // end: 10,  // 数据窗口范围的结束百分比。范围是：0 ~ 100
          height: 4,
          endValue: 11,  //数据窗口范围的结束数值。如果设置了 dataZoom-inside.end 则 endValue 失效
          fillerColor: "rgba(17, 100, 210, 0.4)", // 滚动条颜色
          borderColor: "rgba(17, 100, 210, 0.1)",
          handleSize:0, // 两边手柄尺寸
          showDetail: false, // 拖拽时是否展示滚动条两侧的文字
          top:'96%', //组件离容器上侧的距离
          zoomLock:true, // 是否只平移不缩放
          // moveOnMouseMove:true, //开启鼠标移动窗口平移
          // zoomOnMouseWheel :true, //开启鼠标滚轮缩放
       },
       {
          type: "inside",  //内置型数据区域缩放组件
          // start: 0,
          // end: 10,
          endValue: 11,  // 最多12个
          zoomOnMouseWheel: false,  // 关闭鼠标滚轮缩放
          moveOnMouseWheel: true, // 开启鼠标滚轮窗口平移
          moveOnMouseMove: true  // 开启鼠标移动窗口平移
        }
    ]

赋值给组件dataZoom属性即可。

        option = {        
          tooltip: {
            trigger: 'axis'
          },
          calculable: true,
          xAxis: [
            {
              type: 'category',
              data: xAxisData
            }
          ],
          dataZoom:dataZoom,
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: series
        };

​