修改tooltip样式

src/components/markdown/plugins/impl/VueCharts.vue

@@ -29,7 +29,6 @@ const setOption = () => {
 				data = JSON.parse(prop.data)
 			}
 		}
-
 	} catch (e) {
 		console.error(e)
 		return
@@ -37,12 +36,44 @@ const setOption = () => {
 
 	data = {
 		...data,
-		"grid": {
-			"left": "3%",
-			"right": "4%",
-			"bottom": "3%",
-			"top": "3%",
-			"containLabel": true
+		grid: {
+			left: '3%',
+			right: '4%',
+			bottom: '3%',
+			top: '3%',
+			containLabel: true,
+		},
+		tooltip: {
+			...data.tooltip,
+			position: function (point, params, dom, rect, size) {
+				//其中point为当前鼠标的位置，
+				//size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
+				// 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
+				// 提示框位置
+				let x: number // x坐标位置
+				let y: number // y坐标位置
+				// 当前鼠标位置
+				const pointX = point[0]
+				const pointY = point[1]
+				// 提示框大小
+				const boxWidth = size.contentSize[0]
+				const boxHeight = size.contentSize[1]
+				// boxWidth > pointX 说明鼠标左边放不下提示框
+				if (boxWidth > pointX) {
+					x = 5
+				} else {
+					// 左边放的下
+					x = pointX - boxWidth
+				}
+				// boxHeight > pointY 说明鼠标上边放不下提示框
+				if (boxHeight > pointY) {
+					y = 5
+				} else {
+					// 上边放得下
+					y = pointY - boxHeight
+				}
+				return [x, y]
+			},
 		},
 	}