echarts折线图监听缩放事件回调

前提：

使用echarts绘制一周每小时数据的曲线，并要求可以滚轮缩放、左右拖拽，未放大时横坐标显示倾斜字体，放大到一定程度要显示不倾斜字体。

效果：

未放大时是倾斜样式的文字

放大后是不倾斜的文字

解决：

问题出在datazoom的监听上，正常来说，echarts监听datazoom是这样的：

let LongTermEcharts = document.getElementsByClassName('LongTermEcharts')
 
let myChart = this.echarts.init(LongTermEcharts)
 
myChart.on('dataZoom', function (params) {
   // 逻辑代码
})复制

但是虽然echarts给了datazoom的params，但是没有提供缩放系数（？）这我不是很懂，仔细寻找一番，发现真的没有给系数，查询了一下别人是怎么解决的，但是并没有找到。

经过一番痛苦的思考，于是准备通过缩放的end-start来判断：

            let start = params.batch[0].start
            let end = params.batch[0].end
            let diff = end - start
            // diff小于40，算作‘缩放到一定程度’
            if (diff < 40) {
              let option = myChart.getOption()
              option.xAxis[0].axisLabel.rotate = 0 // 当缩放程度小于40的时候让字体倾斜为0
              myChart.clear()
              myChart.setOption(option, true)
            }
            if (diff >= 40) {
              let option = myChart.getOption()
              option.xAxis[0].axisLabel.rotate = 50  // 当缩放程度大于40的时候让字体开始倾斜
              myChart.clear()
              myChart.setOption(option, true)
            }复制

注意： 这点代码实现后是没有左右拖拽的效果的，如果想要拖拽效果，把myChart.clear() 这行代码删掉即可

原因就是在echarts中有个设计就是拖拽曲线也会触发datazoom回调！导致不停地setOption，自然也就没空处理拖动了

拖拽和放大的params的区别：start和end的改变区间很小，基本能维持在0-1之间，也就是说，只要记录上次的diff，与这次的diff，再计算差值的绝对值，如果>1，就可以算作是缩放触发

            let lastdiff = 0
            myChart.on('datazoom', function (params) {
              let start = params.batch[0].start
              let end = params.batch[0].end
              let diff = end - start
              // mircodiff > 1，说明是放大而不是拖拽
              let mircodiff = Math.abs(diff - lastdiff)
              if (diff < 50 && mircodiff > 1) {
                // 放大之后的操作
              }
              if (diff >= 50 && mircodiff > 1) {
                // 缩小回去的操作
              }
              lastdiff = diff
            })复制