perf(src/packages): 信息里更多新增自定义echarts组件

+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { chartInitConfig } from '@/settings/designSetting'
+import { CustomEchartsConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  //数据源设置
+  dataset: "{}"
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = CustomEchartsConfig.key
+  public attr = { ...chartInitConfig, w: 1200, h: 800, zIndex: -1 }
+  public chartConfig = cloneDeep(CustomEchartsConfig)
+  public option = cloneDeep(option)
+}

+<template>
+  <collapse-item name="数据源" :expanded="true">
+    <monaco-editor v-model:modelValue="optionData.dataset" width="460px" height="380px" language="json" />
+  </collapse-item>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { option } from './config'
+import { CollapseItem } from '@/components/Pages/ChartItemSetting'
+import { MonacoEditor } from '@/components/Pages/MonacoEditor'
+
+defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+
+</script>

+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/Informations/index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, conKey, chartKey } = useWidgetKey('CustomEcharts', true)
+
+export const CustomEchartsConfig: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '自定义echarts组件',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.INFORMATIONS,
+  chartFrame: ChartFrameEnum.COMMON,        
+  image: 'iframe.png'
+}

+<template>
+  <v-chart
+    ref="vChartRef"
+    :init-options="initOptions"
+    :theme="themeColor"
+    :option="option"
+    :manual-update="isPreview()"
+    :update-options="{
+      replaceMerge: replaceMergeArr
+    }"
+    autoresize
+  ></v-chart>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, PropType, watch } from 'vue'
+import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { BarChart } from 'echarts/charts'
+import config from './config'
+import { mergeTheme } from '@/packages/public/chart'
+import { useChartDataFetch } from '@/hooks'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { isPreview } from '@/utils'
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
+
+const props = defineProps({
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
+    required: true
+  },
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true
+  }
+})
+
+const initOptions = useCanvasInitOptions(props.chartConfig.option.dataset, props.themeSetting)
+
+use([DatasetComponent, CanvasRenderer, BarChart, GridComponent, TooltipComponent, LegendComponent])
+
+const replaceMergeArr = ref<string[]>()
+
+const option = computed(() => {
+  return mergeTheme(props.chartConfig.option.dataset, props.themeSetting, [])
+})
+
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
+
+const updateVChart = (dataset: any) => {
+  new Promise(resolve => {
+    setTimeout(() => {
+      resolve(
+        vChartRef.value?.setOption(
+          {
+            ...dataset
+          },
+          {
+            notMerge: true
+          }
+        )
+      )
+    }, 100)
+  })
+}
+
+watch(
+  () => props.chartConfig.option.dataset,
+  newValue => {
+    try {
+      updateVChart(eval('(' + newValue + ')'))
+    } catch (e) {
+      console.log(e)
+    }
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+</script>

@@ -41,6 +41,7 @@ import { Decorates10Config } from '@/packages/components/external/Decorates/Deco
 import { CameraConfig } from '@/packages/components/external/Informations/Mores/Camera'
 import { SingleCameraConfig } from '@/packages/components/external/Informations/Mores/SingleCamera'
 import { OverrideILoadConfigurationframeConfig } from '@/packages/components/external/Informations/Mores/OverrideILoadConfigurationframe'
+import { CustomEchartsConfig } from '@/packages/components/external/Informations/Mores/CustomEcharts'
 
 /**
  * 重写动态注入
@@ -83,6 +84,7 @@ export function useInjectLib(packagesList: EPackagesType) {
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, CameraConfig)//新增信息下的多个摄像头
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, SingleCameraConfig)//新增信息下的单个摄像头
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideILoadConfigurationframeConfig)//新增信息下的加载组态
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, CustomEchartsConfig)//新增信息下的自定义ecahrts组件
   //
 
   //图表