Echarts图表设置x轴y轴均随滚轮滚动缩+放区域缩放-Toy模板网

这篇具有很好参考价值的文章主要介绍了Echarts图表设置x轴y轴均随滚轮滚动缩+放区域缩放。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

echarts中设置x轴和y轴均随滚轮进行缩放

dataZoom 组件用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。

option: {
    xAxis: [
        {...}, // 第一个 xAxis
        {...}, // 第二个 xAxis
        {...}, // 第三个 xAxis
        {...}  // 第四个 xAxis
    ],
    dataZoom: [
    	{
    		type: 'inside',
    		show: true,
    		// 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。
    		start: 0,
    		// 数据窗口范围的结束百分比。范围是：0 ~ 100。
    		end: 100,
    		zoomOnMouseWheel: 'ctrl',
    		// 第一个 dataZoom 组件
            xAxisIndex: [0, 2] // 表示这个 dataZoom 组件控制 第一个 和 第三个 xAxis
    	},
        
    ]
}

type: 'inside' ：内置型数据区域缩放组件
start: 0, ：数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。
end: 100,数据窗口范围的结束百分比。范围是：0 ~ 100。
zoomOnMouseWheel: 'ctrl' 表示按住 ctrl 和鼠标滚轮能触发缩放

当数据实时渲染时，也可进行区域缩放

当我们 echarts 图表中的数据是通过websocket或其他方式实时渲染的【多用于折线图绘制】，那此刻需要对图表进行区域缩放时，就会失败，因为当新的数据传过来，echarts会重新根据点来实时绘制，从而无法保留上次的缩放结果

针对以上问题，在与师父研究之后得出如下结论
将 echartInstance.setOption(newValue,true)改为echartInstance.setOption(newValue)文章来源地址https://www.toymoban.com/news/detail-483725.html

更改前

<script setup lang="ts">
	let echartInstance;
	// option 是数据data中的option
	watch(option,(newValue)=>{
		echartInstance.setOption(newValue,true)
	},{deep:true});
	onMounted(()=>{
		echartInsance = echart.init(echartRef.value,'macarons');
		echartInstance.setOption(option.value,true)
	})
</script>

更改后

<script setup lang="ts">
	let echartInstance;
	// option 是数据data中的option
	watch(option,(newValue)=>{
		echartInstance.setOption(newValue)
	},{deep:true});
	onMounted(()=>{
		echartInsance = echart.init(echartRef.value,'macarons');
		echartInstance.setOption(option.value)
	})
</script>