Merge branch 'dev' into dev-commet

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

@@ -1,19 +1,14 @@
 <template>
-  <v-chart
-    ref="vChartRef"
-    :theme="themeColor"
-    :option="option"
-    :manual-update="isPreview()"
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()"
     :update-options="{
       replaceMerge: replaceMergeArr
-    }"
-    autoresize
-  ></v-chart>
+    }" autoresize></v-chart>
 </template>
 
 <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'
@@ -25,6 +20,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
 import { isPreview } from '@/utils'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import isObject from 'lodash/isObject'
+import cloneDeep from 'lodash/cloneDeep'
 
 const props = defineProps({
   themeSetting: {
@@ -41,6 +37,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([DatasetComponent, CanvasRenderer, BarChart, GridComponent, TooltipComponent, LegendComponent])
 
 const replaceMergeArr = ref<string[]>()
@@ -57,11 +55,23 @@ watch(
       if (!isObject(newData) || !('dimensions' in newData)) return
       if (Array.isArray(newData?.dimensions)) {
         const seriesArr = []
-        for (let i = 0; i < newData.dimensions.length - 1; i++) {
-          seriesArr.push(seriesItem)
+        // 对oldData进行判断，防止传入错误数据之后对旧维度判断产生干扰
+        // 此处计算的是dimensions的Y轴维度，若是dimensions.length为0或1，则默认为1，排除X轴维度干扰
+        const oldDimensions = Array.isArray(oldData?.dimensions)&&oldData.dimensions.length >= 1 ? oldData.dimensions.length : 1; 
+        const newDimensions = newData.dimensions.length >= 1 ? newData.dimensions.length : 1;
+        const dimensionsGap = newDimensions - oldDimensions;
+        if (dimensionsGap < 0) {
+          props.chartConfig.option.series.splice(newDimensions - 1)
+        } else if (dimensionsGap > 0) {
+          if(!oldData || !oldData?.dimensions || !Array.isArray(oldData?.dimensions) || !oldData?.dimensions.length ) {
+              props.chartConfig.option.series=[]
+          }
+          for (let i = 0; i < dimensionsGap; i++) {
+            seriesArr.push(cloneDeep(seriesItem))
+          }
+          props.chartConfig.option.series.push(...seriesArr)
         }
         replaceMergeArr.value = ['series']
-        props.chartConfig.option.series = seriesArr
         nextTick(() => {
           replaceMergeArr.value = []
         })

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'
@@ -24,6 +26,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
 import { isPreview } from '@/utils'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import isObject from 'lodash/isObject'
+import cloneDeep from 'lodash/cloneDeep'
 
 const props = defineProps({
   themeSetting: {
@@ -40,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[]>()
@@ -57,7 +62,7 @@ watch(
       if (Array.isArray(newData?.dimensions)) {
         const seriesArr = []
         for (let i = 0; i < newData.dimensions.length - 1; i++) {
-          seriesArr.push(seriesItem)
+          seriesArr.push(cloneDeep(seriesItem))
         }
         replaceMergeArr.value = ['series']
         props.chartConfig.option.series = seriesArr

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.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.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.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.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/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/Dial/config.ts

@@ -0,0 +1,91 @@
+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
+import { DialConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const includes = []
+const option = {
+  backgroundColor: '#0E1327',
+  dataset:70,
+  series: [{
+      type: "gauge",
+      data: [{
+          value: 70,
+          itemStyle: { // 指针样式
+              color: '#2AF4FF'
+          }
+      }],
+      min: 0, //最小刻度
+      max: 100, //最大刻度
+      splitNumber: 10, //刻度数量
+      center: ['50%', '55%'],
+      radius: '80%',
+      axisLine: {
+        lineStyle: {
+        color: [
+            [0, 'rgba(0,212,230,0.5)'],
+            [1, 'rgba(28,128,245,0)']
+          ],
+          width: 170
+        }
+      },
+      axisLabel: { // 文字样式
+        color: '#eee', 
+        fontSize: 14,
+      },
+      axisTick: {
+        show: false,
+      },
+      splitLine: {
+        show: false,
+      },
+      detail: {
+        show: false,
+      },
+      pointer: {
+        length: '80%',
+        width: 4
+      },
+      animationDuration: 2000,
+    },
+    {
+      name: '外部刻度',
+      type: 'gauge',
+      center: ['50%', '55%'],
+      radius: '90%',
+      axisLine: {
+        show: true,
+        lineStyle: {
+          width: 25,
+          color: [ // 表盘外部颜色
+            [0, '#1369E380'],
+            [1, '#1369E380']
+          ],
+        }
+      }, 
+      axisLabel: {
+        show:false,
+      },
+      axisTick: {
+        splitNumber: 5,
+        lineStyle: { //刻度颜色
+          color: '#42E5FB',
+          width: 2,
+        },
+      },
+      splitLine: {
+        length: 15,
+        lineStyle: {
+          color: '#42E5FB',
+        }
+      },
+    },
+  ]
+};
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = DialConfig.key
+  public chartConfig = cloneDeep(DialConfig)
+  // 图表配置项
+  public option = echartOptionProfixHandle(option, includes)
+}

src/packages/components/Charts/Mores/Dial/config.vue

@@ -0,0 +1,84 @@
+<template>
+    <!-- 遍历 seriesList -->
+    <CollapseItem :name="`圆环`" :expanded="true">
+      <SettingItemBox name="数据">
+        <SettingItem name="数值">
+          <n-input-number v-model:value="config.dataset" :min="dialConfig.min" :max="dialConfig.max" :step="1" size="small" placeholder="数值">
+          </n-input-number>
+        </SettingItem>
+      </SettingItemBox>
+      <!-- Echarts 全局设置 -->
+      <!-- 表盘刻度字体 -->
+      <SettingItemBox name="字体">
+        <SettingItem name="颜色">
+          <n-color-picker size="small" :modes="['hex']" v-model:value="dialConfig.axisLabel.color"></n-color-picker>
+        </SettingItem>
+        <SettingItem name="字体大小">
+          <n-input-number
+            v-model:value="dialConfig.axisLabel.fontSize"
+            :min="0"
+            :step="1"
+            size="small"
+            placeholder="字体大小"
+          >
+          </n-input-number>
+        </SettingItem>
+      </SettingItemBox>
+      <!-- 表盘 -->
+      <SettingItemBox name="表盘外部">
+        <SettingItem name="颜色" >
+          <n-color-picker size="small" :modes="['hex']" v-model:value="config.series[1].axisLine.lineStyle.color[1][1]"></n-color-picker>
+        </SettingItem>
+      </SettingItemBox>
+      <!-- 指针 -->
+      <SettingItemBox name="指针">
+        <SettingItem name="颜色" >
+          <n-color-picker size="small" :modes="['hex']" v-model:value="dialConfig.data[0].itemStyle.color"></n-color-picker>
+        </SettingItem>
+        <SettingItem name="宽度">
+          <n-input-number v-model:value="dialConfig.pointer.width" :min="0" :step="1" size="small" placeholder="数值">
+          </n-input-number>
+        </SettingItem>
+      </SettingItemBox>
+      <SettingItemBox name="刻度">
+        <SettingItem name="最小值">
+          <n-input-number v-model:value="dialConfig.min" :min="0" :step="1" size="small" placeholder="数值">
+          </n-input-number>
+        </SettingItem>
+        <SettingItem name="最大值">
+          <n-input-number v-model:value="dialConfig.max" :min="0" :step="1" size="small" placeholder="数值">
+          </n-input-number>
+        </SettingItem>
+        <SettingItem name="颜色" >
+          <n-color-picker size="small" :modes="['hex']" v-model:value="config.series[1].axisTick.lineStyle.color" @update:value="updateClick"></n-color-picker>
+        </SettingItem>
+      </SettingItemBox>
+  
+    </CollapseItem>
+  </template>
+  
+  <script setup lang="ts">
+  import { PropType, computed } from 'vue'
+  import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+  import { GlobalThemeJsonType } from '@/settings/chartThemes'
+  
+  const props = defineProps({
+    optionData: {
+      type: Object as PropType<GlobalThemeJsonType>,
+      required: true
+    }
+  })
+  
+  const config = computed(() => {
+    return props.optionData
+  })
+  
+  const dialConfig = computed(() => {
+    return props.optionData.series[0]
+  })
+  
+  const updateClick = (val: any) => {
+    props.optionData.series[1].splitLine.lineStyle.color=val
+  }
+  </script>
+  

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

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const DialConfig: ConfigType = {
+  key: 'Dial',
+  chartKey: 'VDial',
+  conKey: 'VCDial',
+  title: '表盘',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.COMMON,
+  image:'dial.png'
+}

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

@@ -0,0 +1,69 @@
+<template>
+  <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'
+import { mergeTheme } from '@/packages/public/chart'
+import config, { includes } from './config'
+import { useChartDataFetch } from '@/hooks'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent, TitleComponent } 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, props.themeSetting)
+
+use([DatasetComponent, CanvasRenderer, PieChart, GridComponent, TooltipComponent, LegendComponent, TitleComponent])
+
+const option = reactive({
+  value: {}
+})
+
+const dataHandle = (newData: any) => {
+  let config = props.chartConfig.option
+  config.series[0].data[0].value = newData
+  option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+  option.value = props.chartConfig.option
+}
+
+// 配置时
+watch(
+  () => props.chartConfig.option.dataset,
+  newData => {
+    try {
+      dataHandle(newData)
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
+    immediate: true,
+    deep: false
+  }
+)
+
+// 预览时
+useChartDataFetch(props.chartConfig, useChartEditStore, (resData: number) => {
+  // @ts-ignore
+  option.value.series[0].data[0].value = resData
+})
+</script>

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/Graph/config.ts

@@ -0,0 +1,71 @@
+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
+import { GraphConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
+
+export const includes = []
+
+// 关系图布局
+export const GraphLayout = [
+  { label: '无', value: 'none' },
+  { label: '环形', value: 'circular' }
+]
+
+// 标签开关
+export const LabelSwitch = [
+  { label: '开启', value: 1 },
+  { label: '关闭', value: 0 }
+]
+
+// 标签位置
+export const LabelPosition = [
+  { label: '左侧', value: 'left' },
+  { label: '右侧', value: 'right' },
+  { label: '顶部', value: 'top' },
+  { label: '底部', value: 'bottom' },
+  { label: '内部', value: 'inside' },
+]
+
+export const option = {
+    dataset: { ...dataJson },
+    tooltip: {},
+    legend:{
+      show:true,
+      textStyle:{
+        color:"#eee",
+        fontSize: 14 ,
+      },
+      data: dataJson.categories.map(function (a) {
+          return a.name;
+      })
+    },
+    series: [
+      {
+        type: 'graph',
+        layout: 'none', // none circular环形布局
+        data: dataJson.nodes,
+        links: dataJson.links,
+        categories: dataJson.categories,
+        label: { // 标签
+          show: 1,
+          position: 'right',
+          formatter: '{b}'
+        },
+        labelLayout: {
+          hideOverlap: true
+        },
+        lineStyle: {
+          color: 'source', // 线条颜色
+          curveness: 0.2 // 线条卷曲程度
+        }
+      }
+    ]
+  };
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = GraphConfig.key
+  public chartConfig = cloneDeep(GraphConfig)
+  // 图表配置项
+  public option = echartOptionProfixHandle(option, includes)
+}

src/packages/components/Charts/Mores/Graph/config.vue

@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <CollapseItem name="关系图" :expanded="true">
+      <SettingItemBox name="样式">
+        <setting-item name="布局">
+          <n-select v-model:value="graphConfig.layout" :options="GraphLayout" size="small" />
+        </setting-item>
+      </SettingItemBox>
+      <SettingItemBox name="标签">
+        <setting-item name="展示">
+          <n-select v-model:value="graphConfig.label.show" :options="LabelSwitch" size="small" />
+        </setting-item>
+        <setting-item name="位置">
+          <n-select v-model:value="graphConfig.label.position" :options="LabelPosition" size="small" />
+        </setting-item>
+      </SettingItemBox>
+      <SettingItemBox name="线条">
+        <SettingItem name="弧线">
+        <!-- 需要输入两位的小数才会变化 -->
+          <n-input-number
+          v-model:value="optionData.series[0].lineStyle.curveness"
+          :min="0"
+          :step="0.01"
+          placeholder="弯曲程度"
+          size="small"
+        ></n-input-number>
+        </SettingItem>
+      </SettingItemBox>
+      <SettingItemBox name="图例">
+        <SettingItem name="颜色">
+          <n-color-picker
+            size="small"
+            :modes="['hex']"
+            v-model:value="optionData.legend.textStyle.color"
+        ></n-color-picker>
+        </SettingItem>
+        <SettingItem name="文本">
+          <n-input-number v-model:value="optionData.legend.textStyle.fontSize" :min="0" :step="1" size="small" placeholder="文字大小">
+          </n-input-number>
+        </SettingItem>
+      </SettingItemBox>
+    </CollapseItem>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed } from 'vue'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { option, GraphLayout, LabelSwitch, LabelPosition } from './config'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option & GlobalThemeJsonType>,
+    required: true
+  }
+})
+
+const graphConfig = computed<typeof option.series[0]>(() => {
+  return props.optionData.series[0]
+})
+</script>

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

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const GraphConfig: ConfigType = {
+  key: 'Graph',
+  chartKey: 'VGraph',
+  conKey: 'VCGraph',
+  title: '关系图',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'graph.png'
+}

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

@@ -0,0 +1,80 @@
+<template>
+  <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, setOption } from '@/packages/public/chart'
+import { useChartDataFetch } from '@/hooks'
+import { CreateComponentType } from '@/packages/index.d'
+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<CreateComponentType>,
+    required: true
+  }
+})
+
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
+use([DatasetComponent, CanvasRenderer, RadarChart, GridComponent, TooltipComponent, LegendComponent])
+
+const vChartRef = ref<typeof VChart>()
+
+const option = computed(() => {
+  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+})
+
+const dataSetHandle = (dataset: typeof dataJson) => {
+  if (dataset.nodes) {
+    props.chartConfig.option.series[0].data = dataset.nodes
+  }
+  if (dataset.links) {
+    props.chartConfig.option.series[0].links = dataset.links
+  }
+  if (dataset.categories) {
+    props.chartConfig.option.series[0].categories = dataset.categories
+    // @ts-ignore
+    props.chartConfig.option.legend.data = dataset.categories.map((i: { name: string }) => i.name)
+  }
+  if (vChartRef.value && isPreview()) {
+    setOption(vChartRef.value, props.chartConfig.option)
+  }
+}
+
+watch(
+  () => props.chartConfig.option.dataset,
+  newData => {
+    try {
+      dataSetHandle(newData)
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
+    deep: false
+  }
+)
+
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: typeof dataJson) => {
+  dataSetHandle(newData)
+})
+</script>

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/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/Sankey/config.ts

@@ -0,0 +1,43 @@
+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
+import { SankeyConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
+
+export const includes = ['legend']
+
+// 图表方向
+export const orientList = [
+  { label: '水平', value: 'horizontal' },
+  { label: '垂直', value: 'vertical' }
+]
+
+// 标签展示
+export const toolTipSwitch = [
+  { label: '开启', value: 1 },
+  { label: '关闭', value: 0 }
+]
+
+export const option = {
+  dataset: { ...dataJson },
+  tooltip: {
+    show: 1,
+    trigger: 'item',
+    triggerOn: 'mousemove'
+  },
+  series: {
+    type: 'sankey',
+    layout: 'none',
+    orient:'horizontal',
+    data: dataJson.label,
+    links: dataJson.links,
+    levels: dataJson.levels
+  }
+};
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = SankeyConfig.key
+  public chartConfig = cloneDeep(SankeyConfig)
+  // 图表配置项
+  public option = echartOptionProfixHandle(option, includes)
+}

src/packages/components/Charts/Mores/Sankey/config.vue

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <CollapseItem name="桑基图" :expanded="true">
+      <SettingItemBox name="样式">
+        <SettingItem name="方向">
+          <n-select
+            v-model:value="sankeyConfig.orient"
+            size="small"
+            :options="orientList"
+            placeholder="选择方向"
+          />
+        </SettingItem>
+        <SettingItem name="提示标签">
+          <n-select
+            v-model:value="optionData.tooltip.show"
+            size="small"
+            :options="toolTipSwitch"
+            placeholder="是否开启"
+          />
+        </SettingItem>
+      </SettingItemBox>
+    </CollapseItem>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed } from 'vue'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { option, orientList, toolTipSwitch } from './config'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option & GlobalThemeJsonType>,
+    required: true
+  }
+})
+
+const sankeyConfig = computed<typeof option.series>(() => {
+  return props.optionData.series
+})
+
+</script>

