Эх сурвалжийг харах

鼠标悬停时添加边框,增强视觉效果

ching 3 сар өмнө
parent
commit
dd627cb642

+ 10 - 4
src/components/LineChart.vue

@@ -45,12 +45,18 @@ export default {
       const newSeries = this.chartData.series.map(seriesItem => ({
         ...seriesItem,
         // 设置数据点的大小
-        symbolSize: 10 ,
+        symbol: 'circle', // 明确指定数据点的形状为圆形
+        symbolSize: 0, // 正常状态下设置一个较小的尺寸,让数据点可见
         emphasis: {
-           symbolSize: 30,
-        },
+          // 鼠标悬停时数据点大小
+          itemStyle: {
+            borderWidth: 24, // 鼠标悬停时添加边框,增强视觉效果
+            borderColor: 'red', // 边框颜色为白色
+            color: 'red' // 鼠标悬停时数据点的填充颜色,这里设置为黄色,可按需修改
+          }
+        }
       }));
-      
+
       const option = {
         // 根据 showTooltip 变量的值来设置 tooltip,并且配置显示数值
         // tooltip: {