使用echarts,当数据改变时,重绘echarts的图表,折线图的图形会出现变形。

在使用Echarts时,数据变化可能导致折线图变形。数据Zoom的filterMode属性对此有影响,其可选值包括'filter'、'weakFilter'、'empty'和'none'。当X轴或Y轴单独受dataZoom控制时,通常使用'filter';而在双轴图表中,可能需要设置主轴为'filter',辅轴为'empty'以保持图表稳定性。解决此问题的一种方法是在dataZoom配置中设置filterMode为'empty'。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

问题描述

使用echarts,当数据改变时,重绘echarts的图表,折线图的图形会出现变形。

原理描述

dataZoom 的运行原理是通过 数据过滤 以及在内部设置轴的显示窗口来达到 数据窗口缩放 的效果。

数据过滤模式(dataZoom.filterMode)的设置不同,效果也不同。

可选值为:

‘filter’:当前数据窗口外的数据,被 过滤掉。即 会 影响其他轴的数据范围。每个数据项,只要有一个维度在数据窗口外,整个数据项就会被过滤掉。

‘weakFilter’:当前数据窗口外的数据,被 过滤掉。即 会 影响其他轴的数据范围。每个数据项,只有当全部维度都在数据窗口同侧外部,整个数据项才会被过滤掉。

‘empty’:当前数据窗口外的数据,被 设置为空。即 不会 影响其他轴的数据范围。

‘none’: 不过滤数据,只改变数轴范围。

如何设置,由用户根据场景和需求自己决定。经验来说:

当『只有 X 轴 或 只有 Y 轴受 dataZoom 组件控制』时,常使用 filterMode: ‘filter’,这样能使另一个轴自适应过滤后的数值范围。

当『X 轴 Y 轴分别受 dataZoom 组件控制』时:

如果 X 轴和 Y 轴是『同等地位的、不应互相影响的』,比如在『双数值轴散点图』中,那么两个轴可都设为 fiterMode: ‘empty’。

如果 X 轴为主,Y 轴为辅,比如在『柱状图』中,需要『拖动 dataZoomX 改变 X 轴过滤柱子时,Y 轴的范围也自适应剩余柱子的高度』,『拖动 dataZoomY 改变 Y 轴过滤柱子时,X 轴范围不受影响』,那么就 X轴设为 fiterMode: ‘filter’,Y 轴设为 fiterMode: ‘empty’,即主轴 ‘filter’,辅轴 ‘empty’。

解决方案:

在dataZoom的设置属性 filterMode: ‘empty’,

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值