echarts通过dataZoom,实现x轴和y轴放大缩小,并获取缩放后的数据
echarts通过dataZoom,实现x轴和y轴放大缩小,并获取缩放后的数据
const echartZoom = () => {
nextTick(() => {
myEcharts = echarts.init(echartsKeyId.value);
myEcharts.off("dataZoom");
myEcharts.on("dataZoom", (params) => {
let zoomData = params.batch[0];
if (typeof zoomData.start != "undefined") {
//滚轮, 滑动条
//这里的缩放百分比是 没有 除以100的,所以需要乘以 0.01
startIndex.value = parseInt(
state.option.series[0].data.length * zoomData.start * 0.01
);
seleteList.selectStartTime =
state.option.series[0].data[startIndex.value];
endIndex.value = parseInt(
state.option.series[0].data.length * zoomData.end * 0.01
);
seleteList.selectEndTime =
state.option.series[0].data[endIndex.value];
//这里需要注意,缩放过程中会出现计算出来的索引大于数据长度的问题,所以这里判断一下
endIndex.value =
endIndex.value > state.option.series[0].data.length - 1
? state.option.series[0].data.length - 1
: endIndex.value;
//这算出来的索引就可以直接用于图表数据的数组中进行取值了
emit("echartDrag", seleteList);
} else {
//拖放
startValue.value = parseInt(zoomData.startValue);
endValue.value = parseInt(zoomData.endValue);
}
});
myEcharts.setOption(state.option);
});
};