解决echart重新绘制图表时闪烁的问题

let option;
    if (myChart1 && myChart1.dispose) {
        myChart1.dispose();//销毁图表
    }
    myChart1 = echarts.init(document.getElementById("BoardCPU"));
    
    function randomData(a,b) {
        now = new Date( now oneDay);
        var valueX=[now.getFullYear(), now.getMonth() 1, now.getDate()].join('/') " " [now.getHours(), now.getMinutes(), now.getSeconds()].join(':');
        return {
            value: [
                valueX,
                NewHitory.slice(a,b)
            ]
        }
    }
    var data = [];
    var now = new Date();
    var oneDay = 1*1000;
    for (var i = 0; i < 40; i ) {
        data.push(randomData(-(41-i),-(41-i-1)));
    }
    option = {
        title : {
            text: this.props.boardNowName 'cpu(%利用率)',
        },
        tooltip : {
            trigger:"axis",
            axisPointer: {
              animation: false
            },
            formatter:"{a}<br>{c}"
        },
        toolbox: {
            show : true,
            feature : {
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'time',
                nameLocation:'middle',
                boundaryGap : false,
                axisTick:{
                    show:false
                },
                axisLabel:{
                    show:false
                },
                splitLine: {
                    show: true
                }
            }
        ],
        yAxis : [
            {
                type : 'value',
                min:0,
                max:100,
                splitLine: {
                    show: true
                },
                position:'right'
            }
        ],
        series : [
            {
                name:'cpu使用率',
                type:'line',
                data:data,
                showSymbol: false,
                hoverAnimation: false,
                lineStyle:{
                    normal:{
                        color:'blue'
                    }
                },
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                }
            }
        ],
        animationDuration: 0,//这里两个动画设置可以让图表更顺滑
        animationEasing: 'cubicInOut'//这里两个动画设置可以让图表更顺滑
    };
    if (option && typeof option === "object") {
        myChart1.setOption(option,true);//注意要设置true
    }

这篇好文章是转载于：学新通技术网