Echarts 渲染 SVG 图形并实现鼠标悬浮框 - 完整 HTML 代码和注释 - 常规

<!DOCTYPE html>
<html>
<head>
	<meta charset='utf-8'>
	<title>SVG 图形悬浮框</title>
	<!-- 引入 echarts 库 -->
	<script src='https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js'></script>
</head>
<body>
	<!-- 定义一个 div，用于展示 echarts 图形 -->
	<div id='chart' style='width:600px;height:400px;'></div>
	<script>
		// echarts 渲染 svg 图形
		var myChart = echarts.init(document.getElementById('chart'));
		var option = {
			// 定义一个 svg 图形
			graphic: [{
				id: 'svg',
				type: 'svg',
				left: 50,
				top: 50,
				z: 100,
				style: {
					width: 200,
					height: 200
				},
				// svg 代码
				shape: {
					type: 'path',
					pathData: 'M 100 10 L 50 190 L 150 190 Z',
					stroke: '#666',
					fill: '#ccc'
				},
				// 提示框
				tooltip: {
					show: true,
					trigger: 'item',
					formatter: function(params) {
						return '这是一个 svg 图形';
					},
					position: function(point, params, dom, rect, size) {
						return [point[0] + 10, point[1] + 10];
					},
					backgroundColor: 'rgba(255, 255, 255, 0.7)',
					borderColor: '#333',
					borderWidth: 1,
					padding: 5,
					textStyle: {
						color: '#333'
					},
					extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'
				}
			}]
		};
		myChart.setOption(option);
	</script>
</body>
</html>
<p>注：echarts 库可以通过 npm、cdn 等方式引入，本例中使用了 cdn。option 中定义了一个 graphic 对象，其中包含一个 id 为 svg 的 svg 图形，以及一个 tooltip 属性，用于显示悬浮框。tooltip 的 position 属性用于定义悬浮框的位置。extraCssText 属性用于添加额外的 CSS 样式。</p>