build: 升级版本到 2.2.0

Merge pull request !142 from xiangmaoshuo/feat/canvas

package.json

@@ -1,8 +1,8 @@
 {
   "name": "go-view",
-  "version": "2.1.5",
+  "version": "2.2.0",
   "engines": {
-    "node": ">=16.14 <18.0.0"
+    "node": ">=12.0"
   },
   "scripts": {
     "dev": "vite --host",
@@ -24,6 +24,7 @@
     "axios": "^0.27.2",
     "color": "^4.2.3",
     "crypto-js": "^4.1.1",
+    "dayjs": "^1.11.7",
     "dom-helpers": "^5.2.1",
     "echarts-liquidfill": "^3.1.0",
     "echarts-stat": "^1.2.0",

src/api/axios.ts

@@ -55,6 +55,8 @@ axiosInstance.interceptors.response.use(
     }
     const { code } = res.data as { code: number }
 
+    if (code === undefined || code === null) return Promise.resolve(res)
+
     // 成功
     if (code === ResultEnum.SUCCESS) {
       return Promise.resolve(res.data)

src/api/http.ts

@@ -172,7 +172,9 @@ export const customizeHttp = (targetParams: RequestConfigType, globalParams: Req
 
     case RequestBodyEnum.JSON:
       headers['Content-Type'] = ContentTypeEnum.JSON
-      data = translateStr(JSON.parse(targetRequestParams.Body['json']))
+      //json对象也能使用'javasctipt:'来动态拼接参数
+      data = translateStr(targetRequestParams.Body['json'])
+      if(typeof data === 'string')  data = JSON.parse(data)
       // json 赋值给 data
       break
 

src/api/mock/test.mock.ts

@@ -10,8 +10,8 @@ export default {
     status: 200,
     msg: '请求成功',
     data: {
-      dimensions: ['product', 'dataOne'],
-      'source|50': [
+    dimensions: ['product', 'dataOne'],
+      'source|20': [
         {
           product: '@name',
           'dataOne|0-900': 3
@@ -37,12 +37,13 @@ export default {
     status: 200,
     msg: '请求成功',
     data: {
-      dimensions: ['product', 'dataOne', 'dataTwo'],
-      'source|50': [
+      dimensions: ['product', 'dataOne', 'dataTwo', 'dataThree'],
+      'source|20': [
         {
           product: '@name',
           'dataOne|100-900': 3,
-          'dataTwo|100-900': 3
+          'dataTwo|100-900': 3,
+          'dataThree|100-900': 3
         }
       ]
     }

src/components/Pages/ChartGlobImage/index.ts

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

src/components/Pages/ChartGlobImage/index.vue

@@ -0,0 +1,31 @@
+<template>
+  <img class="list-img" v-lazy="imageInfo" alt="图表图片" />
+</template>
+
+<script setup lang="ts">
+import { ref, PropType, watch } from 'vue'
+import { fetchImages } from '@/packages'
+import { ConfigType } from '@/packages/index.d'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<ConfigType>,
+    required: true
+  }
+})
+
+const imageInfo = ref('')
+
+// 获取图片
+const fetchImageUrl = async () => {
+  imageInfo.value = await fetchImages(props.chartConfig)
+}
+
+watch(
+  () => props.chartConfig.key,
+  () => fetchImageUrl(),
+  {
+    immediate: true
+  }
+)
+</script>

src/components/Pages/ChartItemSetting/EchartsRendererSetting.vue

@@ -0,0 +1,45 @@
+<template>
+  <n-radio-group :value="props.modelValue || INHERIT_VALUE" @update:value="handleChange">
+    <n-space>
+      <n-tooltip :show-arrow="false" trigger="hover" v-for="item in rendererList" :key="item.value">
+        <template #trigger>
+          <n-radio :value="item.value">
+            {{ item.value }}
+          </n-radio>
+        </template>
+        {{ item.desc }}
+      </n-tooltip>
+    </n-space>
+  </n-radio-group>
+</template>
+<script setup lang="ts">
+import { type EchartsRenderer } from '@/settings/chartThemes'
+
+const props = defineProps<{ modelValue?: EchartsRenderer; includeInherit?: boolean }>()
+const emits = defineEmits(['update:modelValue'])
+
+const INHERIT_VALUE = 'inherit'
+
+const handleChange = (val: EchartsRenderer & typeof INHERIT_VALUE) => {
+  emits('update:modelValue', val === INHERIT_VALUE ? undefined : val)
+}
+
+const rendererList = [
+  {
+    value: 'svg',
+    desc: '在缩放场景下具有更好的表现'
+  },
+  {
+    value: 'canvas',
+    desc: '数据量较大（经验判断 > 1k）、较多交互时，建议选择'
+  },
+  ...(props.includeInherit
+    ? [
+        {
+          value: INHERIT_VALUE,
+          desc: '默认继承全局配置'
+        }
+      ]
+    : [])
+]
+</script>

src/components/Pages/ChartItemSetting/GlobalSetting.vue

@@ -1,4 +1,34 @@
 <template>
+  <collapse-item name="渲染器">
+    <setting-item-box :alone="true">
+      <template #name>
+        <n-text>全局</n-text>
+        <n-tooltip trigger="hover">
+          <template #trigger>
+            <n-icon size="21" :depth="3">
+              <help-outline-icon></help-outline-icon>
+            </n-icon>
+          </template>
+          <n-text>所有echarts图表组件默认都将采用所选的渲染器进行渲染</n-text>
+        </n-tooltip>
+      </template>
+      <EchartsRendererSetting v-model="themeSetting.renderer" />
+    </setting-item-box>
+    <setting-item-box :alone="true">
+      <template #name>
+        <n-text>当前</n-text>
+        <n-tooltip trigger="hover">
+          <template #trigger>
+            <n-icon size="21" :depth="3">
+              <help-outline-icon></help-outline-icon>
+            </n-icon>
+          </template>
+          <n-text>仅当前组件采用指定渲染器渲染</n-text>
+        </n-tooltip>
+      </template>
+      <EchartsRendererSetting v-model="optionData.renderer" includeInherit />
+    </setting-item-box>
+  </collapse-item>
   <collapse-item v-if="title" name="标题">
     <template #header>
       <n-switch v-model:value="title.show" size="small"></n-switch>
@@ -283,6 +313,11 @@ import { PropType, computed } from 'vue'
 import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 import { axisConfig } from '@/packages/chartConfiguration/echarts/index'
 import { CollapseItem, SettingItemBox, SettingItem, GlobalSettingPosition } from '@/components/Pages/ChartItemSetting'
+import { icon } from '@/plugins'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import EchartsRendererSetting from './EchartsRendererSetting.vue'
+
+const { HelpOutlineIcon } = icon.ionicons5
 
 const props = defineProps({
   optionData: {
@@ -296,6 +331,12 @@ const props = defineProps({
   }
 })
 
+const chartEditStore = useChartEditStore()
+const themeSetting = computed(() => {
+  const chartThemeSetting = chartEditStore.getEditCanvasConfig.chartThemeSetting
+  return chartThemeSetting
+})
+
 const title = computed(() => {
   return props.optionData.title
 })

src/components/Pages/ThemeColorSelect/index.vue

@@ -36,7 +36,7 @@
       </div>
       <div class="model-footer">
         中国色列表来自于：
-        <n-a href="http://zhongguose.com">http://zhongguose.com</n-a>
+        <n-a href="http://zhongguose.com" target="_blank">http://zhongguose.com</n-a>
       </div>
     </div>
   </n-modal>
@@ -157,6 +157,7 @@ $height: 85vh;
     }
   }
   .model-footer {
+    z-index: 1;
     text-align: end;
   }
 }

src/enums/editPageEnum.ts

@@ -12,7 +12,8 @@ export enum DragKeyEnum {
 // 不同页面保存操作
 export enum SavePageEnum {
   CHART = 'SaveChart',
-  JSON = 'SaveJSON'
+  JSON = 'SaveJSON',
+  CLOSE = 'close'
 }
 
 // 操作枚举

src/enums/eventEnum.ts

@@ -0,0 +1,59 @@
+// 基础事件类型(vue不加 on)
+export enum BaseEvent {
+  // 点击
+  ON_CLICK = 'click',
+  // 双击
+  ON_DBL_CLICK = 'dblclick',
+  // 移入
+  ON_MOUSE_ENTER = 'mouseenter',
+  // 移出
+  ON_MOUSE_LEAVE = 'mouseleave'
+}
+
+// 组件交互回调事件
+export enum InteractEvents {
+  INTERACT_ON = 'interactOn',
+  INTERACT_COMPONENT_ID = 'interactComponentId',
+  INTERACT_FN = 'interactFn'
+}
+
+// 全局组件交互回调事件触发的类型（当然可以自定义名称）
+export enum InteractEventOn {
+  CLICK = 'click',
+  CHANGE = 'change'
+}
+
+// 确定交互组件触发类型 key名称
+export const COMPONENT_INTERACT_EVENT_KET = 'componentInteractEventKey'
+
+// 交互式组件的触发配置
+export type InteractActionsType = {
+  interactType: InteractEventOn
+  interactName: string
+  componentEmitEvents: { [T: string]: { value: any; label: string }[] }
+}
+
+// vue3 生命周期事件
+export enum EventLife {
+  // 渲染之后
+  VNODE_MOUNTED = 'vnodeMounted',
+  // 渲染之前
+  VNODE_BEFORE_MOUNT = 'vnodeBeforeMount'
+}
+
+// 内置字符串函数对象列表
+export const excludeParseEventKeyList = [
+  EventLife.VNODE_BEFORE_MOUNT,
+  EventLife.VNODE_MOUNTED,
+  BaseEvent.ON_CLICK,
+  BaseEvent.ON_DBL_CLICK,
+  BaseEvent.ON_MOUSE_ENTER,
+  BaseEvent.ON_MOUSE_LEAVE,
+  //过滤器
+  'filter'
+]
+// 内置字符串函数键值列表
+export const excludeParseEventValueList = [
+  // 请求里的函数语句
+  'javascript:'
+]

src/hooks/index.ts

@@ -5,4 +5,5 @@ export * from '@/hooks/useChartDataFetch.hook'
 export * from '@/hooks/useSystemInit.hook'
 export * from '@/hooks/useChartDataPondFetch.hook'
 export * from '@/hooks/useLifeHandler.hook'
-export * from '@/hooks/useLang.hook'
+export * from '@/hooks/useLang.hook'
+export * from '@/hooks/useChartInteract.hook'

src/hooks/useCanvasInitOptions.hook.ts

@@ -0,0 +1,26 @@
+import { inject, type Ref } from 'vue'
+import { EchartsRenderer } from '@/settings/chartThemes'
+import { SCALE_KEY } from '@/views/preview/hooks/useScale.hook'
+import { use } from 'echarts/core'
+import { CanvasRenderer, SVGRenderer } from 'echarts/renderers'
+
+use([CanvasRenderer, SVGRenderer])
+
+type InitOptions = {
+  renderer: EchartsRenderer
+  devicePixelRatio?: number
+}
+
+// 获取需要给当前echarts组件设置什么初始值
+export function useCanvasInitOptions(option: any, themeSetting: any) {
+  const renderer = option.renderer || themeSetting.renderer
+  const initOptions: InitOptions = { renderer }
+  const scaleRef = inject<Ref<{ width: number; height: number }>>(SCALE_KEY) || { value: { width: 1, height: 1 } }
+
+  if (renderer === 'canvas') {
+    initOptions.devicePixelRatio = Math.ceil(
+      Math.max(window.devicePixelRatio, scaleRef.value.width, scaleRef.value.height)
+    )
+  }
+  return initOptions
+}

src/hooks/useChartDataFetch.hook.ts

@@ -1,4 +1,4 @@
-import { ref, toRefs, toRaw } from 'vue'
+import { ref, toRefs, toRaw, watch } from 'vue'
 import type VChart from 'vue-echarts'
 import { customizeHttp } from '@/api/http'
 import { useChartDataPondFetch } from '@/hooks/'
@@ -6,6 +6,7 @@ import { CreateComponentType, ChartFrameEnum } from '@/packages/index.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { RequestDataTypeEnum } from '@/enums/httpEnum'
 import { isPreview, newFunctionHandle, intervalUnitHandle } from '@/utils'
+import { setOption } from '@/packages/public/chart'
 
 // 获取类型
 type ChartEditStoreType = typeof useChartEditStore
@@ -34,7 +35,7 @@ export const useChartDataFetch = (
   const echartsUpdateHandle = (dataset: any) => {
     if (chartFrame === ChartFrameEnum.ECHARTS) {
       if (vChartRef.value) {
-        vChartRef.value.setOption({ dataset: dataset })
+        setOption(vChartRef.value, { dataset: dataset })
       }
     }
   }
@@ -86,8 +87,18 @@ export const useChartDataFetch = (
           }
         }
 
-        // 立即调用
-        fetchFn()
+        // 普通初始化与组件交互处理监听
+        watch(
+          () => targetComponent.request,
+          () => {
+            fetchFn()
+          },
+          {
+            immediate: true,
+            deep: true
+          }
+        )
+
         // 定时时间
         const time = targetInterval && targetInterval.value ? targetInterval.value : globalRequestInterval.value
         // 单位

src/hooks/useChartInteract.hook.ts

@@ -0,0 +1,40 @@
+import { toRefs } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+
+// 获取类型
+type ChartEditStoreType = typeof useChartEditStore
+
+// Params 参数修改触发 api 更新图表请求
+export const useChartInteract = (
+  chartConfig: CreateComponentType,
+  useChartEditStore: ChartEditStoreType,
+  param: { [T: string]: any },
+  interactEventOn: string
+) => {
+  const chartEditStore = useChartEditStore()
+  const { interactEvents } = chartConfig.events
+  const fnOnEvent = interactEvents.filter(item => {
+    return item.interactOn === interactEventOn
+  })
+
+  if (fnOnEvent.length === 0) return
+  fnOnEvent.forEach(item => {
+    const index = chartEditStore.fetchTargetIndex(item.interactComponentId)
+    if (index === -1) return
+    const { Params, Header } = toRefs(chartEditStore.componentList[index].request.requestParams)
+    Object.keys(item.interactFn).forEach(key => {
+      if (Params.value[key]) {
+        Params.value[key] = param[item.interactFn[key]]
+      }
+      if (Header.value[key]) {
+        Header.value[key] = param[item.interactFn[key]]
+      }
+    })
+  })
+}
+
+// 联动事件触发的 type 变更时，清除当前绑定内容
+export const clearInteractEvent = (chartConfig: CreateComponentType) => {
+
+}

src/hooks/useLifeHandler.hook.ts

@@ -1,4 +1,5 @@
-import { CreateComponentType, CreateComponentGroupType, EventLife, BaseEvent } from '@/packages/index.d'
+import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
+import { EventLife } from '@/enums/eventEnum'
 import * as echarts from 'echarts'
 
 // 所有图表组件集合对象

src/layout/components/LayoutHeader/index.vue

@@ -1,6 +1,6 @@
 <template>
   <n-layout-header bordered class="go-header">
-    <header class="go-header-box">
+    <header class="go-header-box" :class="{ 'is-project': isProject }">
       <div class="header-item left">
         <n-space>
           <slot name="left"></slot>
@@ -23,17 +23,29 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
 import { GoThemeSelect } from '@/components/GoThemeSelect'
 import { GoLangSelect } from '@/components/GoLangSelect'
 import { ThemeColorSelect } from '@/components/Pages/ThemeColorSelect'
+import { PageEnum } from '@/enums/pageEnum'
+
+const route = useRoute()
+
+const isProject = computed(() => {
+  return route.fullPath === PageEnum.BASE_HOME_ITEMS
+})
 </script>
 
 <style lang="scss" scoped>
-$min-width: 400px;
+$min-width: 520px;
 @include go(header) {
   &-box {
     display: grid;
-    grid-template-columns: repeat(3, 33.33%);
+    grid-template-columns: repeat(3, 33%);
+    &.is-project {
+      grid-template-columns: none;
+    }
     .header-item {
       display: flex;
       align-items: center;
@@ -49,7 +61,7 @@ $min-width: 400px;
       }
     }
     height: $--header-height;
-    padding: 0 60px;
+    padding: 0 20px 0 60px;
   }
 }
 </style>

src/main.ts

@@ -3,7 +3,7 @@ import App from './App.vue'
 import router, { setupRouter } from '@/router'
 import i18n from '@/i18n/index'
 import { setupStore } from '@/store'
-import { setupNaive, setupDirectives, setupCustomComponents } from '@/plugins'
+import { setupNaive, setupDirectives, setupCustomComponents, initFunction } from '@/plugins'
 import { GoAppProvider } from '@/components/GoAppProvider/index'
 import { setHtmlTheme } from '@/utils'
 
@@ -53,4 +53,7 @@ async function appInit() {
   window['$vue'] = app
 }
 
-void appInit()
+appInit().then(() => {
+  initFunction()
+})
+

src/packages/components/Charts/Bars/BarCommon/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/bar_x.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const BarCommonConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.BAR,
   package: PackagesCategoryEnum.CHARTS,
   chartFrame: ChartFrameEnum.ECHARTS,
-  image
+  image: 'bar_x.png'
 }

src/packages/components/Charts/Bars/BarCommon/index.vue

@@ -1,6 +1,7 @@
 <template>
   <v-chart
     ref="vChartRef"
+    :init-options="initOptions"
     :theme="themeColor"
     :option="option"
     :manual-update="isPreview()"
@@ -14,6 +15,7 @@
 <script setup lang="ts">
 import { ref, nextTick, computed, watch, PropType } 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'
@@ -41,6 +43,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([DatasetComponent, CanvasRenderer, BarChart, GridComponent, TooltipComponent, LegendComponent])
 
 const replaceMergeArr = ref<string[]>()

src/packages/components/Charts/Bars/BarCrossrange/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/bar_y.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const BarCrossrangeConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.BAR,
   package: PackagesCategoryEnum.CHARTS,
   chartFrame: ChartFrameEnum.ECHARTS,
-  image
+  image: 'bar_y.png'
 }

src/packages/components/Charts/Bars/BarCrossrange/index.vue

@@ -1,6 +1,7 @@
 <template>
   <v-chart
     ref="vChartRef"
+    :init-options="initOptions"
     :theme="themeColor"
     :option="option"
     :manual-update="isPreview()"
@@ -14,6 +15,7 @@
 <script setup lang="ts">
 import { ref, nextTick, computed, watch, PropType } 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'
@@ -40,6 +42,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([DatasetComponent, CanvasRenderer, BarChart, GridComponent, TooltipComponent, LegendComponent])
 
 const replaceMergeArr = ref<string[]>()

src/packages/components/Charts/Bars/CapsuleChart/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/capsule.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const CapsuleChartConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.BAR,
   package: PackagesCategoryEnum.CHARTS,
   chartFrame: ChartFrameEnum.COMMON,
-  image
+  image: 'capsule.png'
 }

src/packages/components/Charts/Bars/CapsuleChart/index.vue

@@ -122,23 +122,28 @@ const calcData = (data: any, type?: string) => {
 
 // 数据解析
 const calcCapsuleLengthAndLabelData = (dataset: any) => {
-  const { source } = dataset
-  if (!source.length) return
+  try {
+    const { source } = dataset
+    if (!source || !source.length) return
 
-  state.capsuleItemHeight = numberSizeHandle(state.mergedConfig.itemHeight)
-  const capsuleValue = source.map((item: DataProps) => item[state.mergedConfig.dataset.dimensions[1]])
+    state.capsuleItemHeight = numberSizeHandle(state.mergedConfig.itemHeight)
+    const capsuleValue = source.map((item: DataProps) => item[state.mergedConfig.dataset.dimensions[1]])
 
-  const maxValue = Math.max(...capsuleValue)
+    const maxValue = Math.max(...capsuleValue)
 
-  state.capsuleValue = capsuleValue
+    state.capsuleValue = capsuleValue
 
-  state.capsuleLength = capsuleValue.map((v: any) => (maxValue ? v / maxValue : 0))
+    state.capsuleLength = capsuleValue.map((v: any) => (maxValue ? v / maxValue : 0))
 
-  const oneFifth = maxValue / 5
+    const oneFifth = maxValue / 5
 
-  const labelData = Array.from(new Set(new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth))))
+    const labelData = Array.from(new Set(new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth))))
 
-  state.labelData = labelData
+    state.labelData = labelData
+
+  } catch (error) {
+    console.warn(error);
+  }
 }
 
 const numberSizeHandle = (val: string | number) => {

src/packages/components/Charts/Lines/LineCommon/config.ts

@@ -1,7 +1,6 @@
 import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
 import { LineCommonConfig } from './index'
 import { CreateComponentType } from '@/packages/index.d'
-import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
 import cloneDeep from 'lodash/cloneDeep'
 import dataJson from './data.json'
 

src/packages/components/Charts/Lines/LineCommon/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/line.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const LineCommonConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.LINE,
   package: PackagesCategoryEnum.CHARTS,
   chartFrame: ChartFrameEnum.ECHARTS,
-  image
+  image: 'line.png'
 }

src/packages/components/Charts/Lines/LineCommon/index.vue

@@ -1,6 +1,7 @@
 <template>
   <v-chart
     ref="vChartRef"
+    :init-options="initOptions"
     :theme="themeColor"
     :option="option"
     :manual-update="isPreview()"
@@ -15,6 +16,7 @@
 <script setup lang="ts">
 import { PropType, computed, watch, ref, nextTick } from 'vue'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { LineChart } from 'echarts/charts'
@@ -41,6 +43,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
 
 const replaceMergeArr = ref<string[]>()

src/packages/components/Charts/Lines/LineGradientSingle/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/line_gradient_single.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const LineGradientSingleConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.LINE,
   package: PackagesCategoryEnum.CHARTS,
   chartFrame: ChartFrameEnum.ECHARTS,
-  image
+  image: 'line_gradient_single.png'
 }

