refactor(web ui):refactor echarts component

web-ui/arthasWebConsole/all/ui/ui/src/components/charts/Bar.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import Chart from "./Base.vue"
+import * as echarts from 'echarts/core';
+import { DatasetComponentOption, DataZoomComponent, DataZoomComponentOption, GridComponent, GridComponentOption, LegendComponent, LegendComponentOption, TitleComponentOption, ToolboxComponentOption, TooltipComponentOption } from 'echarts/components';
+import { BarChart, BarSeriesOption, } from 'echarts/charts';
+import { LabelLayout } from 'echarts/features';
+import { BarChartOption } from "@/echart";
+let useList = ([
+  // LegendComponent,
+  BarChart,
+  LabelLayout,
+  GridComponent,
+  DataZoomComponent
+]);
+const props = defineProps<{ option: BarChartOption }>()
+</script>
+
+<template>
+  <Chart :use-list="useList" :option="props.option"></Chart>
+</template>

web-ui/arthasWebConsole/all/ui/ui/src/components/charts/Base.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import * as echarts from 'echarts/core';
+import { SVGRenderer } from 'echarts/renderers';
+import { TitleComponent, TitleComponentOption, TooltipComponent, TooltipComponentOption, ToolboxComponent, LegendComponent} from 'echarts/components'
+import { onBeforeUnmount, onMounted, Ref, ref, watch } from 'vue';
+// option && myChart.setOption(option);
+
+type GetTuple<T extends unknown> = T extends T
+  ? T extends [...infer E]
+  ? T
+  : never
+  : never
+type UseType = GetTuple<Parameters<typeof echarts.use>[0]>
+// echarts.ECharts
+type OptionType = Parameters<echarts.ECharts["setOption"]>[0]
+const props = defineProps<{
+  useList: UseType,
+  option: OptionType,
+}>()
+
+// type EChartsOption = echarts.ComposeOption<TooltipComponentOption | TitleComponentOption | DatasetComponentOption | PieSeriesOption>;
+const container = ref(null)
+let myChart: echarts.ECharts
+echarts.use([
+  ...props.useList,
+  SVGRenderer,
+  TitleComponent,
+  TooltipComponent,
+  ToolboxComponent,
+  LegendComponent
+])
+
+
+// 抽离出来使得resize事件可以在全局挂载和卸载
+const resizeDom = () => {
+  myChart && myChart.resize()
+}
+onMounted(() => {
+  // container.value.el.id = chartId.toString()
+  let dom = container.value
+  myChart = echarts.init(dom as unknown as HTMLElement)
+  myChart && myChart.setOption<OptionType>({
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross'
+      }
+    },
+    ...props.option
+  })
+  window.addEventListener("resize", resizeDom)
+})
+watch(props.option, (newData: any) => {
+  myChart && newData && myChart.setOption(newData, true)
+  console.log(newData)
+},
+  {
+    immediate: true,
+    deep: true
+  })
+onBeforeUnmount(() => {
+  myChart && myChart.dispose()
+  window.removeEventListener("resize", resizeDom)
+})
+</script>
+
+<template>
+  <div ref="container" class="w-full h-full"></div>
+</template>
+
+<style scoped>
+
+</style>

web-ui/arthasWebConsole/all/ui/ui/src/components/charts/Circle.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+// import Chart from "./Chart.vue"
+import * as echarts from 'echarts/core';
+import { DatasetComponent, DatasetComponentOption, LegendComponent, TitleComponentOption, TooltipComponentOption } from 'echarts/components';
+import { PieChart } from 'echarts/charts';
+import { LabelLayout } from 'echarts/features';
+import { CircleChartOption } from "@/echart";
+import Base from './Base.vue';
+let useList = ([
+  PieChart,
+  LabelLayout,
+  DatasetComponent
+]);
+// type CircleChartsOption = echarts.ComposeOption<TooltipComponentOption | TitleComponentOption | DatasetComponentOption | PieSeriesOption>;
+const props = defineProps<{ option: CircleChartOption }>()
+</script>
+
+<template>
+  <Base :use-list="useList" :option="props.option" />
+</template>

web-ui/arthasWebConsole/all/ui/ui/src/components/charts/Line.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import Chart from "./Base.vue"
+import * as echarts from 'echarts/core';
+import { DataZoomComponent,  GridComponent } from 'echarts/components';
+import { LineChart } from 'echarts/charts';
+import { LabelLayout } from 'echarts/features';
+import { LineChartOption } from "@/echart";
+let useList = ([
+  LineChart,
+  LabelLayout,
+  GridComponent, 
+  DataZoomComponent
+]);
+const props = defineProps<{ option: LineChartOption }>()
+</script>
+
+<template>
+  <Chart :use-list="useList" :option="props.option"></Chart>
+</template>

web-ui/arthasWebConsole/all/ui/ui/src/echart.d.ts

@@ -0,0 +1,47 @@
+import * as echarts from "echarts";
+import {
+  DatasetComponentOption,
+  DataZoomComponentOption,
+  GridComponentOption,
+  LegendComponentOption,
+  TitleComponentOption,
+  ToolboxComponentOption,
+  TooltipComponentOption,
+} from "echarts/components";
+import {
+  BarSeriesOption,
+  LineSeriesOption,
+  PieSeriesOption,
+} from "echarts/charts";
+type LineChartOption = echarts.ComposeOption<
+  | TooltipComponentOption
+  | TitleComponentOption
+  | DatasetComponentOption
+  | LineSeriesOption
+  | TitleComponentOption
+  | ToolboxComponentOption
+  | TooltipComponentOption
+  | GridComponentOption
+  | LegendComponentOption
+  | DataZoomComponentOption
+  | LineSeriesOption
+>;
+
+type BarChartOption = echarts.ComposeOption<
+  | TooltipComponentOption
+  | TitleComponentOption
+  | DatasetComponentOption
+  | BarSeriesOption
+  | DataZoomComponentOption
+  | LegendComponentOption
+  | GridComponentOption
+  | ToolboxComponentOption
+>;
+
+type CircleChartOption = echarts.ComposeOption<
+  | TooltipComponentOption
+  | TitleComponentOption
+  | DatasetComponentOption
+  | PieSeriesOption
+  | LegendComponentOption
+>;