echarts滚动条dataZoom配置

    let dataZoomNum = 10 //定义可视项目个数（dataZoom)
  
    dataZoom: [
        {
          // 设置滚动条的隐藏或显示
          show: true,
          // 设置类型
          type: 'slider',
          // 设置背景颜色
          // backgroundColor: 'rgb(19, 63, 100)',
          // // 设置选中范围的填充颜色
          // fillerColor: 'rgb(16, 171, 198)',
          // // 设置边框颜色
          // borderColor: 'rgb(19, 63, 100)',
          // 是否显示detail，即拖拽时候显示详细数值信息
          showDetail: false,
          // 数据窗口范围的起始数值
          // startValue: 0,
          // 数据窗口范围的结束数值（一页显示多少条数据）
          // endValue: 11 * 2,

          start: 100, //默认为0
          end: 100 - (100 / names.length) * dataZoomNum, //默认为100

          // 控制哪个轴，如果是number表示控制一个轴，
          // 如果是Array表示控制多个轴。此处控制第二根轴
          yAxisIndex: [0, 1],
          // empty：当前数据窗口外的数据，被设置为空。
          // 即不会影响其他轴的数据范围
          filterMode: 'empty',
          // 滚动条高度
          width: 8,
          // 滚动条显示位置
          height: '80%',
          // 距离右边
          right: 0,
          // 控制手柄的尺寸
          handleSize: 0,
          // 是否锁定选择区域（或叫做数据窗口）的大小
          zoomLoxk: true,
          // 组件离容器上侧的距离
          // 如果top的值为'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐
          top: 'middle',
        },
        {
          // 鼠标滚轮在区域内不能控制外部滚动条
          type: 'inside',
          // 控制哪个轴，如果是number表示控制一个轴，
          // 如果是Array表示控制多个轴。此处控制第二根轴
          yAxisIndex: [0, 1],
          // 滚轮是否触发缩放
          zoomOnMouseWheel: false,
          // 鼠标移动能否触发平移
          moveOnMouseMove: true,
          // 鼠标滚轮能否触发平移
          moveOnMouseWheel: true,
          showDetail: false,
        },
      ],