【已解决】关于echarts的splitArea分割区域背景闪烁问题
(x轴)使用时间类型(type: "time"),并且x轴使用splitArea划分后使用color属性设定分割区域颜色。
同时使用dataZoom设置区域缩放,在局部数据进行移动的过程中,边缘的分割区域背景出现闪烁情况(如下图所示)。

实例代码如下:
option = {
backgroundColor: '#11183c',
dataZoom:{
type:'slider',
start:0,
end:20,
filterMode:'none'
},
xAxis: [{
type: 'time',
boundaryGap: false,
//splitNumber:15,
axisLabel: {
color: '#30eee9'
},
axisLine: {
show: true,
lineStyle: {
color: '#397cbc'
}
},
splitArea:{
show:true,
areaStyle:{
color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']
}
},
splitLine:{
show:false
}
}],
yAxis: [{
type: 'value',
name: '',
axisLabel: {
formatter: '{value}',
textStyle: {
color: '#2ad1d2'
}
},
axisLine: {
lineStyle: {
color: '#27b4c2'
}
},
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: '#11366e'
}
}
},
],
series: [{
type: 'line',
stack: '总量',
symbol: 'circle',
symbolSize: 8,
itemStyle: {
normal: {
color: '#0092f6',
lineStyle: {
color: "#0092f6",
width: 1
},
}
},
markPoint: {
itemStyle: {
normal: {
color: 'red'
}
}
},
data: [
['2021-10-1 8:00:00',120],
['2021-10-1 8:01:00',110],
['2021-10-1 8:02:00',90],
['2021-10-1 8:03:00',130],
['2021-10-1 8:04:00',50],
['2021-10-1 8:06:00',70],
['2021-10-1 8:07:00',85],
['2021-10-1 8:08:00',65],
['2021-10-1 8:09:00',53],
['2021-10-1 8:10:00',90],
['2021-10-1 8:11:00',100],
['2021-10-1 8:12:00',86],
['2021-10-1 8:13:00',90],
['2021-10-1 8:14:00',110],
['2021-10-1 8:15:00',105],
]
}
]
};
解决方案:不使用splitArea属性设置分割区域,可以采用series中的markArea进行分割区域的设置。
存在不足:使用markArea进行分割区域设置,会产生大量的数据,极大地增加了内存的占用率。有哪位大佬有更好的建议请给我留个言,感谢。
【已解决】关于echarts的splitArea分割区域背景闪烁问题的更多相关文章
- Microsoft.Office.Interop.Excel, Version=12.0.0.0版本高于引用的程序集(已解决)
Microsoft.Office.Interop.Excel, Version=12.0.0.0版本高于引用的程序集(已解决) 论坛里的帮助:http://bbs.csdn.net/topics/39 ...
- 使用Notepad++编码编译时报错(已解决?)
使用Notepad++编码编译时报错(已解决?) 使用Notepad++编码,编译的时候经常会报错,说什么GBK编码啥啥啥~~~但同样的编码用ECLIPSE就没有问题.再有,用记事本把他保存成ANSI ...
- 已解决】Sublime中运行带input或raw_input的Python代码出错:EOFError: EOF when reading a line(转)
[问题] 在折腾: [已解决]Sublime Text 2中运行Python程序出错:The system cannot find the file specified 的过程中,虽然解决了找不到py ...
- 【已解决】Android ADT中增大AVD内存后无法启动:emulator failed to allocate memory 8
[问题] 折腾: [已解决]Android ADT中增大AVD内存后无法启动:emulator failed to allocate memory 8 过程中,增大对应AVD的内存为2G后,结果无法启 ...
- 【已解决】BeautifulSoup已经获得了Unicode的Soup但是print出来却是乱码
[问题] 某人遇到的问题: 关于BeautifulSoup抓取表格及SAE数据库导入的问题(跪求大神帮忙) 简单说就是: 用如下代码: ? 1 2 3 4 5 6 7 import re,urllib ...
- Access中出现改变字段“自己主动编号”类型,不能再改回来!(已解决)
Access中出现改变字段"自己主动编号"类型,不能再改回来! (已解决) 一次把access中的自增字段改成了数值,再改回自增时,提示:在表中输入了数据之后,则不能将不论什么字段 ...
- sqlserver,执行生成脚本时“引发类型为“System.OutOfMemoryException”的异常”(已解决)
sqlserver,执行生成脚本时“引发类型为“System.OutOfMemoryException”的异常”(已解决) 出现此错误主要是因为.sql的脚本文件过大(一般都超过100M)造成内存无法 ...
- LOL是什么意思? - 已解决 - 搜狗问问
LOL是什么意思? - 已解决 - 搜狗问问 N A T S U . |分类:QQ工具栏 2009-05-04 LOL是什么意思? 满意答案 Shim Nyong 19级 2009-05-04 LOL ...
- 【已解决】谁动了我的CurrentPrincipal?求助我在给Artech的wcf petshop增加授权机制的时候遇到的问题。
这个问题已解决,是绑定设置的问题,主要还是因为我自己没有深入理解WCF绑定的安全机制.在这篇博客里面我来说说怎么解决的. 下载了Artech的wcf petshop源码(博文链接)并调试运行成功后,打 ...
随机推荐
- Maven 依赖调解源码解析(六):dependencyManagement 版本锁定
本文是系列文章<Maven 源码解析:依赖调解是如何实现的?>第六篇,主要介绍 dependencyManagement 版本锁定原则.请按顺序阅读其他系列文章,系列文章总目录参见:htt ...
- [luogu4607]反回文串
参考ARC064F 令$h(n)=\begin{cases}n(n为奇数)\\\frac{n}{2}(n为偶数)\end{cases}$,$f(n)$定义与ARC064F相同,答案即$\sum_{d| ...
- [atARC110E]Shorten ABC
考虑令$a$.$b$和$c$分别对应1.2和3,那么每一次相当于令$x$和$y$变为$x\oplus y$(要求$x\ne y$) 根据异或的结合律,我们相当于将其划分为若干个区间求异或值 (另外还有 ...
- excel的表格数据插入到数据库
看到有excel保存insert的数据,自己照着教程弄了一下,可以的. 表格数据 接下来我们在d3的位置输入 =CONCATENATE("insert into user(code, nam ...
- Flink 实践教程-入门(8): 简单 ETL 作业
作者:腾讯云流计算 Oceanus 团队 流计算 Oceanus 简介 流计算 Oceanus 是大数据产品生态体系的实时化分析利器,是基于 Apache Flink 构建的具备一站开发.无缝连接.亚 ...
- 妹子始终没搞懂OAuth2.0,今天整合Spring Cloud Security 一次说明白!
大家好,我是不才陈某~ 周二发了Spring Security 系列第一篇文章,有妹子留言说看了很多文章,始终没明白OAuth2.0,这次陈某花了两天时间,整理了OAuth2.0相关的知识,结合认证授 ...
- CF1264D1 Beautiful Bracket Sequence (easy version)
考虑在一个确定的括号序列中,我们可以枚举中间位置,按左右最长延伸出去的答案计算. 我们很自然的思考,我们直接维护左右两边,在删除一些字符后能够延伸的最长长度. 我们设\(f_{i,j}\)为\(i\) ...
- Codeforces 585E - Present for Vitalik the Philatelist(简单莫反+狄利克雷前缀和)
Codeforces 题目传送门 & 洛谷题目传送门 一道不算太难的 D1E 罢--虽然我不会做/kk u1s1 似乎这场 Div1 挺水的?F 就是个 AC 自动机板子还被评到了 3k2-- ...
- 如何使用scp在Linux服务器的后台传输文件?
目录 一.上传 常规操作 建议 后台运行 二.下载 两台服务器间文件如何传输?对于小文件,可以先从Linux服务器传到window,再传到另一台服务器.对于大的文件,如测序数据.比对文件等.这样的方法 ...
- TVB斜率限制器
TVB斜率限制器 本文参考源程序来自Fluidity. 简介 TVB斜率限制器最早由Cockburn和Shu(1989)提出,主要特点是提出了修正minmod函数 \[\tilde{m}(a_1, a ...