From 84315db9c5c0c58e964a592274cd3db0cac09d53 Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Thu, 7 Jul 2022 11:46:34 +0800
Subject: [PATCH] update charts

---
 src/views/dashboard/graphs/Area.vue | 10 +++++++++-
 src/views/dashboard/graphs/Bar.vue  | 28 ++++++++++++++++++++++++----
 src/views/dashboard/graphs/Line.vue |  8 ++++++++
 3 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/src/views/dashboard/graphs/Area.vue b/src/views/dashboard/graphs/Area.vue
index 1c4d14f0..2840a108 100644
--- a/src/views/dashboard/graphs/Area.vue
+++ b/src/views/dashboard/graphs/Area.vue
@@ -29,7 +29,15 @@ defineProps({
   },
   intervalTime: { type: Array as PropType<string[]>, default: () => [] },
   config: {
-    type: Object as PropType<AreaConfig>,
+    type: Object as PropType<
+      AreaConfig & {
+        filters: {
+          value: number | string;
+          dataIndex: number;
+          sourceId: string;
+        };
+      } & { id: string }
+    >,
     default: () => ({}),
   },
 });
diff --git a/src/views/dashboard/graphs/Bar.vue b/src/views/dashboard/graphs/Bar.vue
index aed49ef3..6eed6459 100644
--- a/src/views/dashboard/graphs/Bar.vue
+++ b/src/views/dashboard/graphs/Bar.vue
@@ -13,15 +13,16 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
-  <Graph :option="option" />
+  <Graph :option="option" @select="clickEvent" :filters="config.filters" />
 </template>
 <script lang="ts" setup>
 import { computed } from "vue";
 import type { PropType } from "vue";
 import { Event } from "@/types/events";
-import { BarConfig } from "@/types/dashboard";
+import { BarConfig, EventParams } from "@/types/dashboard";
 
-/*global defineProps */
+/*global defineProps, defineEmits */
+const emits = defineEmits(["click"]);
 const props = defineProps({
   data: {
     type: Object as PropType<{ [key: string]: number[] }>,
@@ -31,7 +32,15 @@ const props = defineProps({
   theme: { type: String, default: "light" },
   itemEvents: { type: Array as PropType<Event[]>, default: () => [] },
   config: {
-    type: Object as PropType<BarConfig>,
+    type: Object as PropType<
+      BarConfig & {
+        filters: {
+          value: number | string;
+          dataIndex: number;
+          sourceId: string;
+        };
+      } & { id: string }
+    >,
     default: () => ({}),
   },
 });
@@ -147,6 +156,14 @@ function getOption() {
       },
       enterable: true,
       extraCssText: "max-height: 300px; overflow: auto; border: none",
+      axisPointer: {
+        lineStyle: {
+          width: 2,
+        },
+        label: {
+          show: false,
+        },
+      },
     },
     legend: {
       type: "scroll",
@@ -186,4 +203,7 @@ function getOption() {
     series: temp,
   };
 }
+function clickEvent(params: EventParams) {
+  emits("click", params);
+}
 </script>
diff --git a/src/views/dashboard/graphs/Line.vue b/src/views/dashboard/graphs/Line.vue
index 34091219..e84b026d 100644
--- a/src/views/dashboard/graphs/Line.vue
+++ b/src/views/dashboard/graphs/Line.vue
@@ -162,6 +162,14 @@ function getOption() {
     enterable: true,
     confine: true,
     extraCssText: "max-height: 300px; overflow: auto; border: none;",
+    axisPointer: {
+      lineStyle: {
+        width: 2,
+      },
+      label: {
+        show: false,
+      },
+    },
   };
   const tips = {
     formatter(params: any) {