echarts dataZoom 基本用法，给 yAxis 增加滚动条

现有一个 echarts 图表，需要在 y 轴方向上设置一个滚动条，可以滚动数据，x 轴显现的数据固定不动不能跟随滚动条滚动，所以不能直接使用外层盒子的 overflow: auto。可以使用 echarts 的 dataZoom 组件来实现

  dataZoom: [
    {
      type: 'slider',
      show: true,
      // 设置组件控制的y轴
      yAxisIndex: 0,
      right: 40,    
      top: 60,
      // 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%
      // 也可以用 startValue设置起始值
      start: 29,
      end: 36,
      width: 12,
      height: 450,
      // 组件的背景颜色
      backgroundColor: 'rgba(0, 0, 0, 0.4)',
      // 选中范围的填充颜色
      fillerColor: '#00FFFF',
      // 边框颜色
      borderColor: '#0094E9',
      // 是否显示detail，即拖拽时候显示详细数值信息
      showDetail: false,
      // 控制手柄的尺寸
      handleSize: 16,
      // 是否在 dataZoom-silder 组件中显示数据阴影。数据阴影可以简单地反应数据走势。
      showDataShadow: false,
    },
    {
      type: 'inside',
      yAxisIndex: [0],
      start: 29,
      end: 36,
      // 不按任何功能键，鼠标滚轮能触发缩放
      zoomOnMouseWheel: false,
      // 不按任何功能键，鼠标移动能触发数据窗口平移
      moveOnMouseWheel: true
    }
  ],

样式：