echarts不同版本显示不一致问题

uuai2025-11-05 19:10

复制代码

  <style>
        #container {
            width: 50px;
            height: 50px;
            border: 1px solid #dddddd;
        }
    </style>

<div id="container"></div>

echarts版本为5.5.0

正常显示

鼠标移入显示

echarts版本为4.9.0

正常显示

鼠标移入在4.9.0版本中鼠标移入元素会超出给定的宽高范围

echarts渲染参数

复制代码

<script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
        renderer: 'svg',
        // useDirtyRect: false
    });
    var app = {};

    var option;

    option = {
        color: ['#ff0303', '#999999'],
        legend: {
            show: false
        },
        //在4.9.0中设置 hoverOffset 减小hoverOffset：将默认的hover偏移量从10减小到5
        hoverOffset: 5,
        tooltip: {
            show: false
        },
        series: [
            {
                radius: '80%',
                type: 'pie',
                labelLine: {
                    show: false
                },
                label: {
                    show: false
                },
                data: [
                    {
                        name: '高温',
                        value: '90'
                    },
                    {
                        name: '正常',
                        value: '10'
                    }
                ]
            }
        ]
    };


    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
</script>