优化联动

src/utils/chart.js

@@ -212,7 +212,7 @@ export const getLineOption2 = (xData = [], seriesData = [], legendDesc = "健康
   tooltip: {
     trigger: "axis",
     axisPointer: {
-      type: "none"
+      // type: "none"
     }
   },
   grid: {

src/views/dustMonitoring/index.vue

@@ -195,15 +195,12 @@ const initChart = (instance, option, domEl) => {
   instance = echarts.init(document.getElementById(domEl));
   instance.setOption(option);
   chartInstance[domEl] = instance;
-  // instance.on("showTip", (params) => {
-  //   console.log(params);
-  // })
   chartLinkageFun();
 };
-let instanceList = reactive([])
+let instanceList = reactive([]);
 // 图表联动
 const chartLinkageFun = (target) => {
-  instanceList = []
+  instanceList = [];
   Object.keys(chartInstance).forEach((key) => {
     instanceList.push(chartInstance[key]);
   });
@@ -221,10 +218,31 @@ const chartLinkageFun = (target) => {
     item.on("showTip", function (e) {
       bindToolTip(this, e);
     });
+    // 获取canvas的非绘制图形区域
+    item.getZr().on("mousemove", function (params) {
+      if (
+        item.containPixel("grid", [params.event.offsetX, params.event.offsetY])
+      ) {
+        // 只在图表区域内处理点击事件
+        // console.log("Clicked inside the chart area");
+      } else {
+        // 处理点击空白区域的情况
+        // console.log("Clicked outside the chart area");
+        instanceList.forEach((item_, index) => {
+          item_.dispatchAction({
+            type: "hideTip",
+          });
+          item_.dispatchAction({
+            type: 'updateAxisPointer',
+            currTrigger: "leave"
+          })
+        });
+      }
+    });
   });
 };
 const bindToolTip = (that, e) => {
-  const connectCharts = instanceList
+  const connectCharts = instanceList;
   if (window.echartTimer) {
     clearTimeout(window.echartTimer);
   }
@@ -243,41 +261,11 @@ const bindToolTip = (that, e) => {
         let xAxisList = option.xAxis[0].data;
         let tmpIndex = e.dataIndex;
         item_.off("showTip");
-        if (
-          option.yAxis &&
-          option.yAxis[0] &&
-          option.yAxis[0]["data"] &&
-          option.yAxis[0]["data"].length == 2 &&
-          option.yAxis[0]["data"][0] === 0 &&
-          option.yAxis[0]["data"][1] === 1
-        ) {
-          item_.dispatchAction({
-            type: "showTip",
-            seriesIndex: 0,
-            dataIndex: tmpIndex,
-          });
-          item_.dispatchAction({
-            type: "showTip",
-            seriesIndex: 1,
-            dataIndex: tmpIndex,
-          });
-        } else {
-          item_.dispatchAction({
-            type: "showTip",
-            seriesIndex: 0,
-            dataIndex: tmpIndex,
-          });
-          item_.dispatchAction({
-            type: "showTip",
-            seriesIndex: 1,
-            dataIndex: tmpIndex,
-          });
-          item_.dispatchAction({
-            type: "showTip",
-            seriesIndex: 2,
-            dataIndex: tmpIndex,
-          });
-        }
+        item_.dispatchAction({
+          type: "showTip",
+          seriesIndex: 0,
+          dataIndex: tmpIndex,
+        });
 
         item_.on("showTip", function (e) {
           bindToolTip(this, e);