src/packages/components/Charts/Mores/Sankey/data.json

@@ -0,0 +1,86 @@
+{
+  "label": [
+    {
+      "name": "a"
+    },
+    {
+      "name": "b"
+    },
+    {
+      "name": "a1"
+    },
+    {
+      "name": "a2"
+    },
+    {
+      "name": "b1"
+    },
+    {
+      "name": "b2"
+    }
+  ],
+  "links": [
+    {
+      "source": "a",
+      "target": "a1",
+      "value": 5
+    },
+    {
+      "source": "a",
+      "target": "a2",
+      "value": 3
+    },
+    {
+      "source": "b",
+      "target": "b1",
+      "value": 8
+    },
+    {
+      "source": "a",
+      "target": "b1",
+      "value": 3
+    },
+    {
+      "source": "b1",
+      "target": "a1",
+      "value": 1
+    },
+    {
+      "source": "b1",
+      "target": "b2",
+      "value": 2
+    }
+  ],
+  "levels": [
+    {
+      "depth": 0,
+      "itemStyle": {
+        "color": "#decbe4"
+      },
+      "lineStyle": {
+        "color": "source",
+        "opacity": 0.9
+      }
+    },
+    {
+      "depth": 1,
+      "itemStyle": {
+        "color": "#b3cde3"
+      },
+      "lineStyle": {
+        "color": "source",
+        "opacity": 0.6
+      }
+    },
+    {
+      "depth": 2,
+      "itemStyle": {
+        "color": "#ccebc5"
+      },
+      "lineStyle": {
+        "color": "source",
+        "opacity": 0.6
+      }
+    }
+  ]
+}

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

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const SankeyConfig: ConfigType = {
+  key: 'Sankey',
+  chartKey: 'VSankey',
+  conKey: 'VCSankey',
+  title: '桑基图',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'sankey.png'
+}

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

