echarts dataZoom 简单自定义样式及监听 datazoom 变化

场景

• echarts 表自带的默认dataZoom样式挺丑的，需要简单的修改一下样式。但是其实对其操刀的局限性很大，遇到比较个性化的滚动条样式的时候，走自定义滚动条，绑定dataZoom属性会比较好。
• 需要监听dataZoom值发生变化来触发页面更新

解决

• 简单自定义
  • 对图表的option的dataZoom属性进行修改

  const option = {
    ···
    dataZoom: [{
      type: 'slider', // slider表示有滑动块的，inside表示内置的
      show: true, // 是否显示dataZoom，在完全自定义的时候需要用到
      xAxisIndex: [0], // dataZoom控制的图标的是哪条x轴，因为会有多轴一图，可以控制多轴
      yAxisIndex: [0,1], // dataZoom控制的图标的是哪条y轴，因为会有多轴一图，可以控制多轴
      start: 10, // 和startValue不要弄混，这里是百分比
      end: 50, // 和endValue不要弄混，这里是百分比
      startValue: 0, // 滑块左端对应的x值
      endValue: 500, // 滑块右端对应的x值
      height: 10, // dataZoom整体高度
      filterMode: 'none', // 过滤模式，有filter, weakFilter, empty, none四个值，过滤会把整个数据段隐藏，而none则只是移动坐标轴
      left: 0,
      right: 0,
      top: 0,
      bottom: 0, // dataZoom相对图标的位置
      animation：true, // 设置动画效果
      throttle: 100, // 设置视图刷新的频率，ms
      showDetail: false,
      showDataShadow: false,
      borderColor: '#0000', // dataZoom边框颜色
      fillerColor: '#ffffff4c', //  滑块颜色
      handleSize: '0%',
      brushSelect: false // 是否允许拖动滑块长度改变视图范围，不允许就是固定范围
    }]
  }
  

• 监听dataZoom

this.chart = echarts.init(this.$refs.test)
this.chart.on('datazoom', () => {
  const datazoom = that.chart.getOption().dataZoom[0] // 用getOption获取改变的值
})