echarts实现横向和纵向滚动条(使用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: 5,

  // 控制哪个轴,如果是number表示控制一个轴,

  // 如果是Array表示控制多个轴。此处控制第二根轴

  yAxisIndex: [0, 1],

  // empty:当前数据窗口外的数据,被设置为空。

  // 即不会影响其他轴的数据范围

  filterMode: "empty",

  // 滚动条高度

  width: 8,

  // 滚动条显示位置

  height: "80%",

  // 距离右边

  right: 3,

  // 控制手柄的尺寸

  handleSize: 0,

  // 是否锁定选择区域(或叫做数据窗口)的大小

  zoomLoxk: true,

  // 组件离容器上侧的距离

  // 如果top的值为'top', 'middle', 'bottom',组件会根据相应的位置自动对齐

  top: "middle",

  },

  {

  // 没有下面这块的话,只能拖动滚动条,

  // 鼠标滚轮在区域内不能控制外部滚动条

  type: "inside",

  // 控制哪个轴,如果是number表示控制一个轴,

  // 如果是Array表示控制多个轴。此处控制第二根轴

  yAxisIndex: [0, 1],

  // 滚轮是否触发缩放

  zoomOnMouseWheel: false,

  // 鼠标移动能否触发平移

  moveOnMouseMove: true,

  // 鼠标滚轮能否触发平移

  moveOnMouseWheel: true,

  },

  ]