@@ -0,0 +1,78 @@
+<template>
+  <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, setOption } from '@/packages/public/chart'
+import { useChartDataFetch } from '@/hooks'
+import { CreateComponentType } from '@/packages/index.d'
+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<CreateComponentType>,
+    required: true
+  }
+})
+
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
+use([DatasetComponent, CanvasRenderer, RadarChart, GridComponent, TooltipComponent, LegendComponent])
+
+const vChartRef = ref<typeof VChart>()
+
+const option = computed(() => {
+  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+})
+
+const dataHandle = (dataset: typeof dataJson) => {
+  if (dataset.label) {
+    props.chartConfig.option.series.data = dataset.label
+  }
+  if (dataset.links) {
+    props.chartConfig.option.series.links = dataset.links
+  }
+  if (dataset.levels) {
+    props.chartConfig.option.series.levels = dataset.levels
+  }
+  if (vChartRef.value && isPreview()) {
+    setOption(vChartRef.value, props.chartConfig.option)
+  }
+}
+
+watch(
+  () => props.chartConfig.option.dataset,
+  newData => {
+    try {
+      dataHandle(newData)
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
+    deep: true
+  }
+)
+
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: typeof dataJson) => {
+  dataHandle(newData)
+})
+</script>

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.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/Mores/index.ts

