echarts [Bug] When using appenddata to update data, and the data volume exceeds the largethreshold, the tooltip will disappear when updating data, and the MouseMove of ecarts will pause for a moment

r7xajy2e 于 2022-11-02 发布在 Echarts

关注(0)|答案(1)|浏览(155)

Version

5.3.2

Link to Minimal Reproduction

https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js

Steps to Reproduce

env

echarts version : 5.3.2
os: win11

issue

When using appenddata to update data, and the data volume exceeds the largethreshold, the tooltip will disappear when updating data, and the MouseMove of ecarts will pause for a moment

properties:

series: [
            {
                large:true,
                largeThreshold:200
            }
        ]

When the data point exceeds 200, the tooltip will disappear at [appenddata],

appendData code

myChart.appendData({
                    seriesIndex: 0,
                    data:[[Math.random()*12.2,Math.random()*12.4]]
                }
  );
  myChart.resize();

The complete code is as follows

<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>
<script type="text/javascript">
    var dom = document.getElementById('container');

    var myChart = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
    });

    var option;
    function getData() {
        let temp = [];
        for (let i = 0; i < 100000; i++) {
            temp.push([
                Math.random()*12.2,Math.random()*12.4
            ]);
        }
        return temp;
    }

    option = {
        animation:false,
        xAxis: {},
        yAxis: {},
        dataZoom:[
            {
                type: 'inside',
                xAxisIndex: 0,
            }
        ],
        tooltip:{
            annotation:false,
            trigger: 'item'
        },
        series: [
            {
                type: 'scatter',
                animation:false,
                large:true,
                largeThreshold:200,
                progressive:1000000,
                data: getData()
            }
        ]
    };

    if (option && typeof option === 'object') {
        myChart.setOption(option);
        setInterval(()=>{
            //appendData 时, toolTip框会消失
            //When appendData, the toolTip box will disappear
            myChart.appendData({
                    seriesIndex: 0,
                    data:[[Math.random()*12.2,Math.random()*12.4]]
                }
            );
            myChart.resize();
        },500)

        myChart.on('mousemove', function(params) {
            // 当appendData 时, 事件会停止一瞬间
            // When appendData, the event stops for a moment
            console.log("mousemove");
        });
    }
    window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>