标签：10 00 show color 闪烁 2021 splitArea type echarts

        （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进行分割区域设置，会产生大量的数据，极大地增加了内存的占用率。有哪位大佬有更好的建议请给我留个言，感谢。

标签：10,00,show,color,闪烁,2021,splitArea,type,echarts
来源： https://www.cnblogs.com/pengpi/p/15691466.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。