feat: 初始化 VChart

.gitignore

@@ -5,3 +5,4 @@ dist-ssr
 *.local
 .vscode
 .idea
+pnpm-lock

package.json

@@ -21,6 +21,8 @@
     "@types/crypto-js": "^4.1.1",
     "@types/keymaster": "^1.6.30",
     "@types/lodash": "^4.14.184",
+    "@visactor/vchart": "^1.12.12",
+    "@visactor/vchart-theme": "^1.12.2",
     "animate.css": "^4.1.1",
     "axios": "^1.4.0",
     "color": "^4.2.3",
@@ -41,7 +43,7 @@
     "pinia": "^2.0.13",
     "screenfull": "^6.0.1",
     "three": "^0.145.0",
-    "vue": "^3.2.31",
+    "vue": "^3.5.13",
     "vue-demi": "^0.13.1",
     "vue-i18n": "9.2.2",
     "vue-router": "4.0.12",

src/components/GoVChart/index.ts

@@ -0,0 +1,3 @@
+import GoVChart from './index.vue'
+
+export { GoVChart }

src/components/GoVChart/index.vue

@@ -0,0 +1,218 @@
+<template>
+  <div
+    ref="vChartRef"
+    v-on="{
+      ...Object.fromEntries(event.map(eventName => [eventName, (eventData: MouseEvent) => eventHandlers(eventData, eventName)]))
+    }"
+  ></div>
+</template>
+
+<script setup lang="ts">
+import { ref, PropType, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'
+import { VChart, type IVChart, type IInitOption, type ISpec } from '@visactor/vchart'
+
+// 事件说明 v1.13.0 https://www.visactor.io/vchart/api/API/event
+const event = [
+  'mousedown',
+  'mouseup',
+  'mouseupoutside',
+  'rightdown',
+  'rightup',
+  'rightupoutside',
+  'click',
+  'dblclick',
+  'mousemove',
+  'mouseover',
+  'mouseout',
+  'mouseenter',
+  'mouseleave',
+  'wheel',
+  'touchstart',
+  'touchend',
+  'touchendoutside',
+  'touchmove',
+  'touchcancel',
+  'tap',
+  'dragstart',
+  'dragend',
+  'drag',
+  'dragenter',
+  'dragleave',
+  'dragover',
+  'drop',
+  'pan',
+  'panstart',
+  'panend',
+  'press',
+  'pressup',
+  'pressend',
+  'pinch',
+  'pinchstart',
+  'pinchend',
+  'swipe',
+  'dimensionHover',
+  'dimensionClick',
+  'dataZoomChange',
+  'scrollBarChange',
+  'brushStart',
+  'brushChange',
+  'brushEnd',
+  'brushClear',
+  'drill',
+  'legendItemClick',
+  'legendItemHover',
+  'legendItemUnHover',
+  'legendFilter',
+  'initialized',
+  'rendered',
+  'renderFinished',
+  'animationFinished',
+  'layoutStart',
+  'layoutEnd',
+  'afterResizef'
+]
+const emit = defineEmits([
+  'mousedown',
+  'mouseup',
+  'mouseupoutside',
+  'rightdown',
+  'rightup',
+  'rightupoutside',
+  'click',
+  'dblclick',
+  'mousemove',
+  'mouseover',
+  'mouseout',
+  'mouseenter',
+  'mouseleave',
+  'wheel',
+  'touchstart',
+  'touchend',
+  'touchendoutside',
+  'touchmove',
+  'touchcancel',
+  'tap',
+  'dragstart',
+  'dragend',
+  'drag',
+  'dragenter',
+  'dragleave',
+  'dragover',
+  'drop',
+  'pan',
+  'panstart',
+  'panend',
+  'press',
+  'pressup',
+  'pressend',
+  'pinch',
+  'pinchstart',
+  'pinchend',
+  'swipe',
+  'dimensionHover',
+  'dimensionClick',
+  'dataZoomChange',
+  'scrollBarChange',
+  'brushStart',
+  'brushChange',
+  'brushEnd',
+  'brushClear',
+  'drill',
+  'legendItemClick',
+  'legendItemHover',
+  'legendItemUnHover',
+  'legendFilter',
+  'initialized',
+  'rendered',
+  'renderFinished',
+  'animationFinished',
+  'layoutStart',
+  'layoutEnd',
+  'afterResizef'
+])
+
+const props = defineProps({
+  option: {
+    type: Object as PropType<ISpec>,
+    required: true
+  },
+  initOptions: {
+    type: Object as PropType<
+      IInitOption & {
+        deepWatch?: boolean
+      }
+    >,
+    required: false,
+    default: () => ({})
+  }
+})
+
+const vChartRef = ref()
+let chart: IVChart
+
+watch(
+  () => props.option,
+  (chartProps: ISpec) => {
+    if (vChartRef.value) {
+      nextTick(() => {
+        createOrUpdateChart(chartProps)
+      })
+    }
+  },
+  {
+    deep: props.initOptions.deepWatch || false
+  }
+)
+
+// 更新
+const createOrUpdateChart = (chartProps: ISpec) => {
+  if (vChartRef.value && !chart) {
+    chart = new VChart(chartProps, {
+      dom: vChartRef.value,
+      ...props.initOptions
+    })
+    chart.renderSync()
+    return true
+  } else if (chart) {
+    chart.updateSpec(chartProps)
+    chart.renderSync()
+    return true
+  }
+  return false
+}
+
+// 刷新
+const refresh = () => {
+  if (chart) {
+    chart.release()
+    chart.renderSync()
+  }
+}
+
+// 抛出事件
+const eventHandlers = (eventData: MouseEvent, eventName: string) => {
+  if (event.includes(eventName)) emit(eventName as any, eventData)
+}
+
+// 挂载
+onMounted(() => {
+  createOrUpdateChart(props.option)
+})
+
+// 卸载
+onBeforeUnmount(() => {
+  if (chart) {
+    chart.release()
+  }
+})
+
+defineExpose({
+  // 重刷新
+  refresh,
+  release: () => {
+    if (chart) {
+      chart.release()
+    }
+  }
+})
+</script>

src/packages/components/VChart/Bars/VChartBarCommon/config.ts

@@ -0,0 +1,15 @@
+import { PublicConfigClass } from '@/packages/public'
+import { VChartBarCommonConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = VChartBarCommonConfig.key
+  public chartConfig = cloneDeep(VChartBarCommonConfig)
+  // 图表配置项
+  public option = cloneDeep(option)
+}

src/packages/components/VChart/Bars/VChartBarCommon/config.vue

@@ -0,0 +1,3 @@
+<template></template>
+
+<script setup lang="ts"></script>

src/packages/components/VChart/Bars/VChartBarCommon/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const VChartBarCommonConfig: ConfigType = {
+  key: 'VChartBarCommon',
+  chartKey: 'VVChartBarCommon',
+  conKey: 'VCVChartBarCommon',
+  title: 'VChart柱状图',
+  category: ChatCategoryEnum.BAR,
+  categoryName: ChatCategoryEnumName.BAR,
+  package: PackagesCategoryEnum.VCHART,
+  chartFrame: ChartFrameEnum.VCHART,
+  image: 'vchart_bar_x.png'
+}

src/packages/components/VChart/Bars/index.ts

@@ -0,0 +1,3 @@
+import { VChartBarCommonConfig } from './VChartBarCommon/index'
+
+export default [VChartBarCommonConfig]

src/packages/components/VChart/index.d.ts

@@ -0,0 +1,7 @@
+export enum ChatCategoryEnum {
+  BAR = 'Bars',
+}
+
+export enum ChatCategoryEnumName {
+  BAR = '柱状图',
+}

src/packages/components/VChart/index.ts

@@ -0,0 +1,3 @@
+import Bars from './Bars'
+
+export const VChartList = [...Bars]

src/packages/index.d.ts

@@ -5,6 +5,8 @@ import type { RequestConfigType } from '@/store/modules/chartEditStore/chartEdit
 export enum ChartFrameEnum {
   // 支持 dataset 的 echarts 框架
   ECHARTS = 'echarts',
+  // VChart 框架
+  VCHART = 'VChart',
   // UI 组件框架
   NAIVE_UI = 'naiveUI',
   // 自定义带数据组件
@@ -173,6 +175,7 @@ export type PickCreateComponentType<T extends keyof CreateComponentType> = Pick<
 // 包分类枚举
 export enum PackagesCategoryEnum {
   CHARTS = 'Charts',
+  VCHART = 'VChart',
   TABLES = 'Tables',
   INFORMATIONS = 'Informations',
   PHOTOS = 'Photos',
@@ -183,6 +186,7 @@ export enum PackagesCategoryEnum {
 // 包分类名称
 export enum PackagesCategoryName {
   CHARTS = '图表',
+  VCHART = 'VChart',
   TABLES = '列表',
   INFORMATIONS = '信息',
   PHOTOS = '图片',
@@ -199,6 +203,7 @@ export enum FetchComFlagType {
 // 图表包类型
 export type PackagesType = {
   [PackagesCategoryEnum.CHARTS]: ConfigType[]
+  [PackagesCategoryEnum.VCHART]: ConfigType[]
   [PackagesCategoryEnum.INFORMATIONS]: ConfigType[]
   [PackagesCategoryEnum.TABLES]: ConfigType[]
   [PackagesCategoryEnum.PHOTOS]: ConfigType[]

src/packages/index.ts

@@ -1,4 +1,5 @@
 import { ChartList } from '@/packages/components/Charts/index'
+import { VChartList } from '@/packages/components/VChart/index'
 import { DecorateList } from '@/packages/components/Decorates/index'
 import { InformationList } from '@/packages/components/Informations/index'
 import { TableList } from '@/packages/components/Tables/index'
@@ -19,6 +20,7 @@ const imagesModules: Record<string, { default: string }> = import.meta.glob('../
 // * 所有图表
 export let packagesList: PackagesType = {
   [PackagesCategoryEnum.CHARTS]: ChartList,
+  [PackagesCategoryEnum.VCHART]: VChartList,
   [PackagesCategoryEnum.INFORMATIONS]: InformationList,
   [PackagesCategoryEnum.TABLES]: TableList,
   [PackagesCategoryEnum.DECORATES]: DecorateList,

src/plugins/icon.ts

@@ -102,7 +102,8 @@ import {
   Carbon3DSoftware as Carbon3DSoftwareIcon,
   Filter as FilterIcon,
   FilterEdit as FilterEditIcon,
-  Laptop as LaptopIcon
+  Laptop as LaptopIcon,
+  ChartPie as ChartPieIcon
 } from '@vicons/carbon'
 
 const ionicons5 = {
@@ -300,7 +301,9 @@ const carbon = {
   FilterIcon,
   FilterEditIcon,
   // 图层
-  LaptopIcon
+  LaptopIcon,
+  // 柱状图
+  ChartPieIcon
 }
 
 // https://www.xicons.org/#/ 还有很多

src/views/chart/ContentCharts/hooks/useAside.hook.ts

@@ -7,7 +7,7 @@ import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore'
 import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
 // 图标
 const { AirPlaneOutlineIcon, ImageIcon, BarChartIcon } = icon.ionicons5
-const { TableSplitIcon, RoadmapIcon, SpellCheckIcon, GraphicalDataFlowIcon } = icon.carbon
+const { TableSplitIcon, RoadmapIcon, ChartPieIcon, SpellCheckIcon, GraphicalDataFlowIcon } = icon.carbon
 
 // 图表
 export type MenuOptionsType = {
@@ -22,6 +22,10 @@ const packagesListObj = {
     icon: renderIcon(RoadmapIcon),
     label: PackagesCategoryName.CHARTS
   },
+  [PackagesCategoryEnum.VCHART]: {
+    icon: renderIcon(ChartPieIcon),
+    label: PackagesCategoryName.VCHART
+  },
   [PackagesCategoryEnum.INFORMATIONS]: {
     icon: renderIcon(SpellCheckIcon),
     label: PackagesCategoryName.INFORMATIONS

vite.config.ts

@@ -39,6 +39,10 @@ export default defineConfig({
       }
     }
   },
+  define: {
+    // enable hydration mismatch details in production build
+    __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'true'
+  },
   plugins: [
     vue({
       template: {