feat: 添加其事件监听

src/layout.conf.ts

@@ -10,12 +10,12 @@ const sampleForLineCharts = {
 const sampleForRadarCharts = {
   type: ChartCompType.SimpleRadar,
   indicators: [
-    { name: 'Sales', max: 6500 },
-    { name: 'Administration', max: 16000 },
-    { name: 'Information Technology', max: 30000 },
-    { name: 'Customer Support', max: 38000 },
-    { name: 'Development', max: 52000 },
-    { name: 'Marketing', max: 25000 }
+    { name: 'Sales', max: 6500, min: 0 },
+    { name: 'Administration', max: 16000, min: 0 },
+    { name: 'Information Technology', max: 30000, min: 0 },
+    { name: 'Customer Support', max: 38000, min: 0 },
+    { name: 'Development', max: 52000, min: 0 },
+    { name: 'Marketing', max: 25000, min: 0 }
   ],
   data: [
     {
@@ -70,6 +70,10 @@ const sampleKLine = {
         ]
       }
     ]
+  },
+  onClickGraph(item: any, index: number) {
+    alert('click-kline')
+    console.log('item-here', {item, index})
   }
 }
 
@@ -122,6 +126,10 @@ const sampleScatter = {
         type: 'scatter'
       }
     ]
+  },
+  onClickGraph(item: any, index: number) {
+    alert('click-scatter!')
+    console.log('item-here', {item, index})
   }
 }
 
@@ -215,6 +223,10 @@ const indexMapper: Record<string, any> = {
   1: {
     title: "随意设置图",
     chartData: [sampleKLine, sampleScatter],
+    onClickTitle(item: any) {
+      alert('click-random')
+      console.log('item-here', {item})
+    }
   },
   6: {
     title: "简单混排图",

src/lib/Table2Chart/ScreenChart.vue

@@ -47,7 +47,7 @@ import { singleContainerClass } from "./const/staticConsts.ts";
       :style="gridItemStyle(item, props, gridConfig)"
       class="flex flex-col"
     >
-      <div v-if="!item.renderTitle" class="w-full">{{ item.title }}</div>
+      <div @click="item.onClickTitle ? item.onClickTitle(item) : () => {}" v-if="!item.renderTitle" class="w-full">{{ item.title }}</div>
       <component :is="item.renderTitle(item, props.layout)" v-else />
       <div
         v-if="isAllMounted"
@@ -68,6 +68,7 @@ import { singleContainerClass } from "./const/staticConsts.ts";
           v-for="(z, x) in item.chartData"
           :key="x"
           :options="mapToEchartsOptions(z)"
+          @click="z.onClickGraph && z.onClickGraph(z, x)"
         />
       </div>
     </div>

src/lib/Table2Chart/types/ScreenChart.typing.ts

@@ -8,6 +8,7 @@ export type BarChartOptions = {
   chartWidth?: number | string;
   chartHeight?: number | string;
   options?: any
+  onClickGraph?: Function;
 };
 
 export type LineChartOptions = BarChartOptions;
@@ -20,6 +21,7 @@ export type PieChartOptionsBase = {
   chartHeight?: number | string;
   legend?: any;
   options?: any
+  onClickGraph?: Function;
 };
 
 export type PieCharOptions = PieChartOptionsBase & {
@@ -34,6 +36,7 @@ export type ButtonCenterText = {
   title: string;
   bottomTex: string;
   type: ChartCompType;
+  onClickGraph?: Function;
 };
 
 export type SimpleTableChart = {
@@ -41,6 +44,7 @@ export type SimpleTableChart = {
   columns: Array<{ title: string; key: string }>;
   data: Array<Record<string, any>>;
   options?: any
+  onClickGraph?: Function;
 };
 
 export type SimpleRadarChart = {
@@ -52,6 +56,7 @@ export type SimpleRadarChart = {
   legend?: any;
   indicators: Array<{ name: string; max: number }>;
   options?: any
+  onClickGraph?: Function;
 };
 
 export type DIYChart = {
@@ -59,6 +64,7 @@ export type DIYChart = {
   options: any,
   chartWidth?: number | string;
   chartHeight?: number | string;
+  onClickGraph?: Function;
 }
 
 export type GeneralChartOptions =
@@ -82,6 +88,7 @@ export type SingleLayoutConf = {
   wrapperClass?: string | Array<string> | Record<string, any>;
   wrapperStyle?: Record<string, any> | Function;
   columns?: number;
+  onClickTitle?: Function;
 };
 
 export type LayoutConfig = Array<SingleLayoutConf>;