惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

酷 壳 – CoolShell
酷 壳 – CoolShell
量子位
V2EX - 技术
V2EX - 技术
K
Kaspersky official blog
Know Your Adversary
Know Your Adversary
Hacker News - Newest:
Hacker News - Newest: "LLM"
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
I
Intezer
H
Heimdal Security Blog
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
S
SegmentFault 最新的问题
阮一峰的网络日志
阮一峰的网络日志
博客园_首页
博客园 - Franky
GbyAI
GbyAI
T
The Blog of Author Tim Ferriss
Recorded Future
Recorded Future
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
Vercel News
Vercel News
Apple Machine Learning Research
Apple Machine Learning Research
The Hacker News
The Hacker News
T
Tenable Blog
Recent Commits to openclaw:main
Recent Commits to openclaw:main
雷峰网
雷峰网
WordPress大学
WordPress大学
Blog — PlanetScale
Blog — PlanetScale
Application and Cybersecurity Blog
Application and Cybersecurity Blog
Webroot Blog
Webroot Blog
L
LangChain Blog
C
Check Point Blog
N
News | PayPal Newsroom
L
LINUX DO - 热门话题
T
Tor Project blog
V
Visual Studio Blog
Microsoft Security Blog
Microsoft Security Blog
S
Security Affairs
Schneier on Security
Schneier on Security
Hacker News: Ask HN
Hacker News: Ask HN
Stack Overflow Blog
Stack Overflow Blog
Y
Y Combinator Blog
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
Security Latest
Security Latest
MyScale Blog
MyScale Blog
Cyberwarzone
Cyberwarzone
N
Netflix TechBlog - Medium
Scott Helme
Scott Helme
PCI Perspectives
PCI Perspectives
The Last Watchdog
The Last Watchdog
人人都是产品经理
人人都是产品经理
W
WeLiveSecurity

博客园 - 雪莉06

antd vue 树形表格 vue2 jeecgBoot keepalive 解决方案 vue中实现页面全屏和指定元素全屏 screenfull全屏组件的基本使用 网页导出EXCEL格式数据,长数字变为科学计数法的解决方法 dedecms织梦自定义表单导出到excel的方法 织梦dede:arclist按最新修改排序orderby=pubdate无效的解决方法 vue-router报错:Uncaught (in promise) NavigationDuplicated {_name: ‘NavigationDuplicated‘, name: ‘Navig nvm的安装和使用(转) elementUI 的 input无法输入bug解决 vue数字翻牌效果 j-modal的 slot="footer" 失效 v-if判断页脚按钮 帝国CMS后台登录空白怎么办?如何修改成https ES6两个数组进行比较 element ui form表单 表格下嵌套动态表格,新增行,删除行 vue 父子组件传值报错:this.$emit is not a function 解决 dede列表页调用二三级导航栏(转载) a-table 鼠标滑过显示小手,当前行可点击(转载) vue里面修改title样式
echarts折线图使用dataZoom,切换数据时渲染异常,出现竖线bug
雪莉06 · 2024-04-24 · via 博客园 - 雪莉06

 今天做项目遇到一个省份过多时,要加滚动条的需求。但是切换数据的时候,出现上图所出现的问题。
经查资料,发现可以设置一个属性来解决这个问题。
      filterMode: 'empty'

dataZoom: {

          show: this.xiaonengXData.length>12?true:false, // 为true 滚动条出现

          realtime: this.xiaonengXData.length>12?true:false, // 实时更新

          type:'slider', // 有type这个属性,滚动条在最下面,也可以不行,写y:36,这表示距离顶端36px,一般就是在图上面。

          height: 20, // 表示滚动条的高度,也就是粗细

          start: this.xiaonengXData.length>12?20:0, // 表示默认展示20%~80%这一段。

          end: this.xiaonengXData.length>12?80:100,

          bottom: 0,

          filterMode: 'empty'

        }

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'

这里将其设置为 empty 就可以避免该问题。