feat: supply option panel of gloabl and bar chart setting

src/components/GoVChart/index.vue

@@ -10,6 +10,8 @@
 <script setup lang="ts">
 import { ref, PropType, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'
 import { VChart, type IVChart, type IInitOption, type ISpec } from '@visactor/vchart'
+import { transformHandler } from './transformProps'
+import { IOption } from '@/packages/components/VChart/index.d'
 
 // 事件说明 v1.13.0 https://www.visactor.io/vchart/api/API/event
 const event = [
@@ -189,13 +191,14 @@ watch(
 
 // 更新
 const createOrUpdateChart = (
-  chartProps: ISpec & {
+  chartProps: IOption & {
     dataset: any
   }
 ) => {
   if (vChartRef.value && !chart) {
+    const spec = transformHandler[chartProps.category](chartProps)
     chart = new VChart(
-      { ...chartProps, data: chartProps.dataset },
+      { ...spec, data: chartProps.dataset },
       {
         dom: vChartRef.value,
         ...props.initOptions
@@ -204,8 +207,8 @@ const createOrUpdateChart = (
     chart.renderSync()
     return true
   } else if (chart) {
-    chart.updateSpec(chartProps)
-    chart.renderSync()
+    const spec = transformHandler[chartProps.category](chartProps)
+    chart.updateSpec({ ...spec, data: chartProps.dataset })
     return true
   }
   return false

src/components/GoVChart/transformProps/bars.ts

@@ -0,0 +1,32 @@
+import { cloneDeep } from "lodash"
+
+export default (chartProps: any) => {
+  const spec = cloneDeep(chartProps)
+  delete spec.category
+
+  // tooltip
+  const keyFill = spec.tooltip.style.keyLabel.fill
+  const valueFill = spec.tooltip.style.valueLabel.fill
+  const titleFill = spec.tooltip.style.titleLabel.keyFill
+  delete spec.tooltip.style.keyLabel.fill
+  delete spec.tooltip.style.valueLabel.fill
+  delete spec.tooltip.style.titleLabel.keyFill
+  spec.tooltip.style.keyLabel.fontColor = keyFill
+  spec.tooltip.style.valueLabel.fontColor = valueFill
+  spec.tooltip.style.titleLabel.fontColor = titleFill
+
+  // axis
+  const { name: xAxisName, ...restXAxisProps } = chartProps.xAxis
+  const { name: yAxisName, ...restYAxisProps } = chartProps.yAxis
+  spec.axes = [{
+    orient: 'bottom',
+    ...restXAxisProps
+  }, {
+    orient: 'left',
+    ...restYAxisProps
+  }]
+  delete spec.xAxis
+  delete spec.yAxis
+  console.log('spec-transform', spec)
+  return spec
+}

src/components/GoVChart/transformProps/index.ts

@@ -0,0 +1,8 @@
+import { ChatCategoryEnum, IOption } from "@/packages/components/VChart/index.d";
+import bars from './bars'
+export const transformHandler: {
+  [key: string]: (args: IOption) => any
+} = {
+  [ChatCategoryEnum.BAR]: bars,
+  // todo: more charts handler
+}