@@ -4,5 +4,8 @@ import { FunnelConfig } from './Funnel/index'
 import { HeatmapConfig } from './Heatmap/index'
 import { WaterPoloConfig } from './WaterPolo/index'
 import { TreeMapConfig } from './TreeMap/index'
+import { DialConfig } from './Dial/index'
+import { SankeyConfig } from './Sankey/index'
+import { GraphConfig } from './Graph/index'
 
-export default [ProcessConfig, RadarConfig, FunnelConfig, HeatmapConfig, WaterPoloConfig, TreeMapConfig]
+export default [ProcessConfig, RadarConfig, FunnelConfig, HeatmapConfig, WaterPoloConfig, TreeMapConfig, GraphConfig, SankeyConfig, DialConfig]

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.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.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.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,4 +1,4 @@
-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 = {
@@ -9,5 +9,6 @@ export const Border01Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
+  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,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'border02.png'
 }

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

@@ -1,4 +1,4 @@
-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 = {
@@ -9,5 +9,6 @@ export const Border03Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'border03.png'
 }

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

@@ -1,4 +1,4 @@
-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 = {
@@ -9,5 +9,6 @@ export const Border04Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'border04.png'
 }

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

@@ -1,4 +1,4 @@
-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 = {
@@ -9,5 +9,6 @@ export const Border05Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'border05.png'
 }

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

