【已解决】关于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源码(博文链接)并调试运行成功后,打 ... 
随机推荐
- [hdu6145]Arithmetic of Bomb II
			对于题中的"normal expression"(仅含加减乘和无前导0的非负整数,无括号)的计算,实际上并不需要通常的表达式求值,而可以用下述方式计算-- 维护三元组$(a,b,c ... 
- [bzoj1927]星际竞速
			考虑没有爆发,那么相当于是带权最小不可交路径覆盖,由于只能从编号小的到编号大的,因此一定是DAG,而DAG的最小路径覆盖可以拆点并跑最大流,那么带权的只需要跑费用流即可(S向i连(1,0)的边,i'向 ... 
- 基于 Docker 安装 RocketMQ
			docker-compose.yml version: '3.5' services: rmqnamesrv: image: foxiswho/rocketmq:server container_na ... 
- 下载安装wps后去除监控
			下载wps之后发现wps一直对我的电脑进行监控,占用着我的cpu和内存,我要把它清理出去.... 控制面板→管理工具→任务计划程序→任务计划程序库,有两个wps的任务计划,可以根据属性看到文件地址 C ... 
- 多线程07.thread-join
			package com.wangwenjun.concurrency.chapter5; public class ThreadJoin3 { public static void main(Stri ... 
- dart系列之:时间你慢点走,我要在dart中抓住你
			目录 简介 DateTime Duration 总结 简介 时间和日期是我们经常会在程序中使用到的对象.但是对时间和日期的处理因为有不同时区的原因,所以一直以来都不是很好用.就像在java中,为时间和 ... 
- 学习java的第六天
			一.今日收获 1.开始了学习手册第二章的学习 2.了解了java里的常量与变量以及数据类型,与c语言的内容类似 二.今日难题 1.都是基础知识,没有什么难题 三.明日目标 1.继续学习java学习手册 ... 
- 利用python代码获取文件特定的内容,并保存为文档
			说明:有段时间需要读取上百个文件的单点能(sp),就写了下面的代码(计算化学狗努力转行中^-^) import os.path import re # 1 遍历指定目录,显示目录下的所有文件名 def ... 
- 商业爬虫学习笔记day3
			一. 付费代理发送请求的两种方式 第一种方式: (1)代理ip,形式如下: money_proxy = {"http":"username:pwd@192.168.12. ... 
- ABA 问题
			CAS 导致 ABA 问题CAS 算法实现了一个重要的前提,需要取出内存中某时刻的数据,并在当下时刻比较并替换,那么这个时间差会导致数据的变化. 比如说一个线程 one 从内存位置 V 中取出A,这时 ... 
