ECharts 渲染 SVG 图形：鼠标悬浮显示悬浮框 - 代码示例 - 常规

<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>ECharts 渲染 SVG 图形 - 鼠标悬浮显示悬浮框</title>
    <!-- 引入 echarts.min.js -->
    <script src='https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js'></script>
</head>
<body>
    <!-- 为渲染 SVG 图形的容器 -->
    <div id='svg-container' style='width: 500px; height: 500px'></div>
<pre><code>&lt;!-- js 代码 --&gt;
&lt;script&gt;
    // 定义数据
    var data = [
        {value: 40, name: '数据1'},
        {value: 30, name: '数据2'},
        {value: 20, name: '数据3'},
        {value: 10, name: '数据4'}
    ];

    // 定义饼图的配置项
    var option = {
        series: [
            {
                type: 'pie',
                data: data,
                // 设置鼠标悬浮时的样式
                emphasis: {
                    itemStyle: {
                        // 鼠标悬浮时的颜色
                        color: '#f00'
                    },
                    // 鼠标悬浮时的提示框
                    tooltip: {
                        show: true,
                        // 鼠标悬浮时的提示框内容
                        formatter: '{b}: {c} ({d}%)'
                    }
                }
            }
        ]
    };

    // 使用 ECharts 渲染 SVG 图形
    var chart = echarts.init(document.getElementById('svg-container'));
    chart.setOption(option);
&lt;/script&gt;
</code></pre>
</body>
</html>