echarts中設(shè)置x軸和y軸均隨滾輪進行縮放

dataZoom 組件 用于區(qū)域縮放，從而能自由關(guān)注細節(jié)的數(shù)據(jù)信息，或者概覽數(shù)據(jù)整體，或者去除離群點的影響。

• option: {
      xAxis: [
          {...}, // 第一個 xAxis
          {...}, // 第二個 xAxis
          {...}, // 第三個 xAxis
          {...}  // 第四個 xAxis
      ],
      dataZoom: [
      	{
      		type: 'inside',
      		show: true,
      		// 數(shù)據(jù)窗口范圍的起始百分比。范圍是：0 ~ 100。表示 0% ~ 100%。
      		start: 0,
      		// 數(shù)據(jù)窗口范圍的結(jié)束百分比。范圍是：0 ~ 100。
      		end: 100,
      		zoomOnMouseWheel: 'ctrl',
      		// 第一個 dataZoom 組件
              xAxisIndex: [0, 2] // 表示這個 dataZoom 組件控制 第一個 和 第三個 xAxis
      	},
          
      ]
  }
  

• type: 'inside' ： 內(nèi)置型數(shù)據(jù)區(qū)域縮放組件
• start: 0, ：數(shù)據(jù)窗口范圍的起始百分比。范圍是：0 ~ 100。表示 0% ~ 100%。
• end: 100,數(shù)據(jù)窗口范圍的結(jié)束百分比。范圍是：0 ~ 100。
• zoomOnMouseWheel: 'ctrl' 表示按住 ctrl 和鼠標滾輪能觸發(fā)縮放
  

當數(shù)據(jù)實時渲染時，也可進行區(qū)域縮放

當我們 echarts 圖表中的數(shù)據(jù)是通過websocket或其他方式實時渲染的【多用于折線圖繪制】，那此刻需要對圖表進行區(qū)域縮放時，就會失敗，因為當新的數(shù)據(jù)傳過來，echarts會重新根據(jù)點來實時繪制，從而無法保留上次的縮放結(jié)果

針對以上問題，在與師父研究之后得出如下結(jié)論
將 echartInstance.setOption(newValue,true)改為echartInstance.setOption(newValue)文章來源地址http://www.zghlxwxcb.cn/news/detail-483725.html

• 更改前

<script setup lang="ts">
	let echartInstance;
	// option 是數(shù)據(jù)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 是數(shù)據(jù)data中的option
	watch(option,(newValue)=>{
		echartInstance.setOption(newValue)
	},{deep:true});
	onMounted(()=>{
		echartInsance = echart.init(echartRef.value,'macarons');
		echartInstance.setOption(option.value)
	})
</script>

到了這里，關(guān)于Echarts圖表設(shè)置x軸y軸均隨滾輪滾動縮+放 區(qū)域縮放的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！