echarts 数据过多时展示滚动条

【echarts官网地址：Documentation - Apache ECharts】

        针对echarts图数据过多的情况，echarts官网有专门的属性dataZoom：用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。

下面是我练习时写的例子：

dataZoom: [
  {
    // 设置滚动条的隐藏与显示
    show: this.xAxisData.length > 8 ? true : false,
    // 设置滚动条类型
    type: "slider",
    // 设置背景颜色
    backgroundColor: "#fff",
    // 设置选中范围的填充颜色
    fillerColor: "#027FFF",
    // 设置边框颜色
    borderColor: "#027FFF",
    // 是否显示detail，即拖拽时候显示详细数值信息
    showDetail: false,
    // 数据窗口范围的起始数值
    // startValue: 4,
    // 数据窗口范围的结束数值（一页显示多少条数据，从0开始）
    endValue: 7,
    // empty：当前数据窗口外的数据，被设置为空。
    // 即不会影响其他轴的数据范围
    filterMode: "empty",
    // 设置滚动条宽度，相对于盒子宽度
    // width: "50%",
    // 设置滚动条高度
    height: this.handleWidth(4),
    bottom: 4,
    // 设置滚动条显示位置
    // left: 20,
    // right: 10, //右边的距离
    // 是否锁定选择区域（或叫做数据窗口）的大小
    zoomLoxk: true,
    // 控制手柄的尺寸
    // handleSize: 0,
    // dataZoom-slider组件离容器下侧的距离
    xAxisIndex: [0],
    // start: 50,
    // end: 50,
    // zoomLock: true, //锁定区域禁止缩放(鼠标滚动会缩放,所以禁止)
    brushSelect: false, //刷选功能
    borderRadius: 3,
    showDataShadow: false, //是否显示数据阴影 默认auto
    // filterMode: "filter",
  },
  {
    // 没有下面这块的话，只能拖动滚动条，
    // 鼠标滚轮在区域内不能控制外部滚动条
    type: "inside",
    // 滚轮是否触发缩放
    zoomOnMouseWheel: false,
    // 鼠标滚轮触发滚动
    moveOnMouseMove: true,
    moveOnMouseWheel: true,
  },
]

没有用到所有的属性，其他的可以在官网中进行查阅~

示例图：

（滚动条展示隐藏区域可适用于折线图、柱状图等）