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