Echarts 项目中使用折线图 type: line
,在设置了 dataZoom
区域缩放时,会出现以下问题。
如上图所示,折现出现了竖线,不能点对点连接,最右边一个还有一节多余的线。
这或许是 Echarts 的一个 bug,不过可以通过修改 dataZoom
组件的 filterMode
属性来防止问题的出现。
option = {
dataZoom: [
{
id: 'dataZoomY',
type: 'slider',
yAxisIndex: [0],
filterMode: 'empty'
}
],
...
}
dataZoom
的运行原理是通过 数据过滤
以及在内部设置轴的显示窗口来达到 数据窗口缩放
的效果。
数据过滤模式(dataZoom.filterMode)的设置不同,效果也不同。
可选值为:
filter
当前数据窗口外的数据,被 过滤掉。即 会 影响其他轴的数据范围。每个数据项,只要有一个维度在数据窗口外,整个数据项就会被过滤掉。
weakFilter
当前数据窗口外的数据,被 过滤掉。即 会 影响其他轴的数据范围。每个数据项,只有当全部维度都在数据窗口同侧外部,整个数据项才会被过滤掉。
empty
当前数据窗口外的数据,被设置为空。即 不会 影响其他轴的数据范围。
none
不过滤数据,只改变数轴范围。
如何设置,由用户根据场景和需求自己决定。经验来说:
dataZoom
组件控制』时,常使用 filterMode: 'filter'
,这样能使另一个轴自适应过滤后的数值范围。dataZoom
组件控制』时:fiterMode: 'empty'
。dataZoomX
改变 X 轴过滤柱子时,Y 轴的范围也自适应剩余柱子的高度』,『拖动 dataZoomY
改变 Y 轴过滤柱子时,X 轴范围不受影响』,那么就 X轴设为 fiterMode: 'filter'
,Y 轴设为 fiterMode: 'empty'
,即主轴 'filter'
,辅轴 'empty'
。这里将其设置为 empty 就可以避免该问题。
未经允许不得转载:w3h5 » ECharts折线图使用dataZoom出现竖线BUG解决