首页 前端知识 echarts折线图监听缩放事件回调

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

2024-03-01 12:03:34 前端知识 前端哥 762 796 我要收藏

前提:

使用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
            })

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3024.html
标签
经验分享
评论
发布的文章

如何定义 jQuery 函数?

2024-03-20 11:03:16

jQuery事件方法

2024-03-20 11:03:06

JQuery前端操作JSON浅谈

2024-03-12 01:03:20

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!