如果你来到这个篇笔记,那么你一定是在使用echarts的 所以
我们简单点,直接上标题的问题,如何获取datazoom刻度而不是百分比
echarts 内部有一个API,为`getOption`
这个方法能获取到echarts当前的option
那么如何获取刻度呢,
// 首先
var myChart = echarts.init(el)
let self.data.year = [1998,1999,1954,1968]
// 监听datazoom事件,只要变化我们就要去获取
mychart.on('datazoom', function (params) {
` 获取到 datazoom的起始和结束值 这个值为y轴数据的 index 索引值`
let endValue = myChart.getOption().dataZoom[1].endValue
let startValue = myChart.getOption().dataZoom[1].startValue
`然后利用索引去查数据值
假设结束值为 0
开始为 1
`
console.log(self.data.year[endValue],self.data.year[startValue]);
//console.log 1998,1999
});
这样我们就获取到了刻度值,而不是通过官方给的事件 datazoom 参数param 包含的百分比
myChart.on('datazoom', function (params) {
console.log(params)
});
官方给的参数params:{
type: 'datazoom',
// 缩放的开始位置的百分比,0 - 100
start: number
// 缩放的结束位置的百分比,0 - 100
end: number
// 缩放的开始位置的数值,只有在工具栏的缩放行为的事件中存在。
startValue?: number
// 缩放的结束位置的数值,只有在工具栏的缩放行为的事件中存在。
endValue?: number
}
而一般实际操作中我们得到的是这样的params: {
dataZoomId: "series00"
end: 99.8761592533951
from: "viewComponent_80_0.86704"
start: 48
type: "datazoom"
}
可以看到,只有百分比,而没有我们要的 startValue?
,endValue?
官方的方法可能我们还没吃懂,所以你懂得… 多谢观赏