解决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
    }

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
屏幕闪烁问题通常是由于页面重绘引起的。在 Java 中,可以采用双缓冲技术来解决这个问题。具体来说,可以通过以下步骤实现: 1. 创建一个缓冲区,用于绘制页面; 2. 在缓冲区中绘制页面; 3. 将缓冲区中的内容复制到屏幕上,完成页面的显示。 这样做可以避免页面重绘闪烁问题。 具体实现可以参考以下代码: ```java import java.awt.*; import javax.swing.*; public class DoubleBuffer extends JPanel { private Image dbImage; private Graphics dbg; public void paint(Graphics g) { // 创建双缓冲 if (dbImage == null) { dbImage = createImage(getSize().width, getSize().height); dbg = dbImage.getGraphics(); } // 在缓冲区中绘制页面 dbg.setColor(getBackground()); dbg.fillRect(0, 0, getSize().width, getSize().height); dbg.setColor(getForeground()); paintComponent(dbg); paintChildren(dbg); // 将缓冲区中的内容复制到屏幕上 g.drawImage(dbImage, 0, 0, this); } // 绘制页面的具体实现 protected void paintComponent(Graphics g) { // ... } // 测试 public static void main(String[] args) { JFrame frame = new JFrame("Double Buffer"); DoubleBuffer db = new DoubleBuffer(); frame.add(db); frame.setSize(400, 300); frame.setVisible(true); } } ``` 在上述代码中,`paint` 方法用于创建双缓冲,绘制页面和复制缓冲区中的内容到屏幕上;`paintComponent` 方法用于绘制页面的具体实现,可以根据需要进行修改;`main` 方法用于测试。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值