@@ -1,4 +1,4 @@
-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 = {
@@ -9,5 +9,6 @@ export const Border06Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'border06.png'
 }

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

@@ -1,4 +1,4 @@
-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 = {
@@ -9,5 +9,6 @@ export const Border07Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'border07.png'
 }

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

@@ -1,4 +1,4 @@
-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 = {
@@ -9,5 +9,6 @@ export const Border08Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'border08.png'
 }

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

@@ -1,4 +1,4 @@
-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 = {
@@ -9,5 +9,6 @@ export const Border09Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'border09.png'
 }

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

@@ -1,4 +1,4 @@
-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 = {
@@ -9,5 +9,6 @@ export const Border10Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'border10.png'
 }

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

@@ -1,4 +1,4 @@
-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 = {
@@ -9,5 +9,6 @@ export const Border11Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'border11.png'
 }

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

@@ -1,4 +1,4 @@
-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 = {
@@ -9,5 +9,6 @@ export const Border12Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'border12.png'
 }

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

@@ -1,4 +1,4 @@
-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 = {
@@ -9,5 +9,6 @@ export const Border13Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'border13.png'
 }

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

@@ -1,4 +1,4 @@
-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 = {
@@ -9,5 +9,6 @@ export const Decorates01Config: ConfigType = {
   category: ChatCategoryEnum.DECORATE,
   categoryName: ChatCategoryEnumName.DECORATE,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'decorates01.png'
 }

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

@@ -1,4 +1,4 @@
-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 = {
@@ -9,5 +9,6 @@ export const Decorates02Config: ConfigType = {
   category: ChatCategoryEnum.DECORATE,
   categoryName: ChatCategoryEnumName.DECORATE,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'decorates02.png'
 }

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

@@ -1,4 +1,4 @@
-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 = {
@@ -9,5 +9,6 @@ export const Decorates03Config: ConfigType = {
   category: ChatCategoryEnum.DECORATE,
   categoryName: ChatCategoryEnumName.DECORATE,
   package: PackagesCategoryEnum.DECORATES,
-  image: 'decorates01.png'
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'decorates03.png'
 }

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

@@ -1,4 +1,4 @@
-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 = {
@@ -9,5 +9,6 @@ export const Decorates04Config: ConfigType = {
   category: ChatCategoryEnum.DECORATE,
   categoryName: ChatCategoryEnumName.DECORATE,
   package: PackagesCategoryEnum.DECORATES,
+  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,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'decorates05.png'
 }

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

@@ -9,6 +9,6 @@ export const Decorates06Config: ConfigType = {
   category: ChatCategoryEnum.DECORATE,
   categoryName: ChatCategoryEnumName.DECORATE,
   package: PackagesCategoryEnum.DECORATES,
-  chartFrame: ChartFrameEnum.COMMON,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'decorates06.png'
 }

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

@@ -1,4 +1,4 @@
-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 = {
@@ -9,5 +9,6 @@ export const CountDownConfig: ConfigType = {
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.COMMON,
   image: 'countdown.png'
 }

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

@@ -1,4 +1,4 @@
-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 = {
@@ -9,5 +9,6 @@ export const FlipperNumberConfig: ConfigType = {
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.COMMON,
   image: 'flipper-number.png'
 }

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

@@ -1,4 +1,4 @@
-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 = {
@@ -9,5 +9,6 @@ export const NumberConfig: ConfigType = {
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.COMMON,
   image: 'number.png'
 }

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

@@ -1,4 +1,4 @@
-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 = {
@@ -9,5 +9,6 @@ export const TimeCommonConfig: ConfigType = {
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'time.png'
 }

src/packages/components/Decorates/Three/ThreeEarth01/code/world/Assets.ts

@@ -1,34 +1,34 @@
-/**
- * 资源文件
- * 把模型和图片分开进行加载
- */
-
-interface ITextures {
-  name: string
-  url: string
-}
-
-export interface IResources {
-  textures?: ITextures[]
-}
-
-const fileSuffix = ['earth', 'gradient', 'redCircle', 'label', 'aperture', 'glow', 'light_column', 'aircraft']
-const textures: ITextures[] = []
-
-const modules = import.meta.globEager("../../images/earth/*");
-
-for(let item in modules) {
-  const n = item.split('/').pop()
-  if(n) {
-    textures.push({
-      name: n.split('.')[0],
-      url: modules[item].default
-    })
-  }
-}
-
-const resources: IResources = {
-  textures
-}
-
-export { resources }
+/**
+ * 资源文件
+ * 把模型和图片分开进行加载
+ */
+
+interface ITextures {
+  name: string
+  url: string
+}
+
+export interface IResources {
+  textures?: ITextures[]
+}
+
+const fileSuffix = ['earth', 'gradient', 'redCircle', 'label', 'aperture', 'glow', 'light_column', 'aircraft']
+const textures: ITextures[] = []
+
+const modules: Record<string, { default: string }> = import.meta.glob("../../images/earth/*", { eager: true })
+
+for(let item in modules) {
+  const n = item.split('/').pop()
+  if(n) {
+    textures.push({
+      name: n.split('.')[0],
+      url: modules[item].default
+    })
+  }
+}
+
+const resources: IResources = {
+  textures
+}
+
+export { resources }

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

@@ -9,6 +9,6 @@ export const ThreeEarth01Config: ConfigType = {
   category: ChatCategoryEnum.THREE,
   categoryName: ChatCategoryEnumName.THREE,
   package: PackagesCategoryEnum.DECORATES,
-  chartFrame: ChartFrameEnum.STATIC,
+  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>

src/packages/components/Informations/Inputs/InputsTab/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/index.ts

@@ -0,0 +1,5 @@
+import { InputsDateConfig } from './InputsDate/index'
+import { InputsSelectConfig } from './InputsSelect/index'
+import { InputsTabConfig } from './InputsTab/index'
+
+export default [InputsDateConfig, InputsSelectConfig, InputsTabConfig]

src/packages/components/Informations/Mores/Iframe/config.ts

@@ -14,7 +14,7 @@ export const option = {
 export default class Config extends PublicConfigClass implements CreateComponentType
 {
   public key = IframeConfig.key
-  public attr = { ...chartInitConfig, w: 800, h: 800, zIndex: -1 }
+  public attr = { ...chartInitConfig, w: 1200, h: 800, zIndex: -1 }
   public chartConfig = cloneDeep(IframeConfig)
   public option = cloneDeep(option)
 }

src/packages/components/Informations/Mores/ImageCarousel/config.ts

@@ -0,0 +1,44 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { ImageCarouselConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+import logo from '@/assets/logo.png'
+
+export const option = {
+  // 图片资源列表
+  dataset: [
+    'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel1.jpeg',
+    'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel2.jpeg',
+    'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel3.jpeg',
+  ],
+  // 自动播放
+  autoplay: true,
+  // 自动播放的间隔（豪秒）
+  interval: 5000,
+  // 每页显示的图片数量
+  slidesPerview: 1,
+  // 轮播方向
+  direction: "horizontal",
+  // 拖曳切换
+  draggable: true,
+  // 居中显示
+  centeredSlides: false,
+  // 过渡效果
+  effect: "slide",
+  // 是否显示指示点
+  showDots: true,
+  // 指示器样式
+  dotType: "dot",
+  // 指示器位置
+  dotPlacement: "bottom",
+  // 显示箭头
+  showArrow: false,
+  // 图片样式
+  fit: "contain",
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = ImageCarouselConfig.key
+  public chartConfig = cloneDeep(ImageCarouselConfig)
+  public option = cloneDeep(option)
+}

src/packages/components/Informations/Mores/ImageCarousel/config.vue

@@ -0,0 +1,168 @@
+<template>
+  <collapse-item name="路径" :expanded="true">
+      <setting-item v-for="(item, index) in optionData.dataset" :key="index">
+        <n-input-group>
+          <n-input v-model:value="optionData.dataset[index]" size="small" placeholder="请输入图片地址"></n-input>
+          <n-button ghost @click="optionData.dataset.splice(index, 1)"> - </n-button>
+        </n-input-group>
+      </setting-item>
+      <setting-item>
+        <n-button size="small" @click="optionData.dataset.push('')"> + 新增</n-button>
+      </setting-item>
+  </collapse-item>
+  <collapse-item name="轮播属性" :expanded="true">
+    <setting-item-box name="播放器">
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="optionData.autoplay" size="small" />
+          <n-text>自动播放</n-text>
+        </n-space>
+      </setting-item>
+      <!-- 开启自动播放时，设置间隔时间 -->
+      <setting-item name="间隔时间">
+        <n-input-number v-model:value="optionData.interval" size="small" placeholder="">
+          <template #suffix> 毫秒 </template>
+        </n-input-number>
+      </setting-item>
+      <setting-item name="轮播方向">
+        <n-select v-model:value="optionData.direction" :options="directions" placeholder="选择方向" />
+      </setting-item>
+      <setting-item name="过渡效果">
+        <n-select v-model:value="optionData.effect" :options="effects" placeholder="效果" />
+      </setting-item>
+      <setting-item name="每页数量">
+        <n-input-number v-model:value="optionData.slidesPerview" size="small" placeholder=""></n-input-number>
+      </setting-item>
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="optionData.centeredSlides" size="small" />
+          <n-text>居中显示</n-text>
+        </n-space>
+      </setting-item>
+      <setting-item name="图片样式">
+        <n-select v-model:value="optionData.fit" :options="fitList" placeholder="样式" />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="指示器">
+      <setting-item name="样式">
+        <n-select v-model:value="optionData.dotType" :options="dotTypes" placeholder="选择样式" />
+      </setting-item>
+      <setting-item name="位置">
+        <n-select v-model:value="optionData.dotPlacement" :options="dotPlacements" placeholder="选择位置" />
+      </setting-item>
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="optionData.showDots" size="small" />
+          <n-text>显示</n-text>
+        </n-space>
+      </setting-item>
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="optionData.showArrow" size="small" />
+          <n-text>箭头</n-text>
+        </n-space>
+      </setting-item>
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="optionData.draggable" size="small" />
+          <n-text>拖曳切换</n-text>
+        </n-space>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { option } from './config'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+// 字典
+const dotTypes = [
+  {
+    label: '点',
+    value: 'dot'
+  },
+  {
+    label: '线',
+    value: 'line'
+  }
+]
+const directions = [
+  {
+    label: '水平方向',
+    value: 'horizontal'
+  },
+  {
+    label: '垂直方向',
+    value: 'vertical'
+  }
+]
+const effects = [
+  {
+    label: 'slide',
+    value: 'slide'
+  },
+  {
+    label: 'fade',
+    value: 'fade'
+  },
+  {
+    label: 'card',
+    value: 'card'
+  },
+  {
+    label: 'custom',
+    value: 'custom'
+  }
+]
+const dotPlacements = [
+  {
+    label: '上边',
+    value: 'top'
+  },
+  {
+    label: '下边',
+    value: 'bottom'
+  },
+  {
+    label: '左边',
+    value: 'left'
+  },
+  {
+    label: '右边',
+    value: 'right'
+  }
+]
+
+// 适应类型
+const fitList = [
+  {
+    value: 'fill',
+    label: 'fill'
+  },
+  {
+    value: 'contain',
+    label: 'contain'
+  },
+  {
+    value: 'cover',
+    label: 'cover'
+  },
+  {
+    value: 'scale-down',
+    label: 'scale-down'
+  },
+  {
+    value: 'none',
+    label: 'none'
+  }
+]
+</script>

src/packages/components/Informations/Mores/ImageCarousel/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const ImageCarouselConfig: ConfigType = {
+  key: 'ImageCarousel',
+  chartKey: 'VImageCarousel',
+  conKey: 'VCImageCarousel',
+  title: '轮播图',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.INFORMATIONS,
+  chartFrame: ChartFrameEnum.NAIVE_UI,
+  image: 'photo_carousel.png'
+}

src/packages/components/Informations/Mores/ImageCarousel/index.vue

@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <n-carousel
+      :autoplay="autoplay"
+      :interval="interval"
+      :centered-slides="centeredSlides"
+      :direction="direction"
+      :dot-placement="dotPlacement"
+      :dot-type="dotType"
+      :draggable="draggable"
+      :effect="effect"
+      :slides-per-view="slidesPerview"
+      :show-arrow="showArrow"
+      :show-dots="showDots"
+    >
+      <n-image
+        v-for="(url, index) in option.dataset"
+        preview-disabled
+        :key="index"
+        :object-fit="fit"
+        :src="url"
+        :fallback-src="requireErrorImg()"
+        :width="w"
+        :height="h"
+      ></n-image>
+    </n-carousel>
+  </div>
+</template>
+<script setup lang="ts">
+import { PropType, toRefs, shallowReactive, watch } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { requireErrorImg } from '@/utils'
+import { useChartDataFetch } from '@/hooks'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { option as configOption } from './config'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const option = shallowReactive({
+  dataset: configOption.dataset
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const {
+  autoplay,
+  interval,
+  slidesPerview,
+  direction,
+  draggable,
+  centeredSlides,
+  effect,
+  dotType,
+  dotPlacement,
+  showArrow,
+  showDots,
+  fit
+} = toRefs(props.chartConfig.option)
+
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData: any) => {
+    option.dataset = newData
+  },
+  {
+    immediate: true,
+    deep: false
+  }
+)
+
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  option.dataset = newData
+})
+</script>

src/packages/components/Informations/Mores/WordCloud/config.vue

@@ -1,4 +1,5 @@
 <template>
+  <global-setting :optionData="optionData"></global-setting>
   <collapse-item name="词云" expanded>
     <setting-item-box name="形状">
       <setting-item>
@@ -45,7 +46,7 @@
 import { PropType, computed } from 'vue'
 import { option, ShapeEnumList } from './config'
 // eslint-disable-next-line no-unused-vars
-import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 
 const props = defineProps({
   optionData: {

src/packages/components/Informations/Mores/WordCloud/index.vue

@@ -1,6 +1,7 @@
 <template>
   <v-chart
     ref="vChartRef"
+    :init-options="initOptions"
     :theme="themeColor"
     :option="option"
     :manual-update="isPreview()"
@@ -12,11 +13,12 @@
 <script setup lang="ts">
 import { ref, computed, watch, PropType } from 'vue'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import 'echarts-wordcloud'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import config, { includes } from './config'
-import { mergeTheme } from '@/packages/public/chart'
+import { mergeTheme, setOption } from '@/packages/public/chart'
 import { useChartDataFetch } from '@/hooks'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { isPreview } from '@/utils'
@@ -38,6 +40,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([CanvasRenderer, GridComponent, TooltipComponent])
 
 const replaceMergeArr = ref<string[]>()
@@ -49,7 +53,7 @@ const option = computed(() => {
 const dataSetHandle = (dataset: typeof dataJson) => {
   try {
     dataset && (props.chartConfig.option.series[0].data = dataset)
-    vChartRef.value && isPreview() && vChartRef.value.setOption(props.chartConfig.option)
+    vChartRef.value && isPreview() && setOption(vChartRef.value, props.chartConfig.option)
   } catch (error) {
     console.log(error)
   }

src/packages/components/Informations/Mores/index.ts

@@ -1,6 +1,7 @@
 import { ImageConfig } from './Image/index'
+import { ImageCarouselConfig } from './ImageCarousel/index'
 import { IframeConfig } from './Iframe/index'
 import { VideoConfig } from './Video/index'
 import { WordCloudConfig } from './WordCloud/index'
 
-export default [WordCloudConfig, ImageConfig, VideoConfig, IframeConfig]
+export default [ImageConfig, ImageCarouselConfig, VideoConfig, IframeConfig, WordCloudConfig]

src/packages/components/Informations/Texts/TextBarrage/config.ts

@@ -15,7 +15,6 @@ export const FontWeightObject = {
 }
 
 export const option = {
-  
   dataset: '让数字化看得见',
   fontSize: 32,
   fontColor: '#ffffff',
@@ -39,4 +38,5 @@ export default class Config extends PublicConfigClass implements CreateComponent
   public attr = { ...chartInitConfig, w: 500, h: 70, zIndex: -1 }
   public chartConfig = cloneDeep(TextBarrageConfig)
   public option = cloneDeep(option)
+  public preview = { overFlowHidden: true } 
 }

src/packages/components/Informations/Texts/TextBarrage/index.ts

@@ -1,4 +1,4 @@
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
 
 export const TextBarrageConfig: ConfigType = {
@@ -9,5 +9,6 @@ export const TextBarrageConfig: ConfigType = {
   category: ChatCategoryEnum.TEXT,
   categoryName: ChatCategoryEnumName.TEXT,
   package: PackagesCategoryEnum.INFORMATIONS,
+  chartFrame: ChartFrameEnum.COMMON,
   image: 'text_barrage.png'
 }

src/packages/components/Informations/Texts/TextCommon/index.ts

@@ -1,4 +1,4 @@
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
 
 export const TextCommonConfig: ConfigType = {
@@ -9,5 +9,6 @@ export const TextCommonConfig: ConfigType = {
   category: ChatCategoryEnum.TEXT,
   categoryName: ChatCategoryEnumName.TEXT,
   package: PackagesCategoryEnum.INFORMATIONS,
+  chartFrame: ChartFrameEnum.COMMON,
   image: 'text_static.png'
 }

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

@@ -1,11 +1,14 @@
 export enum ChatCategoryEnum {
   TEXT = 'Texts',
   TITLE = 'Titles',
+  INPUTS = 'Inputs',
   MORE = 'Mores'
 }
 
 export enum ChatCategoryEnumName {
   TEXT = '文本',
   TITLE = '标题',
+  // 控件 => 数据录入
+  INPUTS = '控件',
   MORE = '更多'
 }

src/packages/components/Informations/index.ts

@@ -1,4 +1,5 @@
 import Texts from './Texts'
+import Inputs from './Inputs'
 import Mores from './Mores'
 
-export const InformationList = [...Texts, ...Mores]
+export const InformationList = [...Texts, ...Inputs, ...Mores]

src/packages/components/Tables/Tables/TableScrollBoard/config.vue

@@ -40,6 +40,15 @@
       <SettingItem name="列宽度">
         <n-input v-model:value="columnWidth" :min="1" size="small" placeholder="列宽度(英文','分割)"></n-input>
       </SettingItem>
+      <SettingItem name="轮播方式">
+        <n-select
+          v-model:value="optionData.carousel"
+          :options="[
+            { label: '单条轮播', value: 'single' },
+            { label: '整页轮播', value: 'page' },
+          ]"
+        />
+      </SettingItem>
     </SettingItemBox>
 
     <SettingItemBox name="样式">