Echarts图表设置x轴y轴均随滚轮滚动缩+放区域缩放

文章目录

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)

更改前

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

Echarts图表设置x轴y轴均随滚轮滚动缩+放区域缩放相关推荐

Echarts 图表一些细节设置 lenged 双Y轴等
echarts 示例 Echarts图表效果图(Make A Pie替代) Make A Pie 是由社区贡献者维护的用于 Apache ECharts 作品分享的第三方非官方社区.平时做Echart ...
ECharts图表设置x轴和y轴显示数值
ECharts图表设置x轴和y轴显示数值未设置的效果: 想要达到的效果: 重要代码: xAxis.axisLabel.interval = 5; // 设置x轴间隔5个显示 // 设置y轴显示的最大 ...
echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向
echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向 option1: {color: ['#21E9F6', '#F2CE2E', '#EE2929', '#006DD9', '#1789FF ...
Vue 中echarts的数据参数使用、X轴Y轴
Echarts 柱状图配置详解 - 龙恩0707 - 博客园 ECharts图表设置x轴和y轴显示数值_King汀的博客-CSDN博客_echarts设置y轴数值 echarts柱状图渐变色_kyl ...
echarts的xAxis和yAxis——x轴y轴以及网格线的详细配置
先详细看一下xAxis和yAxis配置的图表效果下图详细的标注了图表中x轴y轴可见的内容说明一下: x轴y轴在echarts配置项里,从内容上来说大体上没有太大区别,x轴能用的配置项y轴基本也可以 ...
Echarts去除x轴,y轴网格线,网格区域(背景)
每次写到Echarts时,总会忘记去除x轴,y轴网格线,网格区域(背景)是怎么设置的了,在这里记录一下,有个印象 xAxis : [{type : 'value',splitNumber: 2,sca ...
echarts 柱状图隐藏x、y轴坐标轴、刻度线、隐藏x、y轴坐标轴的数值
echarts 柱状图隐藏x.y轴的内容,隐藏x,y轴坐标轴.刻度线.隐藏x.y轴坐标轴的数值 1.隐藏x轴坐标轴,在xAxis下使用axisLine属性为false,相反显示则是true axisL ...
matplotlib 笔记：设置x轴 y轴文字
原本的图: import numpy as np import matplotlib.pyplot as plt lst=range(10000) a=np.random.choice(lst,150 ...
三菱FX5U，机床X轴Y轴工作台定位控制程序全部使用两轴直线插补有自动定位，手动定位！手动控制有，点动一次按钮每次走设置的距离
三菱FX5U,机床X轴Y轴工作台定位控制程序!使用三菱J4-A系列伺服驱动器绝对位置系统,程序大小27000多步 1.本程序最多可做20个定位工序,全部使用两轴直线插补! 2.有自动定位,手动定位!手 ...

Echarts图表设置x轴y轴均随滚轮滚动缩+放区域缩放

文章目录

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

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

Echarts图表设置x轴y轴均随滚轮滚动缩+放区域缩放相关推荐

最新文章

热门文章

Echarts图表设置x轴y轴均随滚轮滚动缩+放 区域缩放

文章目录

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

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

Echarts图表设置x轴y轴均随滚轮滚动缩+放 区域缩放相关推荐

最新文章

热门文章

Echarts图表设置x轴y轴均随滚轮滚动缩+放区域缩放

Echarts图表设置x轴y轴均随滚轮滚动缩+放区域缩放相关推荐