写一个通过echarts渲染svg图形svgg name=1path d=M43113L99113L99206L43206Z stroke-width=05 stroke=#000000 fill=#800080pathgsvg当鼠标悬浮在图形上时显示1要求给出完整代码并附上注释。

<html>
<head>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>
</head>
<body>
    <!-- echarts 容器 -->
    <div id="myChart" style="width: 500px;height: 500px;"></div>
<pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
    // 初始化 echarts 实例
    var myChart = echarts.init(document.getElementById('myChart'));

    // 定义 svg 图形
    var svg = '&lt;svg&gt;&lt;g name=&quot;1&quot;&gt;&lt;path d=&quot;M43,113L99,113L99,206L43,206Z&quot; stroke-width=&quot;0.5&quot; stroke=&quot;#000000&quot; fill=&quot;#800080&quot;&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;';

    // 将 svg 转为 echarts 的图形元素
    var graphic = echarts.graphic.makeGraphic(svg);

    // 定义图形元素上的鼠标移入事件
    graphic.on('mouseover', function(params) {
        console.log('鼠标移入图形');
        // 显示 1
        document.getElementById('text').innerHTML = '1';
    });

    // 定义图形元素上的鼠标移出事件
    graphic.on('mouseout', function(params) {
        console.log('鼠标移出图形');
        // 隐藏 1
        document.getElementById('text').innerHTML = '';
    });

    // 将图形元素添加到 echarts 实例中
    myChart.setOption({
        graphic: graphic
    });

&lt;/script&gt;

&lt;!-- 用于显示 1 的文本元素 --&gt;
&lt;div id=&quot;text&quot;&gt;&lt;/div&gt;
</code></pre>
</body>
</html