1.tooltip

src/App.vue

@@ -26,7 +26,7 @@ export default {
             data: [120, 200, 150, 80, 70, 110, 130],
           },
         ],
-        showTooltip:false,
+        showTooltip:true,
       },
     };
   },

src/components/LineChart.vue

@@ -0,0 +1,125 @@
+<template>
+  <div ref="chartRef" style="width: 100%; height: 400px;"></div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+import { markRaw } from "vue";
+
+export default {
+  name: "LineChart",
+  props: {
+    chartData: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      myChart: null,
+    };
+  },
+  watch: {
+    // 监听 chartData 的变化，动态更新图表
+    chartData: {
+      deep: true,
+      handler() {
+        this.initChart();
+      },
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  methods: {
+    initChart() {
+      const showtip = this.chartData.showTooltip;
+      console.log("showtip:", showtip)
+      if (this.myChart) {
+        this.myChart.dispose();
+      }
+      this.myChart = markRaw(echarts.init(this.$refs.chartRef));
+      // 复制一份 series 数据，避免修改原始数据
+      const newSeries = this.chartData.series.map(seriesItem => ({
+        ...seriesItem,
+        // 设置数据点的大小
+        symbolSize: 10 ,
+        emphasis: {
+           symbolSize: 30,
+        },
+      }));
+      
+      const option = {
+        // 根据 showTooltip 变量的值来设置 tooltip，并且配置显示数值
+        // tooltip: {
+        //     trigger: 'axis' // 触发类型为坐标轴触发，当鼠标在坐标轴区域移动时显示提示框
+        //   },
+        tooltip: showtip ? {
+            trigger: 'axis', // 触发类型为坐标轴触发，当鼠标在坐标轴区域移动时显示提示框
+            show: true,
+          } : {
+            show: true,
+            trigger: 'axis',
+          }, 
+        // tooltip: {
+        //   trigger: "axis",
+        //   formatter: (params) => {},
+
+        title: {
+          //text: this.chartData.title || "简单折线图",
+          text: this.chartData.title + "简单折线图",
+        },
+
+        legend: {
+          data: this.chartData.series.map((s) => s.name),
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        toolbox: {
+          feature: {
+            saveAsImage: {},
+          },
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: this.chartData.categories,
+        },
+        yAxis: {
+          type: "value",
+        },
+        series: newSeries //this.chartData.series,
+      };
+
+      this.myChart.setOption(option, true);
+      this.myChart.resize();
+
+      // 监听点击事件
+      //this.myChart.on('click', 'series', (params) => {
+      this.myChart.on('click', (params) => {
+        if (params.componentType === 'series') {
+          // 点击的是数据系列
+          alert(`点击了 ${params.seriesName} 在 ${this.chartData.categories[params.dataIndex]} 的值为 ${params.data}`);
+        } else if (params.componentType === 'xAxis' || params.componentType === 'yAxis') {
+          // 点击的是坐标轴
+          alert(`点击了 ${params.componentType === 'xAxis' ? 'X 轴' : 'Y 轴'}`);
+        } else {
+          // 点击了其他区域
+          alert('点击了图表其他区域');
+        }
+      });
+    },
+  },
+  beforeUnmount() {
+    if (this.myChart) {
+      this.myChart.dispose();
+    }
+  },
+};
+</script>