src/packages/components/Charts/Lines/LineGradientSingle/index.vue

@@ -1,11 +1,12 @@
 <template>
-  <v-chart ref="vChartRef" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
   </v-chart>
 </template>
 
 <script setup lang="ts">
 import { reactive, watch, PropType } from 'vue'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use, graphic } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { LineChart } from 'echarts/charts'
@@ -15,7 +16,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
 import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import { useChartDataFetch } from '@/hooks'
-import { isPreview } from '@/utils'
+import { isPreview, colorGradientCustomMerge} from '@/utils'
 
 const props = defineProps({
   themeSetting: {
@@ -32,6 +33,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
 const chartEditStore = useChartEditStore()
 
@@ -45,7 +48,9 @@ watch(
   (newColor: keyof typeof chartColorsSearch) => {
     try {
       if (!isPreview()) {
-        const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
+        const themeColor =
+          colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[newColor] ||
+          colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[defaultTheme]
         props.chartConfig.option.series.forEach((value: any, index: number) => {
           value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
             {

src/packages/components/Charts/Lines/LineGradients/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/line_gradient.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const LineGradientsConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.LINE,
   package: PackagesCategoryEnum.CHARTS,
   chartFrame: ChartFrameEnum.ECHARTS,
-  image
+  image: 'line_gradient.png'
 }

src/packages/components/Charts/Lines/LineGradients/index.vue

@@ -1,10 +1,11 @@
 <template>
-  <v-chart ref="vChartRef" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize></v-chart>
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize></v-chart>
 </template>
 
 <script setup lang="ts">
 import { reactive, watch, PropType } from 'vue'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use, graphic } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { LineChart } from 'echarts/charts'
@@ -14,7 +15,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
 import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import { useChartDataFetch } from '@/hooks'
-import { isPreview } from '@/utils'
+import { isPreview, colorGradientCustomMerge} from '@/utils'
 
 const props = defineProps({
   themeSetting: {
@@ -31,6 +32,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
 const chartEditStore = useChartEditStore()
 
@@ -44,7 +47,9 @@ watch(
   (newColor: keyof typeof chartColorsSearch) => {
     try {
       if (!isPreview()) {
-        const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
+        const themeColor =
+          colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[newColor] ||
+          colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[defaultTheme]
         props.chartConfig.option.series.forEach((value: any, index: number) => {
           value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
             {

src/packages/components/Charts/Lines/LineLinearSingle/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/line_linear_single.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const LineLinearSingleConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.LINE,
   package: PackagesCategoryEnum.CHARTS,
   chartFrame: ChartFrameEnum.ECHARTS,
-  image
+  image: 'line_linear_single.png'
 }

src/packages/components/Charts/Lines/LineLinearSingle/index.vue

@@ -1,11 +1,12 @@
 <template>
-  <v-chart ref="vChartRef" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
   </v-chart>
 </template>
 
 <script setup lang="ts">
 import { PropType, watch, reactive } from 'vue'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { LineChart } from 'echarts/charts'
@@ -15,7 +16,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
 import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import { useChartDataFetch } from '@/hooks'
-import { isPreview } from '@/utils'
+import { isPreview, colorGradientCustomMerge } from '@/utils'
 
 const props = defineProps({
   themeSetting: {
@@ -32,6 +33,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
 
 const chartEditStore = useChartEditStore()
@@ -45,7 +48,9 @@ watch(
   (newColor: keyof typeof chartColorsSearch) => {
     try {
       if (!isPreview()) {
-        const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
+        const themeColor =
+          colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[newColor] ||
+          colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[defaultTheme]
         props.chartConfig.option.series.forEach((value: any) => {
           value.lineStyle.shadowColor = themeColor[2]
           value.lineStyle.color.colorStops.forEach((v: { color: string }, i: number) => {

src/packages/components/Charts/Maps/MapAmap/index.ts

@@ -1,5 +1,4 @@
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
-import image from '@/assets/images/chart/charts/map_amap.png'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const MapAmapConfig: ConfigType = {
@@ -11,5 +10,5 @@ export const MapAmapConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.MAP,
   package: PackagesCategoryEnum.CHARTS,
   chartFrame: ChartFrameEnum.COMMON,
-  image
+  image: 'map_amap.png'
 }

src/packages/components/Charts/Maps/MapBase/index.ts

@@ -1,5 +1,4 @@
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
-import image from '@/assets/images/chart/charts/map.png'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const MapBaseConfig: ConfigType = {
@@ -11,5 +10,5 @@ export const MapBaseConfig: ConfigType = {
     categoryName: ChatCategoryEnumName.MAP,
     package: PackagesCategoryEnum.CHARTS,
     chartFrame: ChartFrameEnum.COMMON,
-    image
-  }
+    image: 'map.png'
+}

src/packages/components/Charts/Maps/MapBase/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-chart ref="vChartRef" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
   </v-chart>
 </template>
 
@@ -7,11 +7,12 @@
 import { PropType, reactive, watch, ref, nextTick } from 'vue'
 import config, { includes } from './config'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use, registerMap } from 'echarts/core'
 import { EffectScatterChart, MapChart } from 'echarts/charts'
 import { CanvasRenderer } from 'echarts/renderers'
 import { useChartDataFetch } from '@/hooks'
-import { mergeTheme } from '@/packages/public/chart'
+import { mergeTheme, setOption } from '@/packages/public/chart'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { isPreview } from '@/utils'
 import mapJsonWithoutHainanIsLands from './mapWithoutHainanIsLands.json'
@@ -32,6 +33,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([
   MapChart,
   DatasetComponent,
@@ -59,13 +62,14 @@ const getGeojson = (regionId: string) => {
 }
 
 //异步时先注册空的 保证初始化不报错
-registerMap(props.chartConfig.option.mapRegion.adcode, { geoJSON: {} as any, specialAreas: {} })
+registerMap(`${props.chartConfig.option.mapRegion.adcode}`, { geoJSON: {} as any, specialAreas: {} })
 
 // 进行更换初始化地图 如果为china 单独处理
 const registerMapInitAsync = async () => {
   await nextTick()
-  if (props.chartConfig.option.mapRegion.adcode != 'china') {
-    await getGeojson(props.chartConfig.option.mapRegion.adcode)
+  const adCode = `${props.chartConfig.option.mapRegion.adcode}`;
+  if (adCode !== 'china') {
+    await getGeojson(adCode)
   } else {
     await hainanLandsHandle(props.chartConfig.option.mapRegion.showHainanIsLands)
   }
@@ -76,7 +80,7 @@ registerMapInitAsync()
 // 手动触发渲染
 const vEchartsSetOption = () => {
   option.value = props.chartConfig.option
-  vChartRef.value?.setOption(props.chartConfig.option)
+  setOption(vChartRef.value, props.chartConfig.option)
 }
 
 // 更新数据处理
@@ -127,7 +131,7 @@ watch(
 
 //监听地图展示区域发生变化
 watch(
-  () => props.chartConfig.option.mapRegion.adcode,
+  () => `${props.chartConfig.option.mapRegion.adcode}`,
   async newData => {
     try {
       await getGeojson(newData)

src/packages/components/Charts/Mores/Funnel/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/funnel.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const FunnelConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.CHARTS,
   chartFrame: ChartFrameEnum.ECHARTS,
-  image
+  image: 'funnel.png'
 }

src/packages/components/Charts/Mores/Funnel/index.vue

@@ -1,10 +1,11 @@
 <template>
-  <v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
 </template>
 
 <script setup lang="ts">
 import { computed, PropType } from 'vue'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { FunnelChart } from 'echarts/charts'
@@ -31,6 +32,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([DatasetComponent, CanvasRenderer, FunnelChart, GridComponent, TooltipComponent, LegendComponent])
 
 const option = computed(() => {

src/packages/components/Charts/Mores/Heatmap/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/heatmap.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const HeatmapConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.CHARTS,
   chartFrame: ChartFrameEnum.COMMON,
-  image
+  image: 'heatmap.png'
 }

src/packages/components/Charts/Mores/Heatmap/index.vue

@@ -1,16 +1,17 @@
 <template>
-  <v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
 </template>
 
 <script setup lang="ts">
 import { ref, watch, computed, PropType } from 'vue'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import dataJson from './data.json'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { HeatmapChart } from 'echarts/charts'
 import { includes } from './config'
-import { mergeTheme } from '@/packages/public/chart'
+import { mergeTheme, setOption } from '@/packages/public/chart'
 import { useChartDataFetch } from '@/hooks'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
@@ -38,6 +39,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([
   DatasetComponent,
   CanvasRenderer,
@@ -68,7 +71,7 @@ const dataSetHandle = (dataset: typeof dataJson) => {
     props.chartConfig.option.series[0].data = seriesData
   }
   if (vChartRef.value && isPreview()) {
-    vChartRef.value.setOption(props.chartConfig.option)
+    setOption(vChartRef.value, props.chartConfig.option)
   }
 }
 

src/packages/components/Charts/Mores/Process/index.ts

@@ -1,5 +1,3 @@
-// 展示图片
-import image from '@/assets/images/chart/charts/process.png'
 // 公共类型声明
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 // 当前[信息模块]分类声明
@@ -21,5 +19,5 @@ export const ProcessConfig: ConfigType = {
   // 包分类
   package: PackagesCategoryEnum.CHARTS,
   // 图片
-  image: image
+  image: 'process.png'
 }

src/packages/components/Charts/Mores/Radar/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/radar.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const RadarConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.CHARTS,
   chartFrame: ChartFrameEnum.COMMON,
-  image
+  image: 'radar.png'
 }

src/packages/components/Charts/Mores/Radar/index.vue

@@ -1,16 +1,17 @@
 <template>
-  <v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()" 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 dataJson from './data.json'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { RadarChart } from 'echarts/charts'
 import { includes } from './config'
-import { mergeTheme } from '@/packages/public/chart'
+import { mergeTheme, setOption } from '@/packages/public/chart'
 import { useChartDataFetch } from '@/hooks'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
@@ -32,6 +33,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([DatasetComponent, CanvasRenderer, RadarChart, GridComponent, TooltipComponent, LegendComponent])
 
 const vChartRef = ref<typeof VChart>()
@@ -50,7 +53,7 @@ const dataSetHandle = (dataset: typeof dataJson) => {
     props.chartConfig.option.radar.indicator = dataset.radarIndicator
   }
   if (vChartRef.value && isPreview()) {
-    vChartRef.value.setOption(props.chartConfig.option)
+    setOption(vChartRef.value, props.chartConfig.option)
   }
 }
 

src/packages/components/Charts/Mores/TreeMap/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/tree_map.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const TreeMapConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.CHARTS,
   chartFrame: ChartFrameEnum.COMMON,
-  image
+  image: 'tree_map.png'
 }

src/packages/components/Charts/Mores/TreeMap/index.vue

@@ -1,16 +1,17 @@
 <template>
-  <v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()" 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 dataJson from './data.json'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { TreemapChart } from 'echarts/charts'
 import { includes } from './config'
-import { mergeTheme } from '@/packages/public/chart'
+import { mergeTheme, setOption } from '@/packages/public/chart'
 import { useChartDataFetch } from '@/hooks'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
@@ -31,6 +32,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([CanvasRenderer, TreemapChart])
 
 const vChartRef = ref<typeof VChart>()
@@ -42,7 +45,7 @@ const option = computed(() => {
 const dataSetHandle = (dataset: typeof dataJson) => {
   if (dataset) {
     props.chartConfig.option.series[0].data = dataset
-    vChartRef.value?.setOption(props.chartConfig.option)
+    setOption(vChartRef.value, props.chartConfig.option)
   }
 }
 

src/packages/components/Charts/Mores/WaterPolo/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/water_WaterPolo.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const WaterPoloConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.CHARTS,
   chartFrame: ChartFrameEnum.COMMON,
-  image
+  image: 'water_WaterPolo.png'
 }

src/packages/components/Charts/Mores/WaterPolo/index.vue

@@ -1,16 +1,17 @@
 <template>
-  <v-chart :theme="themeColor" :option="option.value" autoresize></v-chart>
+  <v-chart :theme="themeColor" :init-options="initOptions" :option="option.value" autoresize></v-chart>
 </template>
 
 <script setup lang="ts">
 import { PropType, watch, reactive } from 'vue'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use } from 'echarts/core'
 import 'echarts-liquidfill/src/liquidFill.js'
 import { CanvasRenderer } from 'echarts/renderers'
 import { GridComponent } from 'echarts/components'
 import config from './config'
-import { isPreview, isString, isNumber } from '@/utils'
+import { isPreview, isString, isNumber, colorGradientCustomMerge } from '@/utils'
 import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useChartDataFetch } from '@/hooks'
@@ -30,6 +31,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([CanvasRenderer, GridComponent])
 
 const chartEditStore = useChartEditStore()
@@ -44,7 +47,9 @@ watch(
   (newColor: keyof typeof chartColorsSearch) => {
     try {
       if (!isPreview()) {
-        const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
+        const themeColor =
+          colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[newColor] ||
+          colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[defaultTheme]
         // 背景颜色
         props.chartConfig.option.series[0].backgroundStyle.color = themeColor[2]
         // 水球颜色

src/packages/components/Charts/Pies/PieCircle/index.ts

@@ -11,5 +11,5 @@ export const PieCircleConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.PIE,
   package: PackagesCategoryEnum.CHARTS,
   chartFrame: ChartFrameEnum.ECHARTS,
-  image
+  image: 'pie-circle.png'
 }

src/packages/components/Charts/Pies/PieCircle/index.vue

@@ -1,10 +1,11 @@
 <template>
-  <v-chart :theme="themeColor" :option="option.value" autoresize> </v-chart>
+  <v-chart :theme="themeColor" :init-options="initOptions" :option="option.value" autoresize> </v-chart>
 </template>
 
 <script setup lang="ts">
 import { PropType, reactive, 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 { PieChart } from 'echarts/charts'
@@ -29,6 +30,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([DatasetComponent, CanvasRenderer, PieChart, GridComponent, TooltipComponent, LegendComponent, TitleComponent])
 
 const option = reactive({

src/packages/components/Charts/Pies/PieCommon/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/pie.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const PieCommonConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.PIE,
   package: PackagesCategoryEnum.CHARTS,
   chartFrame: ChartFrameEnum.ECHARTS,
-  image
+  image: 'pie.png'
 }

src/packages/components/Charts/Pies/PieCommon/index.vue

@@ -1,10 +1,11 @@
 <template>
-  <v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
 </template>
 
 <script setup lang="ts">
 import { computed, PropType, reactive, 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 { PieChart } from 'echarts/charts'
@@ -30,6 +31,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([DatasetComponent, CanvasRenderer, PieChart, GridComponent, TooltipComponent, LegendComponent])
 
 const option = computed(() => {

src/packages/components/Charts/Scatters/ScatterCommon/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/scatter-multi.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const ScatterCommonConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.SCATTER,
   package: PackagesCategoryEnum.CHARTS,
   chartFrame: ChartFrameEnum.ECHARTS,
-  image
+  image: 'scatter-multi.png'
 }

src/packages/components/Charts/Scatters/ScatterCommon/index.vue

@@ -1,6 +1,7 @@
 <template>
   <v-chart
     ref="vChartRef"
+    :init-options="initOptions"
     :theme="themeColor"
     :option="option"
     :manual-update="isPreview()"
@@ -13,6 +14,7 @@
 <script setup lang="ts">
 import { PropType, computed, watch, ref, nextTick } from 'vue'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { ScatterChart, EffectScatterChart } from 'echarts/charts'
@@ -46,6 +48,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([
   DatasetComponent,
   CanvasRenderer,

src/packages/components/Charts/Scatters/ScatterLogarithmicRegression/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/scatter-logarithmic-regression.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const ScatterLogarithmicRegressionConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.SCATTER,
   package: PackagesCategoryEnum.CHARTS,
   chartFrame: ChartFrameEnum.ECHARTS,
-  image
+  image: 'scatter-logarithmic-regression.png'
 }

src/packages/components/Charts/Scatters/ScatterLogarithmicRegression/index.vue

@@ -1,6 +1,7 @@
 <template>
   <v-chart
     ref="vChartRef"
+    :init-options="initOptions"
     :theme="themeColor"
     :option="option"
     :manual-update="isPreview()"
@@ -13,6 +14,7 @@
 <script setup lang="ts">
 import { PropType, computed, ref } from 'vue'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import ecStat from 'echarts-stat'
 import { use, registerTransform } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
@@ -47,6 +49,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([
   DatasetComponent,
   CanvasRenderer,

src/packages/components/Decorates/Borders/Border01/index.ts

@@ -1,5 +1,4 @@
-import image from '@/assets/images/chart/decorates/border01.png'
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const Border01Config: ConfigType = {
@@ -10,5 +9,6 @@ export const Border01Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'border01.png'
 }

src/packages/components/Decorates/Borders/Border02/index.ts

@@ -1,5 +1,4 @@
-import image from '@/assets/images/chart/decorates/border02.png'
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum} from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const Border02Config: ConfigType = {
@@ -10,5 +9,6 @@ export const Border02Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'border02.png'
 }

src/packages/components/Decorates/Borders/Border03/index.ts

@@ -1,5 +1,4 @@
-import image from '@/assets/images/chart/decorates/border03.png'
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const Border03Config: ConfigType = {
@@ -10,5 +9,6 @@ export const Border03Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'border03.png'
 }

src/packages/components/Decorates/Borders/Border04/index.ts

@@ -1,5 +1,4 @@
-import image from '@/assets/images/chart/decorates/border04.png'
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const Border04Config: ConfigType = {
@@ -10,5 +9,6 @@ export const Border04Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'border04.png'
 }

src/packages/components/Decorates/Borders/Border05/index.ts

@@ -1,5 +1,4 @@
-import image from '@/assets/images/chart/decorates/border05.png'
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const Border05Config: ConfigType = {
@@ -10,5 +9,6 @@ export const Border05Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'border05.png'
 }

src/packages/components/Decorates/Borders/Border06/index.ts

@@ -1,5 +1,4 @@
-import image from '@/assets/images/chart/decorates/border06.png'
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const Border06Config: ConfigType = {
@@ -10,5 +9,6 @@ export const Border06Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'border06.png'
 }

src/packages/components/Decorates/Borders/Border07/index.ts

@@ -1,5 +1,4 @@
-import image from '@/assets/images/chart/decorates/border07.png'
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const Border07Config: ConfigType = {
@@ -10,5 +9,6 @@ export const Border07Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'border07.png'
 }

src/packages/components/Decorates/Borders/Border08/index.ts

@@ -1,5 +1,4 @@
-import image from '@/assets/images/chart/decorates/border08.png'
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const Border08Config: ConfigType = {
@@ -10,5 +9,6 @@ export const Border08Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'border08.png'
 }

src/packages/components/Decorates/Borders/Border09/index.ts

@@ -1,5 +1,4 @@
-import image from '@/assets/images/chart/decorates/border09.png'
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const Border09Config: ConfigType = {
@@ -10,5 +9,6 @@ export const Border09Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'border09.png'
 }

src/packages/components/Decorates/Borders/Border10/index.ts

@@ -1,5 +1,4 @@
-import image from '@/assets/images/chart/decorates/border10.png'
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const Border10Config: ConfigType = {
@@ -10,5 +9,6 @@ export const Border10Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'border10.png'
 }

src/packages/components/Decorates/Borders/Border11/index.ts

@@ -1,5 +1,4 @@
-import image from '@/assets/images/chart/decorates/border11.png'
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const Border11Config: ConfigType = {
@@ -10,5 +9,6 @@ export const Border11Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'border11.png'
 }

src/packages/components/Decorates/Borders/Border12/index.ts

@@ -1,5 +1,4 @@
-import image from '@/assets/images/chart/decorates/border12.png'
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const Border12Config: ConfigType = {
@@ -10,5 +9,6 @@ export const Border12Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'border12.png'
 }

src/packages/components/Decorates/Borders/Border13/index.ts

@@ -1,5 +1,4 @@
-import image from '@/assets/images/chart/decorates/border13.png'
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const Border13Config: ConfigType = {
@@ -10,5 +9,6 @@ export const Border13Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'border13.png'
 }

src/packages/components/Decorates/Decorates/Decorates01/index.ts

@@ -1,5 +1,4 @@
-import image from '@/assets/images/chart/decorates/decorates01.png'
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
 
 export const Decorates01Config: ConfigType = {
@@ -10,5 +9,6 @@ export const Decorates01Config: ConfigType = {
   category: ChatCategoryEnum.DECORATE,
   categoryName: ChatCategoryEnumName.DECORATE,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'decorates01.png'
 }

src/packages/components/Decorates/Decorates/Decorates02/index.ts

@@ -1,5 +1,4 @@
-import image from '@/assets/images/chart/decorates/decorates02.png'
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
 
 export const Decorates02Config: ConfigType = {
@@ -10,5 +9,6 @@ export const Decorates02Config: ConfigType = {
   category: ChatCategoryEnum.DECORATE,
   categoryName: ChatCategoryEnumName.DECORATE,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'decorates02.png'
 }

src/packages/components/Decorates/Decorates/Decorates03/index.ts

@@ -1,5 +1,4 @@
-import image from '@/assets/images/chart/decorates/decorates03.png'
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const Decorates03Config: ConfigType = {
@@ -10,5 +9,6 @@ export const Decorates03Config: ConfigType = {
   category: ChatCategoryEnum.DECORATE,
   categoryName: ChatCategoryEnumName.DECORATE,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'decorates03.png'
 }

src/packages/components/Decorates/Decorates/Decorates04/index.ts

@@ -1,5 +1,4 @@
-import image from '@/assets/images/chart/decorates/decorates04.png'
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const Decorates04Config: ConfigType = {
@@ -10,5 +9,6 @@ export const Decorates04Config: ConfigType = {
   category: ChatCategoryEnum.DECORATE,
   categoryName: ChatCategoryEnumName.DECORATE,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'decorates04.png'
 }

src/packages/components/Decorates/Decorates/Decorates05/index.ts

@@ -1,5 +1,4 @@
-import image from '@/assets/images/chart/decorates/decorates05.png'
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const Decorates05Config: ConfigType = {
@@ -10,5 +9,6 @@ export const Decorates05Config: ConfigType = {
   category: ChatCategoryEnum.DECORATE,
   categoryName: ChatCategoryEnumName.DECORATE,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'decorates05.png'
 }

src/packages/components/Decorates/Decorates/Decorates06/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/decorates06.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -10,6 +9,6 @@ export const Decorates06Config: ConfigType = {
   category: ChatCategoryEnum.DECORATE,
   categoryName: ChatCategoryEnumName.DECORATE,
   package: PackagesCategoryEnum.DECORATES,
-  chartFrame: ChartFrameEnum.COMMON,
-  image
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'decorates06.png'
 }

src/packages/components/Decorates/Mores/Clock/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/clock.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const ClockConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.DECORATES,
   chartFrame: ChartFrameEnum.STATIC,
-  image
+  image: 'clock.png'
 }

src/packages/components/Decorates/Mores/CountDown/index.ts

@@ -1,5 +1,4 @@
-import image from '@/assets/images/chart/decorates/countdown.png'
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const CountDownConfig: ConfigType = {
@@ -10,5 +9,6 @@ export const CountDownConfig: ConfigType = {
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'countdown.png'
 }

src/packages/components/Decorates/Mores/FlipperNumber/index.ts

@@ -1,5 +1,4 @@
-import image from '@/assets/images/chart/decorates/flipper-number.png'
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const FlipperNumberConfig: ConfigType = {
@@ -10,5 +9,6 @@ export const FlipperNumberConfig: ConfigType = {
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'flipper-number.png'
 }

src/packages/components/Decorates/Mores/Number/index.ts

@@ -1,5 +1,4 @@
-import image from '@/assets/images/chart/decorates/number.png'
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const NumberConfig: ConfigType = {
@@ -10,5 +9,6 @@ export const NumberConfig: ConfigType = {
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'number.png'
 }

src/packages/components/Decorates/Mores/TimeCommon/index.ts

@@ -1,5 +1,4 @@
-import image from '@/assets/images/chart/decorates/time.png'
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
 
 export const TimeCommonConfig: ConfigType = {
@@ -10,5 +9,6 @@ export const TimeCommonConfig: ConfigType = {
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'time.png'
 }

src/packages/components/Decorates/Mores/TimeCommon/index.vue

@@ -26,7 +26,7 @@ let yearMonthDay = ref('2021-2-3')
 let nowData = ref('08:00:00')
 let newData = ref('2021-2-3 08:00:00')
 let boxShadow = ref('none')
-
+let timer: any = null
 const { w, h } = toRefs(props.chartConfig.attr)
 
 let {
@@ -60,7 +60,7 @@ watch(
   }
 )
 onMounted(() => {
-  const timer = setInterval(() => {
+  timer = setInterval(() => {
     var datetime = new Date()
     var year = datetime.getFullYear()
     var month = datetime.getMonth() + 1 < 10 ? '0' + (datetime.getMonth() + 1) : datetime.getMonth() + 1
@@ -81,7 +81,7 @@ onMounted(() => {
   }, 500)
 })
 onUnmounted(() => {
-  clearInterval()
+  clearInterval(timer)
 })
 useChartDataFetch(props.chartConfig, useChartEditStore)
 </script>

src/packages/components/Decorates/Three/ThreeEarth01/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/threeEarth01.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -10,6 +9,6 @@ export const ThreeEarth01Config: ConfigType = {
   category: ChatCategoryEnum.THREE,
   categoryName: ChatCategoryEnumName.THREE,
   package: PackagesCategoryEnum.DECORATES,
-  chartFrame: ChartFrameEnum.STATIC,
-  image
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'threeEarth01.png'
 }

src/packages/components/Decorates/Three/ThreeEarth01/index.vue

@@ -66,7 +66,7 @@ watch(
 // DOM 渲染之后进行初始化
 onMounted(() => {
   try {
-    if (navigator.userAgent.indexOf('Chrome') < -1 || navigator.userAgent.indexOf('Edg') > -1) {
+    if (navigator.userAgent.indexOf('Chrome') < -1 || navigator.userAgent.indexOf('Edg') < -1) {
       window['$message'].error('三维地图组件仅在【谷歌】浏览器上能正常展示！')
       chartEditStore.removeComponentList(undefined, false)
       return

src/packages/components/Informations/Inputs/InputsDate/config.ts

@@ -0,0 +1,24 @@
+import dayjs from 'dayjs'
+import cloneDeep from 'lodash/cloneDeep'
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { chartInitConfig } from '@/settings/designSetting'
+import { COMPONENT_INTERACT_EVENT_KET } from '@/enums/eventEnum'
+import { interactActions, ComponentInteractEventEnum } from './interact'
+import { InputsDateConfig } from './index'
+
+export const option = {
+  // 时间组件展示类型，必须和 interactActions 中定义的数据一致
+  [COMPONENT_INTERACT_EVENT_KET]: ComponentInteractEventEnum.DATE,
+  // 下拉展示
+  isPanel: 0,
+  dataset: dayjs().valueOf()
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = InputsDateConfig.key
+  public attr = { ...chartInitConfig, w: 260, h: 32, zIndex: -1 }
+  public chartConfig = cloneDeep(InputsDateConfig)
+  public interactActions = interactActions
+  public option = cloneDeep(option)
+}

src/packages/components/Informations/Inputs/InputsDate/config.vue

@@ -0,0 +1,98 @@
+<template>
+  <collapse-item name="展示方式" :expanded="true">
+    <setting-item-box name="选择方式">
+      <n-select
+        v-model:value="optionData.isPanel"
+        size="small"
+        :options="panelOptions"
+      />
+    </setting-item-box>
+  </collapse-item>
+
+  <collapse-item name="时间配置" :expanded="true">
+    <setting-item-box name="基础">
+      <setting-item name="类型">
+        <n-select
+          v-model:value="optionData.componentInteractEventKey"
+          size="small"
+          :options="datePickerTypeOptions"
+        />
+      </setting-item>
+    </setting-item-box>
+
+    <setting-item-box name="默认值" :alone="true">
+      <n-date-picker
+        size="small"
+        v-model:value="optionData.dataset"
+        :type="optionData.componentInteractEventKey"
+      />
+    </setting-item-box>
+  </collapse-item>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue'
+import { icon } from '@/plugins'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+import { ComponentInteractEventEnum } from './interact'
+
+const { HelpOutlineIcon } = icon.ionicons5
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+const panelOptions = [
+  {
+    label: '下拉展示',
+    value: 0
+  },
+  {
+    label: '面板展示',
+    value: 1
+  }
+]
+
+const datePickerTypeOptions = [
+  {
+    label: '日期',
+    value: ComponentInteractEventEnum.DATE
+  },
+  {
+    label: '日期时间',
+    value: ComponentInteractEventEnum.DATE_TIME
+  },
+  {
+    label: '日期范围',
+    value: ComponentInteractEventEnum.DATE_RANGE
+  },
+  {
+    label: '月份',
+    value: ComponentInteractEventEnum.MONTH
+  },
+  {
+    label: '月份范围',
+    value: ComponentInteractEventEnum.MONTH_RANGE
+  },
+  {
+    label: '年份',
+    value: ComponentInteractEventEnum.YEAR
+  },
+  {
+    label: '年份范围',
+    value: ComponentInteractEventEnum.YEAR_RANGE
+  },
+  {
+    label: '季度',
+    value: ComponentInteractEventEnum.QUARTER
+  },
+  {
+    label: '季度范围',
+    value: ComponentInteractEventEnum.QUARTER_RANGE
+  }
+]
+</script>

src/packages/components/Informations/Inputs/InputsDate/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const InputsDateConfig: ConfigType = {
+  key: 'InputsDate',
+  chartKey: 'VInputsDate',
+  conKey: 'VCInputsDate',
+  title: '时间选择器',
+  category: ChatCategoryEnum.INPUTS,
+  categoryName: ChatCategoryEnumName.INPUTS,
+  package: PackagesCategoryEnum.INFORMATIONS,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'inputs_date.png'
+}

src/packages/components/Informations/Inputs/InputsDate/index.vue

@@ -0,0 +1,81 @@
+<template>
+  <n-date-picker
+    v-model:value="option.dataset"
+    :panel="!!chartConfig.option.isPanel"
+    :type="chartConfig.option.componentInteractEventKey"
+    :style="`width:${w}px;`"
+    @update:value="onChange"
+  />
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, ref, shallowReactive, watch } from 'vue'
+import dayjs from 'dayjs'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartInteract } from '@/hooks'
+import { InteractEventOn } from '@/enums/eventEnum'
+import { ComponentInteractParamsEnum } from './interact'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const rangeDate = ref<number | number[]>()
+
+const option = shallowReactive({
+  dataset: props.chartConfig.option.dataset
+})
+
+// 监听事件改变
+const onChange = (v: number | number[]) => {
+  if (v instanceof Array) {
+    // 存储到联动数据
+    useChartInteract(
+      props.chartConfig,
+      useChartEditStore,
+      {
+        [ComponentInteractParamsEnum.DATE_START]: v[0] | dayjs().valueOf(),
+        [ComponentInteractParamsEnum.DATE_END]: v[1] | dayjs().valueOf(),
+        [ComponentInteractParamsEnum.DATE_RANGE]: `${v[0]}-${v[1]}`
+      },
+      InteractEventOn.CHANGE
+    )
+  } else {
+    // 存储到联动数据
+    useChartInteract(
+      props.chartConfig,
+      useChartEditStore,
+      { [ComponentInteractParamsEnum.DATE]: v },
+      InteractEventOn.CHANGE
+    )
+  }
+}
+
+// 手动更新
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData: number | number[]) => {
+    option.dataset = newData
+    // 关联目标组件首次请求带上默认内容
+    onChange(newData)
+  },
+  {
+    immediate: true
+  }
+)
+</script>
+
+<style lang="scss" scoped>
+@include deep() {
+  .n-input {
+    height: v-bind('h + "px"');
+    display: flex;
+    align-items: center;
+  }
+}
+</style>

src/packages/components/Informations/Inputs/InputsDate/interact.ts

@@ -0,0 +1,64 @@
+import { InteractEventOn, InteractActionsType } from '@/enums/eventEnum'
+
+// 时间组件类型
+export enum ComponentInteractEventEnum {
+  DATE = 'date',
+  DATE_TIME = 'datetime',
+  DATE_RANGE = 'daterange',
+  DATE_TIME_RANGE = 'datetimerange',
+  MONTH = 'month',
+  MONTH_RANGE = 'monthrange',
+  YEAR = 'year',
+  YEAR_RANGE = 'yearrange',
+  QUARTER = 'quarter',
+  QUARTER_RANGE = 'quarterrange'
+}
+
+// 联动参数
+export enum ComponentInteractParamsEnum {
+  DATE = 'date',
+  DATE_START = 'dateStart',
+  DATE_END = 'dateEnd',
+  DATE_RANGE = 'daterange'
+}
+
+const time = [
+  {
+    value: ComponentInteractParamsEnum.DATE,
+    label: '日期'
+  }
+]
+
+const timeRange = [
+  {
+    value: ComponentInteractParamsEnum.DATE_START,
+    label: '开始时间'
+  },
+  {
+    value: ComponentInteractParamsEnum.DATE_END,
+    label: '结束时间'
+  },
+  {
+    value: ComponentInteractParamsEnum.DATE_RANGE,
+    label: '日期范围'
+  }
+]
+
+// 定义组件触发回调事件
+export const interactActions: InteractActionsType[] = [
+  {
+    interactType: InteractEventOn.CHANGE,
+    interactName: '选择完成',
+    componentEmitEvents: {
+      [ComponentInteractEventEnum.DATE]: time,
+      [ComponentInteractEventEnum.DATE_TIME]: time,
+      [ComponentInteractEventEnum.DATE_RANGE]: timeRange,
+      [ComponentInteractEventEnum.MONTH]: time,
+      [ComponentInteractEventEnum.MONTH_RANGE]: timeRange,
+      [ComponentInteractEventEnum.QUARTER]: time,
+      [ComponentInteractEventEnum.QUARTER_RANGE]: timeRange,
+      [ComponentInteractEventEnum.YEAR]: time,
+      [ComponentInteractEventEnum.YEAR_RANGE]: timeRange,
+    }
+  }
+]

src/packages/components/Informations/Inputs/InputsSelect/config.ts

@@ -0,0 +1,37 @@
+import cloneDeep from 'lodash/cloneDeep'
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { chartInitConfig } from '@/settings/designSetting'
+import { COMPONENT_INTERACT_EVENT_KET } from '@/enums/eventEnum'
+import { interactActions, ComponentInteractEventEnum } from './interact'
+import { InputsSelectConfig } from './index'
+
+export const option = {
+  // 时间组件展示类型，必须和 interactActions 中定义的数据一致
+  [COMPONENT_INTERACT_EVENT_KET]: ComponentInteractEventEnum.DATA,
+  // 默认值
+  selectValue: '1',
+  // 暴露配置内容给用户
+  dataset: [
+    {
+      label: '选项1',
+      value: '1'
+    },
+    {
+      label: '选项2',
+      value: '2'
+    },
+    {
+      label: '选项3',
+      value: '3'
+    }
+  ]
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = InputsSelectConfig.key
+  public attr = { ...chartInitConfig, w: 260, h: 32, zIndex: -1 }
+  public chartConfig = cloneDeep(InputsSelectConfig)
+  public interactActions = interactActions
+  public option = cloneDeep(option)
+}

src/packages/components/Informations/Inputs/InputsSelect/config.vue

@@ -0,0 +1,20 @@
+<template>
+  <collapse-item name="下拉配置" :expanded="true">
+    <setting-item-box name="默认值" :alone="true">
+      <n-select size="small" v-model:value="optionData.selectValue" :options="optionData.dataset" />
+    </setting-item-box>
+  </collapse-item>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue'
+import { CollapseItem, SettingItemBox } from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+
+defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>

src/packages/components/Informations/Inputs/InputsSelect/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const InputsSelectConfig: ConfigType = {
+  key: 'InputsSelect',
+  chartKey: 'VInputsSelect',
+  conKey: 'VCInputsSelect',
+  title: '下拉选择器',
+  category: ChatCategoryEnum.INPUTS,
+  categoryName: ChatCategoryEnumName.INPUTS,
+  package: PackagesCategoryEnum.INFORMATIONS,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'inputs_select.png'
+}

src/packages/components/Informations/Inputs/InputsSelect/index.vue

@@ -0,0 +1,66 @@
+<template>
+  <n-select
+    v-model:value="option.value.selectValue"
+    :options="option.value.dataset"
+    :style="`width:${w}px;`"
+    @update:value="onChange"
+  />
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, ref, shallowReactive, watch } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartInteract } from '@/hooks'
+import { InteractEventOn } from '@/enums/eventEnum'
+import { ComponentInteractParamsEnum } from './interact'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const option = shallowReactive({
+  value: {
+    selectValue: props.chartConfig.option.selectValue,
+    dataset: props.chartConfig.option.dataset
+  }
+})
+
+// 监听事件改变
+const onChange = (v: string) => {
+  // 存储到联动数据
+  useChartInteract(
+    props.chartConfig,
+    useChartEditStore,
+    { [ComponentInteractParamsEnum.DATA]: v },
+    InteractEventOn.CHANGE
+  )
+}
+
+// 手动更新
+watch(
+  () => props.chartConfig.option,
+  (newData: any) => {
+    option.value = newData
+    onChange(newData.selectValue)
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+</script>
+
+<style lang="scss" scoped>
+@include deep() {
+  .n-base-selection-label {
+    height: v-bind('h + "px"');
+    display: flex;
+    align-items: center;
+  }
+}
+</style>

src/packages/components/Informations/Inputs/InputsSelect/interact.ts

@@ -0,0 +1,27 @@
+import { InteractEventOn, InteractActionsType } from '@/enums/eventEnum'
+
+// 时间组件类型
+export enum ComponentInteractEventEnum {
+  DATA = 'data'
+}
+
+// 联动参数
+export enum ComponentInteractParamsEnum {
+  DATA = 'data'
+}
+
+// 定义组件触发回调事件
+export const interactActions: InteractActionsType[] = [
+  {
+    interactType: InteractEventOn.CHANGE,
+    interactName: '选择完成',
+    componentEmitEvents: {
+      [ComponentInteractEventEnum.DATA]: [
+        {
+          value: ComponentInteractParamsEnum.DATA,
+          label: '选择项'
+        }
+      ]
+    }
+  }
+]

src/packages/components/Informations/Inputs/InputsTab/config.ts

@@ -0,0 +1,39 @@
+import cloneDeep from 'lodash/cloneDeep'
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { chartInitConfig } from '@/settings/designSetting'
+import { COMPONENT_INTERACT_EVENT_KET } from '@/enums/eventEnum'
+import { interactActions, ComponentInteractEventEnum } from './interact'
+import { InputsTabConfig } from './index'
+
+export const option = {
+  // 时间组件展示类型，必须和 interactActions 中定义的数据一致
+  [COMPONENT_INTERACT_EVENT_KET]: ComponentInteractEventEnum.DATA,
+  // 默认值
+  tabLabel: '选项1',
+  // 样式
+  tabType: 'segment',
+  // 暴露配置内容给用户
+  dataset: [
+    {
+      label: '选项1',
+      value: '1'
+    },
+    {
+      label: '选项2',
+      value: '2'
+    },
+    {
+      label: '选项3',
+      value: '3'
+    }
+  ]
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = InputsTabConfig.key
+  public attr = { ...chartInitConfig, w: 460, h: 32, zIndex: -1 }
+  public chartConfig = cloneDeep(InputsTabConfig)
+  public interactActions = interactActions
+  public option = cloneDeep(option)
+}

src/packages/components/Informations/Inputs/InputsTab/config.vue

@@ -0,0 +1,31 @@
+<template>
+  <collapse-item name="标签页配置" :expanded="true">
+    <setting-item-box name="默认值" :alone="true">
+      <n-select size="small" v-model:value="optionData.tabType" :options="tabTypeOptions" />
+    </setting-item-box>
+  </collapse-item>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue'
+import { CollapseItem, SettingItemBox } from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+
+defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+const tabTypeOptions = [
+  {
+    label: '线条',
+    value: 'bar'
+  },
+  {
+    label: '分段',
+    value: 'segment'
+  }
+]
+</script>

src/packages/components/Informations/Inputs/InputsTab/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const InputsTabConfig: ConfigType = {
+  key: 'InputsTab',
+  chartKey: 'VInputsTab',
+  conKey: 'VCInputsTab',
+  title: '标签选择器',
+  category: ChatCategoryEnum.INPUTS,
+  categoryName: ChatCategoryEnumName.INPUTS,
+  package: PackagesCategoryEnum.INFORMATIONS,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'inputs_tab.png'
+}

src/packages/components/Informations/Inputs/InputsTab/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <n-tabs :type="option.value.tabType" @update:value="onChange">
+    <n-tab v-for="(item, index) in option.value.dataset" :name="item.label" :key="index"> {{ item.label }} </n-tab>
+  </n-tabs>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, shallowReactive, watch } from 'vue'
+import cloneDeep from 'lodash/cloneDeep'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartInteract } from '@/hooks'
+import { InteractEventOn } from '@/enums/eventEnum'
+import { ComponentInteractParamsEnum } from './interact'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const option = shallowReactive({
+  value: cloneDeep(props.chartConfig.option)
+})
+
+// 监听事件改变
+const onChange = (v: string) => {
+  if (v === undefined) return
+  const selectItem = option.value.dataset.find((item: { label: string; value: any }) => item.label === v)
+  // 存储到联动数据
+  useChartInteract(
+    props.chartConfig,
+    useChartEditStore,
+    { [ComponentInteractParamsEnum.DATA]: selectItem.value },
+    InteractEventOn.CHANGE
+  )
+}
+
+// 手动更新
+watch(
+  () => props.chartConfig.option,
+  (newData: any) => {
+    option.value = newData
+    onChange(newData.tabValue)
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+</script>