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

推荐订阅源

B
Blog RSS Feed
K
Kaspersky official blog
Forbes - Security
Forbes - Security
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
P
Proofpoint News Feed
G
GRAHAM CLULEY
V
Vulnerabilities – Threatpost
Security Latest
Security Latest
Scott Helme
Scott Helme
S
Securelist
美团技术团队
T
Threat Research - Cisco Blogs
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
S
SegmentFault 最新的问题
W
WeLiveSecurity
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
Apple Machine Learning Research
Apple Machine Learning Research
The Cloudflare Blog
AI
AI
L
Lohrmann on Cybersecurity
S
Security Affairs
Cloudbric
Cloudbric
SecWiki News
SecWiki News
爱范儿
爱范儿
雷峰网
雷峰网
Engineering at Meta
Engineering at Meta
C
Cyber Attacks, Cyber Crime and Cyber Security
大猫的无限游戏
大猫的无限游戏
N
News and Events Feed by Topic
I
InfoQ
S
Secure Thoughts
AWS News Blog
AWS News Blog
A
About on SuperTechFans
Schneier on Security
Schneier on Security
酷 壳 – CoolShell
酷 壳 – CoolShell
The Last Watchdog
The Last Watchdog
D
Darknet – Hacking Tools, Hacker News & Cyber Security
C
Check Point Blog
P
Palo Alto Networks Blog
博客园 - 【当耐特】
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
Google DeepMind News
Google DeepMind News
Latest news
Latest news
I
Intezer
博客园_首页
C
CXSECURITY Database RSS Feed - CXSecurity.com
V
V2EX
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
L
LangChain Blog
D
Docker

博客园 - 雪莉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 就可以避免该问题。