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
      	},
          
      ]
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22

• 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)

• 更改前

<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>
1
2
3
4
5
6
7
8
9
10
11

• 更改后

<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>
1
2
3
4
5
6
7
8
9
10
11