Echats 之 dataZoom 范围刻度获取

如果你来到这个篇笔记,那么你一定是在使用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?

官方的方法可能我们还没吃懂,所以你懂得… 多谢观赏

你可能感兴趣的:(各类工具的配置以及注意事项)