refactor: resource table columns

src/components/echarts/config.ts

@@ -67,6 +67,7 @@ export default function useChartConfig() {
   const legend = {
     itemWidth: 8,
     itemHeight: 8,
+    itemGap: 12,
     textStyle: {
       color: chartColorMap.axislabelColor
     }

src/components/echarts/line-chart.tsx

@@ -16,7 +16,10 @@ const LineChart: React.FC<ChartProps> = (props) => {
     tooltipValueFormatter = null,
     legendData = [],
     smooth,
-    title
+    title,
+    legendOptions,
+    gridOptions,
+    titleOptions
   } = props;
   const {
     grid,
@@ -42,7 +45,10 @@ const LineChart: React.FC<ChartProps> = (props) => {
     title: {
       text: ''
     },
-    grid,
+    grid: {
+      ...grid,
+      ...gridOptions
+    },
     tooltip: {
       ...tooltip,
       formatter(params: any) {
@@ -61,6 +67,7 @@ const LineChart: React.FC<ChartProps> = (props) => {
     yAxis,
     legend: {
       ...legend,
+      ...legendOptions,
       data: legendData.map((item: any) => {
         return {
           name: item,
@@ -93,6 +100,7 @@ const LineChart: React.FC<ChartProps> = (props) => {
       animation: false,
       title: {
         ...titleConfig,
+        ...titleOptions,
         text: title
       },
       yAxis: {
@@ -109,7 +117,16 @@ const LineChart: React.FC<ChartProps> = (props) => {
       },
       series: data
     };
-  }, [seriesData, xAxisData, yAxisName, title, smooth, legendData, options]);
+  }, [
+    seriesData,
+    xAxisData,
+    yAxisName,
+    title,
+    smooth,
+    titleOptions,
+    legendData,
+    options
+  ]);
 
   return (
     <>

src/components/echarts/types.ts

@@ -1,14 +1,29 @@
-import type { LegendComponentOption } from 'echarts/components';
+import type {
+  LegendComponentOption,
+  TitleComponentOption
+} from 'echarts/components';
 export interface ChartProps {
   seriesData: any[];
   showEmpty?: boolean;
   xAxisData: string[];
   legendData?: LegendComponentOption['data'];
+  legendOptions?: {
+    [K in keyof LegendComponentOption]?: LegendComponentOption[K];
+  };
+  gridOptions?: {
+    left?: string | number;
+    right?: string | number;
+    top?: string | number;
+    bottom?: string | number;
+  };
   labelFormatter?: (val?: any, index?: number) => string;
   tooltipValueFormatter?: (val: any) => string;
   height: string | number;
   width?: string | number;
   title?: string;
+  titleOptions?: {
+    [K in keyof TitleComponentOption]?: TitleComponentOption[K];
+  };
   value?: number;
   smooth?: boolean;
   color?: string;