fix: 合并1.0.9

.eslintrc.js

@@ -9,16 +9,17 @@ module.exports = {
     sourceType: 'module',
     ecmaFeatures: {
       jsx: true,
-      tsx: true,
+      tsx: true
-    },
+    }
   },
   env: {
     node: true,
+    // The Follow config only works with eslint-plugin-vue v8.0.0+
+    'vue/setup-compiler-macros': true
   },
-  extends: ["plugin:vue/vue3-essential", "eslint:recommended"],
+  extends: ['plugin:vue/vue3-essential', 'eslint:recommended'],
   rules: {
-    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
-  },
+  }
-};
+}
-

src/api/mock/index.ts

@@ -4,12 +4,14 @@ import { RequestHttpEnum } from '@/enums/httpEnum'
 
 // 单个X数据
 export const chartDataUrl = '/mock/chartData'
+export const chartSingleDataUrl = '/mock/chartSingleData'
 export const numberFloatUrl = '/mock/number/float'
 export const numberIntUrl = '/mock/number/int'
 export const textUrl = '/mock/text'
 export const imageUrl = '/mock/image'
 export const rankListUrl = '/mock/rankList'
 export const scrollBoardUrl = '/mock/scrollBoard'
+export const radarUrl = '/mock/radarData'
 
 const mockObject: MockMethod[] = [
   {
@@ -19,6 +21,11 @@ const mockObject: MockMethod[] = [
     method: RequestHttpEnum.GET,
     response: () => test.fetchMockData
   },
+  {
+    url: chartSingleDataUrl,
+    method: RequestHttpEnum.GET,
+    response: () => test.fetchMockSingleData
+  },
   {
     url: numberFloatUrl,
     method: RequestHttpEnum.GET,
@@ -48,7 +55,12 @@ const mockObject: MockMethod[] = [
     url: scrollBoardUrl,
     method: RequestHttpEnum.GET,
     response: () => test.fetchScrollBoard
-  }
+  },
+  {
+    url: radarUrl,
+    method: RequestHttpEnum.GET,
+    response: () => test.fetchRadar
+  },
 ]
 
 export default mockObject

src/api/mock/test.mock.ts

@@ -1,4 +1,39 @@
 export default {
+  // 单图表
+  fetchMockSingleData: {
+    code: 0,
+    status: 200,
+    msg: '请求成功',
+    data: {
+      dimensions: ['product', 'dataOne'],
+      source: [
+        {
+          product: '@name',
+          'dataOne|0-900': 3,
+        },
+        {
+          product: '@name',
+          'dataOne|0-900': 3,
+        },
+        {
+          product: '@name',
+          'dataOne|0-900': 3,
+        },
+        {
+          product: '@name',
+          'dataOne|0-900': 3,
+        },
+        {
+          product: '@name',
+          'dataOne|0-900': 3,
+        },
+        {
+          product: '@name',
+          'dataOne|0-900': 3,
+        }
+      ]
+    }
+  },
   // 图表
   fetchMockData: {
     code: 0,
@@ -79,29 +114,72 @@ export default {
       ['行10列1', '行10列2', '行10列3']
     ]
   },
-  // 获取数字
+  // 获取数字-浮点型
   fetchNumberFloat: {
     code: 0,
     status: 200,
     msg: '请求成功',
     data: '@float(0, 0.99, 1, 4)'
   },
+  // 获取数字-整型
   fetchNumberInt: {
     code: 0,
     status: 200,
     msg: '请求成功',
     data: '@integer(0, 100)'
   },
+  // 文字
   fetchText: {
     code: 0,
     status: 200,
     msg: '请求成功',
     data: '@paragraph(1, 10)'
   },
+  // 图片
   fetchImage: (num: number) => ({
     code: 0,
     status: 200,
     msg: '请求成功',
     data: `https://robohash.org/${num}`
-  })
+  }),
+  // 雷达
+  fetchRadar: {
+    code: 0,
+    status: 200,
+    msg: '请求成功',
+    data: {
+      radarIndicator: [
+        { name: '@name', max: 10000 },
+        { name: '@name', max: 10000 },
+        { name: '@name', max: 10000 },
+        { name: '@name', max: 10000 },
+        { name: '@name', max: 10000 },
+        { name: '@name', max: 10000 }
+      ],
+      seriesData: [
+        {
+          value: [
+            '@integer(0, 10000)',
+            '@integer(0, 10000)',
+            '@integer(0, 10000)',
+            '@integer(0, 10000)',
+            '@integer(0, 10000)',
+            '@integer(0, 10000)'
+          ],
+          name: 'data1'
+        },
+        {
+          value: [
+            '@integer(0, 10000)',
+            '@integer(0, 10000)',
+            '@integer(0, 10000)',
+            '@integer(0, 10000)',
+            '@integer(0, 10000)',
+            '@integer(0, 10000)'
+          ],
+          name: 'data2'
+        }
+      ]
+    }
+  }
 }

src/components/Tips/MacOsControlBtn/index.vue

@@ -37,7 +37,9 @@ const props = defineProps({
   hidden: {
     request: false,
     type: Array,
-    default: []
+    default() {
+      return []
+    }
   },
   // 使用全屏功能
   narrow: {
@@ -76,7 +78,7 @@ const btnList: {
     icon: RemoveIcon
   },
   {
-    title: isFull ? '缩小' : '放大',
+    title: isFull.value ? '缩小' : '放大',
     key: props.narrow ? 'fullResize' : 'resize',
     icon: ResizeIcon
   }

src/hooks/useChartDataFetch.hook.ts

@@ -62,16 +62,15 @@ export const useChartDataFetch = (
           if (res && res.data) {
             try {
               const filter = targetComponent.filter
-              // 更新回调函数
-              if (updateCallback) {
-                updateCallback(newFunctionHandle(res.data, filter))
-              } else {
               // eCharts 组件配合 vChart 库更新方式
               if (chartFrame === ChartFrameEnum.ECHARTS) {
                 if (vChartRef.value) {
                   vChartRef.value.setOption({ dataset: newFunctionHandle(res.data, filter) })
                 }
               }
+              // 更新回调函数
+              if (updateCallback) {
+                updateCallback(newFunctionHandle(res.data, filter))
               }
             } catch (error) {
               console.error(error)

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

@@ -1,4 +1,4 @@
-import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
 import { BarCommonConfig } from './index'
 import { CreateComponentType } from '@/packages/index.d'
 import cloneDeep from 'lodash/cloneDeep'
@@ -6,6 +6,15 @@ import dataJson from './data.json'
 
 export const includes = ['legend', 'xAxis', 'yAxis']
 
+export const seriesItem = {
+  type: 'bar',
+  barWidth: null,
+  itemStyle: {
+    color: null,
+    borderRadius: 0
+  }
+}
+
 export const option = {
   tooltip: {
     show: true,
@@ -27,27 +36,10 @@ export const option = {
     type: 'value'
   },
   dataset: { ...dataJson },
-  series: [
+  series: [seriesItem, seriesItem]
-    {
-      type: 'bar',
-      barWidth: null,
-      itemStyle: {
-        color: null,
-        borderRadius: 0
-      }
-    },
-    {
-      type: 'bar',
-      barWidth: null,
-      itemStyle: {
-        color: null,
-        borderRadius: 0
-      }
-    }
-  ]
 }
 
-export default class Config extends publicConfig implements CreateComponentType {
+export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = BarCommonConfig.key
   public chartConfig = cloneDeep(BarCommonConfig)
   // 图表配置项

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

@@ -1,25 +1,29 @@
 <template>
-  <v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
+  <v-chart
+    ref="vChartRef"
+    :theme="themeColor"
+    :option="option"
+    :manual-update="isPreview()"
+    :update-options="{
+      replaceMerge: replaceMergeArr
+    }"
+    autoresize
+  ></v-chart>
 </template>
 
 <script setup lang="ts">
-import { computed, PropType } from 'vue'
+import { ref, nextTick, computed, watch, PropType } from 'vue'
 import VChart from 'vue-echarts'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { BarChart } from 'echarts/charts'
-import { includes } from './config'
+import config, { includes, seriesItem } from './config'
 import { mergeTheme } 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 {
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
-  DatasetComponent,
-  GridComponent,
-  TooltipComponent,
-  LegendComponent
-} from 'echarts/components'
 
 const props = defineProps({
   themeSetting: {
@@ -31,23 +35,39 @@ const props = defineProps({
     required: true
   },
   chartConfig: {
-    type: Object as PropType<CreateComponentType>,
+    type: Object as PropType<config>,
     required: true
   }
 })
 
-use([
+use([DatasetComponent, CanvasRenderer, BarChart, GridComponent, TooltipComponent, LegendComponent])
-  DatasetComponent,
+
-  CanvasRenderer,
+const replaceMergeArr = ref<string[]>()
-  BarChart,
-  GridComponent,
-  TooltipComponent,
-  LegendComponent
-])
 
 const option = computed(() => {
   return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
 })
 
+// dataset 无法变更条数的补丁
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData, oldData) => {
+    if (newData.dimensions.length !== oldData.dimensions.length) {
+      const seriesArr = []
+      for (let i = 0; i < newData.dimensions.length - 1; i++) {
+        seriesArr.push(seriesItem)
+      }
+      replaceMergeArr.value = ['series']
+      props.chartConfig.option.series = seriesArr
+      nextTick(() => {
+        replaceMergeArr.value = []
+      })
+    }
+  },
+  {
+    deep: false
+  }
+)
+
 const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
 </script>

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

@@ -1,4 +1,4 @@
-import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
 import { BarCrossrangeConfig } from './index'
 import { CreateComponentType } from '@/packages/index.d'
 import cloneDeep from 'lodash/cloneDeep'
@@ -6,50 +6,40 @@ import dataJson from './data.json'
 
 export const includes = ['legend', 'xAxis', 'yAxis']
 
+export const seriesItem = {
+  type: 'bar',
+  barWidth: null,
+  itemStyle: {
+    color: null,
+    borderRadius: 0
+  }
+}
+
 export const option = {
   tooltip: {
     show: true,
     trigger: 'axis',
     axisPointer: {
       show: true,
-      type: 'shadow',
+      type: 'shadow'
-    },
+    }
   },
   legend: {
-    show: true,
+    show: true
   },
   xAxis: {
     show: true,
     type: 'value',
-    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
   },
   yAxis: {
     show: true,
-    type: 'category',
+    type: 'category'
   },
   dataset: { ...dataJson },
-  series: [
+  series: [seriesItem, seriesItem]
-    {
-      type: 'bar',
-      barWidth: null,
-      itemStyle: {
-        color: null,
-        borderRadius: 0,
-      },
-    },
-    {
-      type: 'bar',
-      barWidth: null,
-      itemStyle: {
-        color: null,
-        borderRadius: 0,
-      },
-    },
-  ],
 }
 
-export default class Config extends publicConfig
+export default class Config extends PublicConfigClass implements CreateComponentType {
-  implements CreateComponentType {
   public key = BarCrossrangeConfig.key
   public chartConfig = cloneDeep(BarCrossrangeConfig)
   // 图表配置项

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

@@ -1,24 +1,28 @@
 <template>
-  <v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
+  <v-chart
+    ref="vChartRef"
+    :theme="themeColor"
+    :option="option"
+    :manual-update="isPreview()"
+    :update-options="{
+      replaceMerge: replaceMergeArr
+    }"
+    autoresize
+  ></v-chart>
 </template>
 
 <script setup lang="ts">
-import { computed, PropType } from 'vue'
+import { ref, nextTick, computed, watch, PropType } from 'vue'
 import VChart from 'vue-echarts'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { BarChart } from 'echarts/charts'
 import { mergeTheme } from '@/packages/public/chart'
-import config, { includes } from './config'
+import config, { includes, seriesItem } from './config'
 import { useChartDataFetch } from '@/hooks'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { isPreview } from '@/utils'
-import {
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
-  DatasetComponent,
-  GridComponent,
-  TooltipComponent,
-  LegendComponent,
-} from 'echarts/components'
 
 const props = defineProps({
   themeSetting: {
@@ -35,18 +39,34 @@ const props = defineProps({
   }
 })
 
-use([
+use([DatasetComponent, CanvasRenderer, BarChart, GridComponent, TooltipComponent, LegendComponent])
-  DatasetComponent,
+
-  CanvasRenderer,
+const replaceMergeArr = ref<string[]>()
-  BarChart,
-  GridComponent,
-  TooltipComponent,
-  LegendComponent,
-])
 
 const option = computed(() => {
   return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
 })
 
+// dataset 无法变更条数的补丁
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData, oldData) => {
+    if (newData?.dimensions.length !== oldData?.dimensions.length) {
+      const seriesArr = []
+      for (let i = 0; i < newData.dimensions.length - 1; i++) {
+        seriesArr.push(seriesItem)
+      }
+      replaceMergeArr.value = ['series']
+      props.chartConfig.option.series = seriesArr
+      nextTick(() => {
+        replaceMergeArr.value = []
+      })
+    }
+  },
+  {
+    deep: false
+  }
+)
+
 const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
 </script>

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

@@ -1,4 +1,4 @@
-import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
 import { LineCommonConfig } from './index'
 import { CreateComponentType } from '@/packages/index.d'
 import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
@@ -6,6 +6,18 @@ import dataJson from './data.json'
 
 export const includes = ['legend', 'xAxis', 'yAxis']
 
+export const seriesItem = {
+  type: 'line',
+  lineStyle: {
+    type: 'solid',
+    width: 3,
+    itemStyle: {
+      color: null,
+      borderRadius: 0
+    }
+  }
+}
+
 export const option = {
   tooltip: {
     show: true,
@@ -19,43 +31,17 @@ export const option = {
   },
   xAxis: {
     show: true,
-    type: 'category',
+    type: 'category'
   },
   yAxis: {
     show: true,
     type: 'value'
   },
   dataset: { ...dataJson },
-  series: [
+  series: [seriesItem, seriesItem]
-    {
-      type: 'line',
-      lineStyle: {
-        type: 'solid',
-        width: 3,
-        color: {
-          type: 'linear',
-          colorStops: [
-            {
-              offset: 0,
-              color: chartColorsSearch[defaultTheme][0] // 0% 处的颜色
-            },
-            {
-              offset: 1,
-              color: chartColorsSearch[defaultTheme][1] // 100% 处的颜色
-            }
-          ],
-          globalCoord: false // 缺省为 false
-        },
-        shadowColor: chartColorsSearch[defaultTheme][2],
-        shadowBlur: 10,
-        shadowOffsetY: 20
-      },
-    }
-  ]
 }
 
-export default class Config extends publicConfig
+export default class Config extends PublicConfigClass implements CreateComponentType {
-  implements CreateComponentType {
   public key: string = LineCommonConfig.key
   public chartConfig = LineCommonConfig
   // 图表配置项

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

@@ -6,20 +6,6 @@
     :expanded="true"
   >
     <SettingItemBox name="线条">
-      <SettingItem name="颜色">
-        <n-color-picker
-          size="small"
-          :modes="['hex']"
-          v-model:value="item.lineStyle.color.colorStops[0].color"
-       ></n-color-picker>
-      </SettingItem>
-      <SettingItem name="颜色">
-        <n-color-picker
-          size="small"
-          :modes="['hex']"
-          v-model:value="item.lineStyle.color.colorStops[1].color"
-       ></n-color-picker>
-      </SettingItem>
       <SettingItem name="宽度">
         <n-input-number
           v-model:value="item.lineStyle.width"
@@ -37,26 +23,6 @@
        ></n-select>
       </SettingItem>
     </SettingItemBox>
-    <SettingItemBox name="阴影" :alone="true">
-      <SettingItem name="颜色">
-        <n-color-picker
-          size="small"
-          :modes="['hex']"
-          v-model:value="item.lineStyle.shadowColor"
-      ></n-color-picker>
-      </SettingItem>
-      
-    </SettingItemBox>
-    <SettingItemBox name="设置">
-     <SettingItem name="阴影">
-        <n-button
-          size="small"
-          @click="item.lineStyle.shadowColor = 'rgba(0, 0, 0, 0)'"
-        >
-          去除阴影
-        </n-button>
-      </SettingItem>
-    </SettingItemBox>
   </CollapseItem>
   <!-- Echarts 全局设置 -->
   <global-setting :optionData="optionData" :in-chart="true"></global-setting>

src/packages/components/Charts/Lines/LineCommon/data.json

@@ -1,33 +1,40 @@
 {
-  "dimensions": ["product", "data1"],
+  "dimensions": ["product", "data1", "data2"],
   "source": [
     {
       "product": "Mon",
-      "data1": 120
+      "data1": 120,
+      "data2": 130
     },
     {
       "product": "Tue",
-      "data1": 200
+      "data1": 200,
+      "data2": 130
     },
     {
       "product": "Wed",
-      "data1": 150
+      "data1": 150,
+      "data2": 312
     },
     {
       "product": "Thu",
-      "data1": 80
+      "data1": 80,
+      "data2": 268
     },
     {
       "product": "Fri",
-      "data1": 70
+      "data1": 70,
+      "data2": 155
     },
     {
       "product": "Sat",
-      "data1": 110
+      "data1": 110,
+      "data2": 117
     },
     {
       "product": "Sun",
-      "data1": 130
+      "data1": 130,
+      "data2": 160
     }
   ]
 }

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

@@ -2,25 +2,28 @@
   <v-chart
     ref="vChartRef"
     :theme="themeColor"
-    :option="option.value" 
+    :option="option"
     :manual-update="isPreview()"
-    autoresize>
+    :update-options="{
+      replaceMerge: replaceMergeArr
+    }"
+    autoresize
+  >
   </v-chart>
 </template>
 
 <script setup lang="ts">
-import { PropType, watch, reactive } from 'vue';
+import { PropType, computed, watch, ref, nextTick } from 'vue'
 import VChart from 'vue-echarts'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { LineChart } from 'echarts/charts'
-import config, { includes } from './config'
+import config, { includes, seriesItem } from './config'
 import { mergeTheme } from '@/packages/public/chart'
 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 { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 
 const props = defineProps({
   themeSetting: {
@@ -37,41 +40,34 @@ const props = defineProps({
   }
 })
 
-use([
+use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
-  DatasetComponent,
-  CanvasRenderer,
-  LineChart,
-  GridComponent,
-  TooltipComponent,
-  LegendComponent
-])
 
-const chartEditStore = useChartEditStore()
+const replaceMergeArr = ref<string[]>()
-const option = reactive({
+
-  value: {}
+const option = computed(() => {
+  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
 })
 
-// 初始化与渐变色处理
+// dataset 无法变更条数的补丁
-watch(() => chartEditStore.getEditCanvasConfig.chartThemeColor, (newColor: keyof typeof chartColorsSearch) => {
+watch(
-  if (!isPreview()) {
+  () => props.chartConfig.option.dataset,
-    const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
+  (newData, oldData) => {
-    props.chartConfig.option.series.forEach((value: any) => {
+    if (newData?.dimensions.length !== oldData?.dimensions.length) {
-      value.lineStyle.shadowColor = themeColor[2]
+      const seriesArr = []
-      value.lineStyle.color.colorStops.forEach((v: { color: string }, i: number) => {
+      for (let i = 0; i < newData.dimensions.length - 1; i++) {
-        v.color = themeColor[i]
+        seriesArr.push(seriesItem)
-      })
+      }
+      replaceMergeArr.value = ['series']
+      props.chartConfig.option.series = seriesArr
+      nextTick(() => {
+        replaceMergeArr.value = []
       })
     }
-  option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+  },
-  props.chartConfig.option = option.value
+  {
-}, {
+    deep: false
-  immediate: true,
+  }
-})
+)
-
-
-watch(() => props.chartConfig.option.dataset, () => {
-  option.value = props.chartConfig.option
-})
 
 const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
 </script>

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

@@ -1,4 +1,4 @@
-import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
 import { LineGradientSingleConfig } from './index'
 import { CreateComponentType } from '@/packages/index.d'
 import { graphic } from 'echarts/core'
@@ -20,7 +20,7 @@ const options = {
   },
   xAxis: {
     show: true,
-    type: 'category',
+    type: 'category'
   },
   yAxis: {
     show: true,
@@ -52,8 +52,7 @@ const options = {
   ]
 }
 
-export default class Config extends publicConfig
+export default class Config extends PublicConfigClass implements CreateComponentType {
-  implements CreateComponentType {
   public key: string = LineGradientSingleConfig.key
   public chartConfig = LineGradientSingleConfig
   // 图表配置项

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

@@ -6,7 +6,7 @@ export const LineGradientSingleConfig: ConfigType = {
   key: 'LineGradientSingle',
   chartKey: 'VLineGradientSingle',
   conKey: 'VCLineGradientSingle',
-  title: '单折线面积图',
+  title: '单折线渐变面积图',
   category: ChatCategoryEnum.LINE,
   categoryName: ChatCategoryEnumName.LINE,
   package: PackagesCategoryEnum.CHARTS,

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

@@ -1,10 +1,5 @@
 <template>
-  <v-chart 
+  <v-chart ref="vChartRef" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
-    ref="vChartRef" 
-    :theme="themeColor" 
-    :option="option.value" 
-    :manual-update="isPreview()" 
-    autoresize>
   </v-chart>
 </template>
 
@@ -37,14 +32,7 @@ const props = defineProps({
   }
 })
 
-use([
+use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
-  DatasetComponent,
-  CanvasRenderer,
-  LineChart,
-  GridComponent,
-  TooltipComponent,
-  LegendComponent,
-])
 const chartEditStore = useChartEditStore()
 
 const option = reactive({
@@ -52,7 +40,9 @@ const option = reactive({
 })
 
 // 渐变色处理
-watch(() => chartEditStore.getEditCanvasConfig.chartThemeColor, (newColor: keyof typeof chartColorsSearch) => {
+watch(
+  () => chartEditStore.getEditCanvasConfig.chartThemeColor,
+  (newColor: keyof typeof chartColorsSearch) => {
     if (!isPreview()) {
       const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
       props.chartConfig.option.series.forEach((value: any, index: number) => {
@@ -70,14 +60,21 @@ watch(() => chartEditStore.getEditCanvasConfig.chartThemeColor, (newColor: keyof
     }
     option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
     props.chartConfig.option = option.value
-}, {
+  },
+  {
     immediate: true
-})
+  }
+)
 
-
+watch(
-watch(() => props.chartConfig.option.dataset, () => {
+  () => props.chartConfig.option.dataset,
+  () => {
     option.value = props.chartConfig.option
-})
+  },
+  {
+    deep: false
+  }
+)
 
 const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
 </script>

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

@@ -1,4 +1,4 @@
-import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
 import { LineGradientsConfig } from './index'
 import { CreateComponentType } from '@/packages/index.d'
 import { graphic } from 'echarts/core'
@@ -20,7 +20,7 @@ const option = {
   },
   xAxis: {
     show: true,
-    type: 'category',
+    type: 'category'
   },
   yAxis: {
     show: true,
@@ -33,7 +33,7 @@ const option = {
       smooth: false,
       lineStyle: {
         width: 3,
-        type: 'solid',
+        type: 'solid'
       },
       areaStyle: {
         opacity: 0.8,
@@ -47,7 +47,7 @@ const option = {
             color: 'rgba(0,0,0,0)'
           }
         ])
-      },
+      }
     },
     {
       type: 'line',
@@ -69,13 +69,12 @@ const option = {
             color: 'rgba(0,0,0,0)'
           }
         ])
-      },
+      }
     }
   ]
 }
 
-export default class Config extends publicConfig
+export default class Config extends PublicConfigClass implements CreateComponentType {
-  implements CreateComponentType {
   public key: string = LineGradientsConfig.key
   public chartConfig = LineGradientsConfig
   // 图表配置项

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

@@ -6,7 +6,7 @@ export const LineGradientsConfig: ConfigType = {
   key: 'LineGradients',
   chartKey: 'VLineGradients',
   conKey: 'VCLineGradients',
-  title: '双折线面积图',
+  title: '双折线渐变面积图',
   category: ChatCategoryEnum.LINE,
   categoryName: ChatCategoryEnumName.LINE,
   package: PackagesCategoryEnum.CHARTS,

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

@@ -31,14 +31,7 @@ const props = defineProps({
   }
 })
 
-use([
+use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
-  DatasetComponent,
-  CanvasRenderer,
-  LineChart,
-  GridComponent,
-  TooltipComponent,
-  LegendComponent,
-])
 const chartEditStore = useChartEditStore()
 
 const option = reactive({
@@ -46,7 +39,9 @@ const option = reactive({
 })
 
 // 渐变色处理
-watch(() => chartEditStore.getEditCanvasConfig.chartThemeColor, (newColor: keyof typeof chartColorsSearch) => {
+watch(
+  () => chartEditStore.getEditCanvasConfig.chartThemeColor,
+  (newColor: keyof typeof chartColorsSearch) => {
     if (!isPreview()) {
       const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
       props.chartConfig.option.series.forEach((value: any, index: number) => {
@@ -64,13 +59,18 @@ watch(() => chartEditStore.getEditCanvasConfig.chartThemeColor, (newColor: keyof
     }
     option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
     props.chartConfig.option = option.value
-}, {
+  },
+  {
     immediate: true
-})
+  }
+)
 
-watch(() => props.chartConfig.option.dataset, () => {
+watch(
+  () => props.chartConfig.option.dataset,
+  () => {
     option.value = props.chartConfig.option
-})
+  }
+)
 
 const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
 </script>

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

@@ -0,0 +1,62 @@
+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
+import { LineLinearSingleConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
+import dataJson from './data.json'
+
+export const includes = ['legend', 'xAxis', 'yAxis']
+
+export const option = {
+  tooltip: {
+    show: true,
+    trigger: 'axis',
+    axisPointer: {
+      type: 'line'
+    }
+  },
+  legend: {
+    show: true
+  },
+  xAxis: {
+    show: true,
+    type: 'category'
+  },
+  yAxis: {
+    show: true,
+    type: 'value'
+  },
+  dataset: { ...dataJson },
+  series: [
+    {
+      type: 'line',
+      lineStyle: {
+        type: 'solid',
+        width: 3,
+        color: {
+          type: 'linear',
+          colorStops: [
+            {
+              offset: 0,
+              color: chartColorsSearch[defaultTheme][0] // 0% 处的颜色
+            },
+            {
+              offset: 1,
+              color: chartColorsSearch[defaultTheme][1] // 100% 处的颜色
+            }
+          ],
+          globalCoord: false // 缺省为 false
+        },
+        shadowColor: chartColorsSearch[defaultTheme][2],
+        shadowBlur: 10,
+        shadowOffsetY: 20
+      }
+    }
+  ]
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = LineLinearSingleConfig.key
+  public chartConfig = LineLinearSingleConfig
+  // 图表配置项
+  public option = echartOptionProfixHandle(option, includes)
+}

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

@@ -0,0 +1,86 @@
+<template>
+  <CollapseItem
+    v-for="(item, index) in seriesList"
+    :key="index"
+    :name="`样式`"
+    :expanded="true"
+  >
+    <SettingItemBox name="线条">
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="item.lineStyle.color.colorStops[0].color"
+       ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="item.lineStyle.color.colorStops[1].color"
+       ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="宽度">
+        <n-input-number
+          v-model:value="item.lineStyle.width"
+          :min="1"
+          :max="100"
+          size="small"
+          placeholder="自动计算"
+       ></n-input-number>
+      </SettingItem>
+      <SettingItem name="类型">
+        <n-select
+          v-model:value="item.lineStyle.type"
+          size="small"
+          :options="lineConf.lineStyle.type"
+       ></n-select>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="阴影" :alone="true">
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="item.lineStyle.shadowColor"
+      ></n-color-picker>
+      </SettingItem>
+      
+    </SettingItemBox>
+    <SettingItemBox name="设置">
+     <SettingItem name="阴影">
+        <n-button
+          size="small"
+          @click="item.lineStyle.shadowColor = 'rgba(0, 0, 0, 0)'"
+        >
+          去除阴影
+        </n-button>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+  <!-- Echarts 全局设置 -->
+  <global-setting :optionData="optionData" :in-chart="true"></global-setting>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed } from 'vue'
+import { lineConf } from '@/packages/chartConfiguration/echarts/index'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
+import {
+  GlobalSetting,
+  CollapseItem,
+  SettingItemBox,
+  SettingItem
+} from '@/components/Pages/ChartItemSetting'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<GlobalThemeJsonType>,
+    required: true
+  }
+})
+
+const seriesList = computed(() => {
+  return props.optionData.series
+})
+</script>

src/packages/components/Charts/Lines/LineLinearSingle/data.json

@@ -0,0 +1,33 @@
+{
+  "dimensions": ["product", "data1"],
+  "source": [
+    {
+      "product": "Mon",
+      "data1": 120
+    },
+    {
+      "product": "Tue",
+      "data1": 200
+    },
+    {
+      "product": "Wed",
+      "data1": 150
+    },
+    {
+      "product": "Thu",
+      "data1": 80
+    },
+    {
+      "product": "Fri",
+      "data1": 70
+    },
+    {
+      "product": "Sat",
+      "data1": 110
+    },
+    {
+      "product": "Sun",
+      "data1": 130
+    }
+  ]
+}

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

@@ -0,0 +1,15 @@
+import image from '@/assets/images/chart/charts/line_linear_single.png'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const LineLinearSingleConfig: ConfigType = {
+  key: 'LineLinearSingle',
+  chartKey: 'VLineLinearSingle',
+  conKey: 'VCLineLinearSingle',
+  title: '单折线渐变图',
+  category: ChatCategoryEnum.LINE,
+  categoryName: ChatCategoryEnumName.LINE,
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.ECHARTS,
+  image
+}

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

@@ -0,0 +1,74 @@
+<template>
+  <v-chart ref="vChartRef" :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 { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { LineChart } from 'echarts/charts'
+import config, { includes } from './config'
+import { mergeTheme } from '@/packages/public/chart'
+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'
+
+const props = defineProps({
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
+    required: true
+  },
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true
+  }
+})
+
+use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
+
+const chartEditStore = useChartEditStore()
+const option = reactive({
+  value: {}
+})
+
+// 初始化与渐变色处理
+watch(
+  () => chartEditStore.getEditCanvasConfig.chartThemeColor,
+  (newColor: keyof typeof chartColorsSearch) => {
+    if (!isPreview()) {
+      const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
+      props.chartConfig.option.series.forEach((value: any) => {
+        value.lineStyle.shadowColor = themeColor[2]
+        value.lineStyle.color.colorStops.forEach((v: { color: string }, i: number) => {
+          v.color = themeColor[i]
+        })
+      })
+    }
+    option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+    props.chartConfig.option = option.value
+  },
+  {
+    immediate: true
+  }
+)
+
+watch(
+  () => props.chartConfig.option.dataset,
+  () => {
+    option.value = props.chartConfig.option
+  },
+  {
+    deep: false
+  }
+)
+
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
+</script>

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

@@ -1,5 +1,6 @@
 import { LineCommonConfig } from './LineCommon/index'
+import { LineLinearSingleConfig } from './LineLinearSingle/index'
 import { LineGradientSingleConfig } from './LineGradientSingle/index'
 import { LineGradientsConfig } from './LineGradients/index'
 
-export default [LineCommonConfig, LineGradientSingleConfig, LineGradientsConfig]
+export default [LineCommonConfig, LineLinearSingleConfig, LineGradientSingleConfig, LineGradientsConfig]

src/packages/components/Charts/Maps/MapChina/config.ts

@@ -0,0 +1,68 @@
+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
+import { MapChinaConfig } from './index'
+import { chartInitConfig } from '@/settings/designSetting'
+import { CreateComponentType } from '@/packages/index.d'
+import dataJson from './data.json'
+
+export const includes = []
+
+export const option = {
+  dataset: dataJson,
+  tooltip: {
+    show: true,
+    trigger: 'item'
+  },
+  geo: {
+    show: false,
+    type: 'map',
+    roam: false,
+    map: 'china'
+  },
+  series: [
+    {
+      type: 'effectScatter',
+      coordinateSystem: 'geo',
+      symbolSize: 6,
+      zlevel: 1,
+      label: {
+        show: false
+      },
+      itemStyle: {
+        shadowBlur: 10,
+        color: '#00ECC8'
+      },
+      data: []
+    },
+    {
+      name: '地图',
+      type: 'map',
+      map: 'china',
+      zoom: 1, //缩放
+      itemStyle: {
+        // 背景色
+        areaColor: 'rgba(117, 236, 170, 0.3)',
+        emphasis: {
+          areaColor: 'rgba(117, 236, 170, .8)',
+          borderWidth: 1,
+          shadowBlur: 10,
+          shadowColor: '#75ecaa'
+        },
+        color: '#ffffff',
+        borderColor: '#75ecaa',
+        borderWidth: 1,
+        showHainanIsLands: true // 是否显示南海群岛
+      },
+      label: {
+        show: true,
+        color: '#ffffff'
+      },
+      data: []
+    }
+  ]
+}
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = MapChinaConfig.key
+  public attr = { ...chartInitConfig, w: 750, h: 800, zIndex: -1 }
+  public chartConfig = MapChinaConfig
+  public option = echartOptionProfixHandle(option, includes)
+}

src/packages/components/Charts/Maps/MapChina/config.vue

@@ -0,0 +1,82 @@
+<template>
+  <!-- Echarts 全局设置 -->
+  <div>
+    <global-setting :optionData="optionData" :in-chart="true"></global-setting>
+    <CollapseItem name="地图" :expanded="true">
+      <SettingItemBox name="省份" :alone="true">
+        <SettingItem name="背景颜色">
+          <n-color-picker
+            size="small"
+            :modes="['hex']"
+            v-model:value="seriesList[1].itemStyle.areaColor"
+          ></n-color-picker>
+        </SettingItem>
+        <SettingItem name="聚焦颜色（预览可见）">
+          <n-color-picker
+            size="small"
+            :modes="['hex']"
+            v-model:value="seriesList[1].itemStyle.emphasis.areaColor"
+          ></n-color-picker>
+        </SettingItem>
+        <SettingItem name="聚焦阴影（预览可见）">
+          <n-color-picker
+            size="small"
+            :modes="['hex']"
+            v-model:value="seriesList[1].itemStyle.emphasis.shadowColor"
+          ></n-color-picker>
+        </SettingItem>
+      </SettingItemBox>
+      <SettingItemBox name="边框">
+        <SettingItem name="颜色">
+          <n-color-picker
+            size="small"
+            :modes="['hex']"
+            v-model:value="seriesList[1].itemStyle.borderColor"
+          ></n-color-picker>
+        </SettingItem>
+        <SettingItem name="大小">
+          <n-input-number
+            v-model:value="seriesList[1].itemStyle.borderWidth"
+            :min="1"
+            size="small"
+            placeholder="请输入边框大小"
+          ></n-input-number>
+        </SettingItem>
+      </SettingItemBox>
+      <SettingItemBox name="其他">
+        <SettingItem>
+          <n-checkbox v-model:checked="seriesList[1].itemStyle.showHainanIsLands" size="small">显示南海群岛</n-checkbox>
+        </SettingItem>
+      </SettingItemBox>
+    </CollapseItem>
+    <CollapseItem name="标记" :expanded="true">
+      <SettingItemBox name="样式">
+        <SettingItem name="大小">
+          <n-input-number v-model:value="seriesList[0].symbolSize" size="small" :min="0"></n-input-number>
+        </SettingItem>
+        <SettingItem name="颜色">
+          <n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[0].itemStyle.color"></n-color-picker>
+        </SettingItem>
+      </SettingItemBox>
+    </CollapseItem>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed } from 'vue'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { lineConf } from '@/packages/chartConfiguration/echarts/index'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
+import { GlobalSetting } from '@/components/Pages/ChartItemSetting'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<GlobalThemeJsonType>,
+    required: true
+  }
+})
+
+const seriesList = computed(() => {
+  return props.optionData.series
+})
+</script>

src/packages/components/Charts/Maps/MapChina/data.json

@@ -0,0 +1,146 @@
+{
+  "point": [
+    {
+      "name": "北京",
+      "value": [116.2, 39.56, 1000]
+    }
+  ],
+  "map": [
+    {
+      "name": "北京市",
+      "value": 100
+    },
+    {
+      "name": "天津市",
+      "value": 99
+    },
+    {
+      "name": "河北省",
+      "value": 98
+    },
+    {
+      "name": "山西省",
+      "value": 97
+    },
+    {
+      "name": "内蒙古自治区",
+      "value": 96
+    },
+    {
+      "name": "辽宁省",
+      "value": 95
+    },
+    {
+      "name": "吉林省",
+      "value": 94
+    },
+    {
+      "name": "黑龙江省",
+      "value": 93
+    },
+    {
+      "name": "上海市",
+      "value": 92
+    },
+    {
+      "name": "江苏省",
+      "value": 91
+    },
+    {
+      "name": "浙江省",
+      "value": 90
+    },
+    {
+      "name": "安徽省",
+      "value": 89
+    },
+    {
+      "name": "福建省",
+      "value": 88
+    },
+    {
+      "name": "江西省",
+      "value": 87
+    },
+    {
+      "name": "山东省",
+      "value": 86
+    },
+    {
+      "name": "河南省",
+      "value": 85
+    },
+    {
+      "name": "湖北省",
+      "value": 84
+    },
+    {
+      "name": "湖南省",
+      "value": 83
+    },
+    {
+      "name": "广东省",
+      "value": 82
+    },
+    {
+      "name": "广西壮族自治区",
+      "value": 81
+    },
+    {
+      "name": "海南省",
+      "value": 80
+    },
+    {
+      "name": "重庆市",
+      "value": 79
+    },
+    {
+      "name": "四川省",
+      "value": 78
+    },
+    {
+      "name": "贵州省",
+      "value": 77
+    },
+    {
+      "name": "云南省",
+      "value": 76
+    },
+    {
+      "name": "西藏自治区",
+      "value": 75
+    },
+    {
+      "name": "陕西省",
+      "value": 74
+    },
+    {
+      "name": "甘肃省",
+      "value": 73
+    },
+    {
+      "name": "青海省",
+      "value": 72
+    },
+    {
+      "name": "宁夏回族自治区",
+      "value": 71
+    },
+    {
+      "name": "新疆维吾尔自治区",
+      "value": 70
+    },
+    {
+      "name": "台湾省",
+      "value": 69
+    },
+    {
+      "name": "香港特别行政区",
+      "value": 68
+    },
+    {
+      "name": "澳门特别行政区",
+      "value": 67
+    }
+  ]
+}

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

@@ -1,14 +1,15 @@
 import image from '@/assets/images/chart/charts/map.png'
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
-export const MapChineConfig: ConfigType = {
+export const MapChinaConfig: ConfigType = {
-  key: 'MapChine',
+  key: 'MapChina',
-  chartKey: 'VMapChine',
+  chartKey: 'VMapChina',
-  conKey: 'VCMapChine',
+  conKey: 'VCMapChina',
-  title: '北京地图',
+  title: '地图',
   category: ChatCategoryEnum.MAP,
   categoryName: ChatCategoryEnumName.MAP,
   package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.COMMON,
   image
 }

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

@@ -0,0 +1,94 @@
+<template>
+  <v-chart ref="vChartRef" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
+  </v-chart>
+</template>
+
+<script setup lang="ts">
+import { PropType, reactive, watch } from 'vue'
+import config, { includes } from './config'
+import VChart from 'vue-echarts'
+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 { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { isPreview } from '@/utils'
+import mapJson from './map.json'
+import mapJsonWithoutHainanIsLands from './mapWithoutHainanIsLands.json'
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent, GeoComponent } from 'echarts/components'
+
+const props = defineProps({
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
+    required: true
+  },
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true
+  }
+})
+
+use([
+  MapChart,
+  DatasetComponent,
+  CanvasRenderer,
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+  GeoComponent,
+  EffectScatterChart
+])
+
+registerMap('china', { geoJSON: mapJson as any, specialAreas: {} })
+
+const option = reactive({
+  value: mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+})
+
+const dataSetHandle = (dataset: any) => {
+  props.chartConfig.option.series.forEach((item: any) => {
+    if (item.type === 'effectScatter' && dataset.point) item.data = dataset.point
+    else if (item.type === 'map' && dataset.point) item.data = dataset.map
+    option.value = props.chartConfig.option
+  })
+}
+
+const mapTypeHandle = (show: boolean) => {
+  show
+    ? registerMap('china', { geoJSON: mapJson as any, specialAreas: {} })
+    : registerMap('china', { geoJSON: mapJsonWithoutHainanIsLands as any, specialAreas: {} })
+  option.value = props.chartConfig.option
+}
+
+watch(
+  () => props.chartConfig.option.series[1].itemStyle.showHainanIsLands,
+  newData => {
+    mapTypeHandle(newData)
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+watch(
+  () => props.chartConfig.option.dataset,
+  newData => {
+    dataSetHandle(newData)
+  },
+  {
+    immediate: true,
+    deep: false
+  }
+)
+
+// 预览
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  dataSetHandle(newData)
+})
+</script>

src/packages/components/Charts/Maps/MapChine/config.vue

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

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

@@ -1,13 +0,0 @@
-<template>
-  <div>
-    line组件渲染
-  </div>
-</template>
-
-<script setup lang="ts">
-
-</script>
-
-<style lang="scss" scoped>
-
-</style>

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

@@ -1,3 +1,3 @@
-import { MapChineConfig } from './MapChine/index'
+import { MapChinaConfig } from './MapChina/index'
 
-export default [MapChineConfig]
+export default [MapChinaConfig]

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

@@ -0,0 +1,62 @@
+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
+import { FunnelConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
+
+export const includes = ['legend']
+
+// 排序枚举
+export const FunnelOrderEnumList = [
+  { label: '倒三角', value: 'descending' },
+  { label: '正三角', value: 'ascending' }
+]
+// 标签位置枚举
+export const FunnelLabelPositionEnumList = [
+  { label: '内部', value: 'inside' },
+  { label: '外部', value: 'outside' },
+  { label: '内部左侧', value: 'insideLeft' },
+  { label: '内部右侧', value: 'insideRight' }
+]
+
+export const option = {
+  tooltip: {},
+  legend: {},
+  dataset: { ...dataJson },
+  series: [
+    {
+      name: 'Funnel',
+      type: 'funnel',
+      top: 70,
+      left: '10%',
+      width: '80%',
+      min: 0,
+      minSize: '0%',
+      maxSize: '100%',
+      sort: 'descending', // descending | ascending
+      gap: 5,
+      label: {
+        show: true,
+        position: 'inside',
+        fontSize: 12
+      },
+      itemStyle: {
+        borderColor: '#fff',
+        borderWidth: 0
+      },
+      emphasis: {
+        label: {
+          fontSize: 20
+        }
+      }
+    }
+  ]
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = FunnelConfig.key
+  public chartConfig = cloneDeep(FunnelConfig)
+
+  // 图表配置项
+  public option = echartOptionProfixHandle(option, includes)
+}

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

@@ -1,6 +1,67 @@
 <template>
+  <!-- Echarts 全局设置 -->
+  <global-setting :optionData="optionData" :in-chart="true"> </global-setting>
+  <!-- 漏斗图 -->
+  <collapse-item v-for="(item, index) in seriesList" :key="index" :name="`漏斗图`" expanded>
+    <setting-item-box name="排序" alone>
+      <setting-item>
+        <n-select v-model:value="item.sort" :options="FunnelOrderEnumList" size="small" />
+      </setting-item>
+    </setting-item-box>
+
+    <SettingItemBox name="范围" :alone="true">
+      <setting-item :name="`顶部距离：${item.top}px`">
+        <n-slider v-model:value="item.top" :min="0" :max="300" :format-tooltip="sliderFormatTooltip"></n-slider>
+      </setting-item>
+    </SettingItemBox>
+
+    <setting-item-box name="区块">
+      <setting-item name="边框大小">
+        <n-input-number v-model:value="item.itemStyle.borderWidth" :min="0" :max="10" size="small" />
+      </setting-item>
+      <setting-item name="边框颜色">
+        <n-color-picker v-model:value="item.itemStyle.borderColor" :modes="['hex']" size="small" />
+      </setting-item>
+      <setting-item name="间隔">
+        <n-input-number v-model:value="item.gap" :min="0" :max="20" size="small" />
+      </setting-item>
+    </setting-item-box>
+
+    <setting-item-box name="标签">
+      <setting-item name="是否显示">
+        <n-checkbox v-model:checked="item.label.show" size="small">标签</n-checkbox>
+      </setting-item>
+      <setting-item name="位置">
+        <n-select v-model:value="item.label.position" :options="FunnelLabelPositionEnumList" size="small" />
+      </setting-item>
+      <setting-item name="大小">
+        <n-input-number v-model:value="item.label.fontSize" :min="0" size="small" />
+      </setting-item>
+      <setting-item name="悬停时大小">
+        <n-input-number v-model:value="item.emphasis.label.fontSize" :min="0" size="small" />
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
 </template>
 
 <script setup lang="ts">
+import { PropType, computed } from 'vue'
+import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
+import { option, FunnelOrderEnumList, FunnelLabelPositionEnumList } from './config'
 
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option & GlobalThemeJsonType>,
+    required: true
+  }
+})
+
+const seriesList = computed(() => {
+  return props.optionData.series
+})
+
+const sliderFormatTooltip = (v: number) => {
+  return `${v}px`
+}
 </script>

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

@@ -0,0 +1,10 @@
+{
+  "dimensions": ["product", "dataOne"],
+  "source": [
+    { "product": "data1", "dataOne": 20 },
+    { "product": "data2", "dataOne": 40 },
+    { "product": "data3", "dataOne": 60 },
+    { "product": "data4", "dataOne": 80 },
+    { "product": "data5", "dataOne": 100 }
+  ]
+}

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

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

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

@@ -1,13 +1,41 @@
 <template>
-  <div>
+  <v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
-    水波
-  </div>
 </template>
 
 <script setup lang="ts">
+import { computed, PropType } from 'vue'
+import VChart from 'vue-echarts'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { FunnelChart } from 'echarts/charts'
+import { includes } from './config'
+import { mergeTheme } 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
+  }
+})
+
+use([DatasetComponent, CanvasRenderer, FunnelChart, GridComponent, TooltipComponent, LegendComponent])
+
+const option = computed(() => {
+  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+})
+
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
 </script>
-
-<style lang="scss" scoped>
-
-</style>

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

@@ -1,4 +1,4 @@
-import { publicConfig } from '@/packages/public'
+import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { ProcessConfig } from './index'
 import { chartInitConfig } from '@/settings/designSetting'
@@ -53,7 +53,7 @@ export const option = {
   offsetDegree: 0
 }
 
-export default class Config extends publicConfig implements CreateComponentType {
+export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = ProcessConfig.key
   public attr = { ...chartInitConfig, h: 500, zIndex: -1 }
   public chartConfig = cloneDeep(ProcessConfig)

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

@@ -58,6 +58,9 @@ watch(
   () => props.chartConfig.option.dataset,
   (newData: any) => {
     option.dataset = toNumber(newData, 2)
+  },
+  {
+    deep: false
   }
 )
 // 预览更新

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

@@ -0,0 +1,51 @@
+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
+import { RadarConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
+
+export const includes = ['legend']
+
+// 雷达形状
+export const RadarShapeEnumList = [
+  { label: '多边形', value: 'polygon' },
+  { label: '圆形', value: 'circle' }
+]
+
+export const option = {
+  tooltip: {
+    show: true
+  },
+  legend: {
+    data: dataJson.seriesData.map(i => i.name)
+  },
+  dataset: { ...dataJson },
+  radar: {
+    shape: 'polygon',
+    radius: ['0%', '60%'],
+    center: ['50%', '55%'],
+    splitArea: { show: true },
+    splitLine: { show: true },
+    axisName: { show: true, color: '#eee', fontSize: 12 },
+    axisLine: { show: true },
+    axisTick: { show: true },
+    indicator: dataJson.radarIndicator
+  },
+  series: [
+    {
+      name: 'radar',
+      type: 'radar',
+      areaStyle: {
+        opacity: 0.1
+      },
+      data: dataJson.seriesData
+    }
+  ]
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = RadarConfig.key
+  public chartConfig = cloneDeep(RadarConfig)
+  // 图表配置项
+  public option = echartOptionProfixHandle(option, includes)
+}

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

@@ -1,6 +1,141 @@
 <template>
+  <div>
+    <!-- Echarts 全局设置 -->
+    <global-setting :optionData="optionData" :in-chart="true"></global-setting>
+
+    <CollapseItem name="雷达" :expanded="true">
+      <SettingItemBox name="样式">
+        <SettingItem>
+          <n-checkbox v-model:checked="radarConfig.splitArea.show">背景</n-checkbox>
+        </SettingItem>
+        <SettingItem>
+          <n-checkbox v-model:checked="radarConfig.splitLine.show">分割线</n-checkbox>
+        </SettingItem>
+        <SettingItem name="雷达形状">
+          <n-select v-model:value="radarConfig.shape" size="small" :options="RadarShapeEnumList" placeholder="选择形状" />
+        </SettingItem>
+      </SettingItemBox>
+      
+      <SettingItemBox name="坐标轴">
+        <SettingItem>
+          <n-checkbox v-model:checked="radarConfig.axisLine.show">轴线</n-checkbox>
+        </SettingItem>
+        <SettingItem>
+          <n-checkbox v-model:checked="radarConfig.axisTick.show">刻度</n-checkbox>
+        </SettingItem>
+      </SettingItemBox>
+
+      <SettingItemBox name="范围">
+        <setting-item :name="`最小值：${radarProp.radius[0]}%`">
+          <n-slider
+            v-model:value="radarProp.radius[0]"
+            :min="0"
+            :max="100"
+            :format-tooltip="sliderFormatTooltip"
+            @update:value="updateRadius0"
+          ></n-slider>
+        </setting-item>
+        <setting-item :name="`最大值：${radarProp.radius[1]}%`">
+          <n-slider
+            v-model:value="radarProp.radius[1]"
+            :min="0"
+            :max="100"
+            :format-tooltip="sliderFormatTooltip"
+            @update:value="updateRadius1"
+          ></n-slider>
+        </setting-item>
+      </SettingItemBox>
+      
+      <SettingItemBox name="偏移">
+        <setting-item :name="`X 轴值：${radarProp.center[0]}%`">
+          <n-slider
+            v-model:value="radarProp.center[0]"
+            :min="0"
+            :max="100"
+            :format-tooltip="sliderFormatTooltip"
+            @update:value="updateCenter0"
+          ></n-slider>
+        </setting-item>
+        <setting-item :name="`Y 轴值：${radarProp.center[1]}%`">
+          <n-slider
+            v-model:value="radarProp.center[1]"
+            :min="0"
+            :max="100"
+            :format-tooltip="sliderFormatTooltip"
+            @update:value="updateCenter1"
+          ></n-slider>
+        </setting-item>
+      </SettingItemBox>
+
+      <SettingItemBox name="指示器">
+        <SettingItem name="颜色">
+          <n-color-picker size="small" :modes="['hex']" v-model:value="radarConfig.axisName.color"></n-color-picker>
+        </SettingItem>
+        <SettingItem name="大小">
+          <n-input-number v-model:value="radarConfig.axisName.fontSize" size="small" :min="9"></n-input-number>
+        </SettingItem>
+        <SettingItem>
+          <n-checkbox v-model:checked="radarConfig.axisName.show">文字标签</n-checkbox>
+        </SettingItem>
+      </SettingItemBox>
+
+      <SettingItemBox name="系列" :alone="true">
+        <SettingItem name="背景透明度">
+          <n-input-number
+            v-model:value="optionData.series[0].areaStyle.opacity"
+            size="small"
+            :min="0"
+            :max="1"
+            :step="0.1"
+          ></n-input-number>
+        </SettingItem>
+      </SettingItemBox>
+    </CollapseItem>
+  </div>
 </template>
 
 <script setup lang="ts">
+import { PropType, computed, reactive } from 'vue'
+import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { option, RadarShapeEnumList } from './config'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option & GlobalThemeJsonType>,
+    required: true
+  }
+})
+
+const radarConfig = computed<typeof option.radar>(() => {
+  return props.optionData.radar
+})
+
+const radarProp = reactive({
+  radius: [0, 60],
+  center: [50, 50]
+})
+
+// 更新处理
+const updateRadius0 = (value: number) => {
+  props.optionData.radar.radius[0] = `${value}%`
+}
+
+const updateRadius1 = (value: number) => {
+  props.optionData.radar.radius[1] = `${value}%`
+}
+
+// 更新处理
+const updateCenter0 = (value: number) => {
+  props.optionData.radar.center[0] = `${value}%`
+}
+
+const updateCenter1 = (value: number) => {
+  props.optionData.radar.center[1] = `${value}%`
+}
+
+// 百分比格式化 percent
+const sliderFormatTooltip = (v: number) => {
+  return `${v}%`
+}
 </script>

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

@@ -0,0 +1,20 @@
+{
+  "radarIndicator": [
+    { "name": "数据1", "max": 6500 },
+    { "name": "数据2", "max": 16000 },
+    { "name": "数据3", "max": 30000 },
+    { "name": "数据4", "max": 38000 },
+    { "name": "数据5", "max": 52000 },
+    { "name": "数据6", "max": 25000 }
+  ],
+  "seriesData": [
+    {
+      "name": "data1",
+      "value": [4200, 3000, 20000, 35000, 50000, 18000]
+    },
+    {
+      "name": "data2",
+      "value": [5000, 14000, 28000, 26000, 42000, 21000]
+    }
+  ]
+}

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

@@ -1,14 +1,15 @@
 import image from '@/assets/images/chart/charts/radar.png'
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const RadarConfig: ConfigType = {
   key: 'Radar',
   chartKey: 'VRadar',
   conKey: 'VCRadar',
-  title: '雷达',
+  title: '雷达图',
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.COMMON,
   image
 }

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

@@ -1,13 +1,69 @@
 <template>
-  <div>
+  <v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
-    水波
-  </div>
 </template>
 
 <script setup lang="ts">
+import { ref, computed, PropType, watch } from 'vue'
+import VChart from 'vue-echarts'
+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 { 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
+  }
+})
+
+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: any) => {
+  if (dataset.seriesData) {
+    props.chartConfig.option.series[0].data = dataset.seriesData
+    // @ts-ignore
+    props.chartConfig.option.legend.data = dataset.seriesData.map((i: { name: string }) => i.name)
+  }
+  if (dataset.radarIndicator) {
+    props.chartConfig.option.radar.indicator = dataset.radarIndicator
+  }
+  if (vChartRef.value && isPreview()) {
+    vChartRef.value.setOption(props.chartConfig.option)
+  }
+}
+
+watch(
+  () => props.chartConfig.option.dataset,
+  newData => {
+    dataSetHandle(newData)
+  },
+  {
+    deep: false
+  }
+)
+
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  dataSetHandle(newData)
+})
 </script>
-
-<style lang="scss" scoped>
-
-</style>

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

@@ -1,4 +1,4 @@
-import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { WaterPoloConfig } from './index'
 import cloneDeep from 'lodash/cloneDeep'
@@ -89,7 +89,7 @@ export const option = {
   ]
 }
 
-export default class Config extends publicConfig implements CreateComponentType
+export default class Config extends PublicConfigClass implements CreateComponentType
 {
   public key = WaterPoloConfig.key
   public chartConfig = cloneDeep(WaterPoloConfig)

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

@@ -10,6 +10,6 @@ export const WaterPoloConfig: ConfigType = {
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.CHARTS,
-  chartFrame: ChartFrameEnum.ECHARTS,
+  chartFrame: ChartFrameEnum.COMMON,
   image
 }

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

@@ -79,7 +79,8 @@ watch(
     option.value = props.chartConfig.option
   },
   {
-    immediate: true
+    immediate: true,
+    deep: false
   }
 )
 

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

@@ -1,4 +1,4 @@
-import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
 import { PieCircleConfig } from './index'
 import { CreateComponentType } from '@/packages/index.d'
 
@@ -54,7 +54,7 @@ const option = {
   ]
 }
 
-export default class Config extends publicConfig implements CreateComponentType {
+export default class Config extends PublicConfigClass implements CreateComponentType {
   public key: string = PieCircleConfig.key
 
   public chartConfig = PieCircleConfig

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

@@ -50,7 +50,8 @@ watch(
   () => props.chartConfig.option.dataset,
   newData => dataHandle(newData),
   {
-    immediate: true
+    immediate: true,
+    deep: false
   }
 )
 

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

@@ -1,4 +1,4 @@
-import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
 import { PieCommonConfig } from './index'
 import { CreateComponentType } from '@/packages/index.d'
 import dataJson from './data.json'
@@ -44,7 +44,7 @@ const option = {
   ]
 }
 
-export default class Config extends publicConfig implements CreateComponentType {
+export default class Config extends PublicConfigClass implements CreateComponentType {
   public key: string = PieCommonConfig.key
 
   public chartConfig = PieCommonConfig

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

@@ -1,4 +1,4 @@
-import {  publicConfig } from '@/packages/public'
+import {  PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { Border01Config } from './index'
 import cloneDeep from 'lodash/cloneDeep'
@@ -9,7 +9,7 @@ export const option = {
   backgroundColor: '#00000000'
 }
 
-export default class Config extends publicConfig implements CreateComponentType {
+export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = Border01Config.key
   public chartConfig = cloneDeep(Border01Config)
   public option = cloneDeep(option)

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

@@ -1,4 +1,4 @@
-import { publicConfig } from '@/packages/public'
+import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { Border02Config } from './index'
 import cloneDeep from 'lodash/cloneDeep'
@@ -8,8 +8,7 @@ export const option = {
   backgroundColor: '#00000000'
 }
 
-export default class Config extends publicConfig
+export default class Config extends PublicConfigClass implements CreateComponentType {
-  implements CreateComponentType {
   public key = Border02Config.key
   public chartConfig = cloneDeep(Border02Config)
   public option = cloneDeep(option)

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

@@ -1,4 +1,4 @@
-import { publicConfig } from '@/packages/public'
+import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { Border03Config } from './index'
 import cloneDeep from 'lodash/cloneDeep'
@@ -8,7 +8,7 @@ export const option = {
   backgroundColor: '#00000000'
 }
 
-export default class Config extends publicConfig implements CreateComponentType {
+export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = Border03Config.key
   public chartConfig = cloneDeep(Border03Config)
   public option = cloneDeep(option)

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

@@ -1,4 +1,4 @@
-import { publicConfig } from '@/packages/public'
+import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { Border04Config } from './index'
 import cloneDeep from 'lodash/cloneDeep'
@@ -13,7 +13,7 @@ export const option = {
   backgroundColor: '#00000000'
 }
 
-export default class Config extends publicConfig implements CreateComponentType {
+export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = Border04Config.key
   public chartConfig = cloneDeep(Border04Config)
   public option = cloneDeep(option)

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

@@ -1,4 +1,4 @@
-import { publicConfig } from '@/packages/public'
+import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { Border05Config } from './index'
 import cloneDeep from 'lodash/cloneDeep'
@@ -8,7 +8,7 @@ export const option = {
   backgroundColor: '#00000000'
 }
 
-export default class Config extends publicConfig implements CreateComponentType {
+export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = Border05Config.key
   public chartConfig = cloneDeep(Border05Config)
   public option = cloneDeep(option)

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

@@ -1,4 +1,4 @@
-import { publicConfig } from '@/packages/public'
+import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { Border06Config } from './index'
 import cloneDeep from 'lodash/cloneDeep'
@@ -8,7 +8,7 @@ export const option = {
   backgroundColor: '#00000000'
 }
 
-export default class Config extends publicConfig implements CreateComponentType {
+export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = Border06Config.key
   public chartConfig = cloneDeep(Border06Config)
   public option = cloneDeep(option)

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

@@ -1,4 +1,4 @@
-import { publicConfig } from '@/packages/public'
+import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { Border07Config } from './index'
 import cloneDeep from 'lodash/cloneDeep'
@@ -8,7 +8,7 @@ export const option = {
   backgroundColor: '#00000000'
 }
 
-export default class Config extends publicConfig implements CreateComponentType {
+export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = Border07Config.key
   public chartConfig = cloneDeep(Border07Config)
   public option = cloneDeep(option)

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

@@ -1,4 +1,4 @@
-import { publicConfig } from '@/packages/public'
+import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { Border08Config } from './index'
 import cloneDeep from 'lodash/cloneDeep'
@@ -10,7 +10,7 @@ export const option = {
   backgroundColor: '#00000000'
 }
 
-export default class Config extends publicConfig implements CreateComponentType {
+export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = Border08Config.key
   public chartConfig = cloneDeep(Border08Config)
   public option = cloneDeep(option)

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

@@ -1,4 +1,4 @@
-import { publicConfig } from '@/packages/public'
+import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { Border09Config } from './index'
 import cloneDeep from 'lodash/cloneDeep'
@@ -8,7 +8,7 @@ export const option = {
   backgroundColor: '#00000000'
 }
 
-export default class Config extends publicConfig implements CreateComponentType {
+export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = Border09Config.key
   public chartConfig = cloneDeep(Border09Config)
   public option = cloneDeep(option)

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

@@ -1,4 +1,4 @@
-import { publicConfig } from '@/packages/public'
+import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { Border10Config } from './index'
 import cloneDeep from 'lodash/cloneDeep'
@@ -8,7 +8,7 @@ export const option = {
   backgroundColor: '#00000000'
 }
 
-export default class Config extends publicConfig implements CreateComponentType {
+export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = Border10Config.key
   public chartConfig = cloneDeep(Border10Config)
   public option = cloneDeep(option)

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

@@ -1,4 +1,4 @@
-import { publicConfig } from '@/packages/public'
+import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { Border11Config } from './index'
 import cloneDeep from 'lodash/cloneDeep'
@@ -8,7 +8,7 @@ export const option = {
   backgroundColor: '#00000000'
 }
 
-export default class Config extends publicConfig implements CreateComponentType {
+export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = Border11Config.key
   public chartConfig = cloneDeep(Border11Config)
   public option = cloneDeep(option)

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

@@ -1,4 +1,4 @@
-import { publicConfig } from '@/packages/public'
+import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { Border12Config } from './index'
 import cloneDeep from 'lodash/cloneDeep'
@@ -8,7 +8,7 @@ export const option = {
   backgroundColor: '#00000000'
 }
 
-export default class Config extends publicConfig implements CreateComponentType {
+export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = Border12Config.key
   public chartConfig = cloneDeep(Border12Config)
   public option = cloneDeep(option)

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

@@ -1,4 +1,4 @@
-import { publicConfig } from '@/packages/public'
+import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { Border13Config } from './index'
 import cloneDeep from 'lodash/cloneDeep'
@@ -8,7 +8,7 @@ export const option = {
   backgroundColor: '#00000000'
 }
 
-export default class Config extends publicConfig implements CreateComponentType {
+export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = Border13Config.key
   public chartConfig = cloneDeep(Border13Config)
   public option = cloneDeep(option)

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

@@ -1,4 +1,4 @@
-import { publicConfig } from '@/packages/public'
+import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { Decorates01Config } from './index'
 import cloneDeep from 'lodash/cloneDeep'
@@ -10,7 +10,7 @@ export const option = {
   endWidth: 5
 }
 
-export default class Config extends publicConfig implements CreateComponentType {
+export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = Decorates01Config.key
   public chartConfig = cloneDeep(Decorates01Config)
   public option = cloneDeep(option)

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

@@ -1,4 +1,4 @@
-import { publicConfig } from '@/packages/public'
+import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { Decorates02Config } from './index'
 import cloneDeep from 'lodash/cloneDeep'
@@ -9,7 +9,7 @@ export const option = {
   lineHeight: 3
 }
 
-export default class Config extends publicConfig implements CreateComponentType {
+export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = Decorates02Config.key
   public chartConfig = cloneDeep(Decorates02Config)
   public option = cloneDeep(option)

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

@@ -1,16 +1,15 @@
-import { publicConfig } from '@/packages/public'
+import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { Decorates03Config } from './index'
 import cloneDeep from 'lodash/cloneDeep'
 
 export const option = {
-  dataset: '装饰-03',
   textColor: '#fff',
   textSize: 24,
   colors: ['#1dc1f5', '#1dc1f5'],
 }
 
-export default class Config extends publicConfig implements CreateComponentType {
+export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = Decorates03Config.key
   public chartConfig = cloneDeep(Decorates03Config)
   public option = cloneDeep(option)

src/packages/components/Decorates/Decorates/Decorates03/config.vue

@@ -56,11 +56,12 @@ import {
   SettingItemBox,
   SettingItem,
 } from '@/components/Pages/ChartItemSetting'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 import { option } from './config'
 
 const props = defineProps({
   optionData: {
-    type: Object as PropType<typeof option>,
+    type: Object as PropType<typeof option & GlobalThemeJsonType>,
     required: true,
   },
 })

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

@@ -1,4 +1,4 @@
-import { publicConfig } from '@/packages/public'
+import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { Decorates04Config } from './index'
 import cloneDeep from 'lodash/cloneDeep'
@@ -9,7 +9,7 @@ export const option = {
   reverse: false
 }
 
-export default class Config extends publicConfig implements CreateComponentType {
+export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = Decorates04Config.key
   public chartConfig = cloneDeep(Decorates04Config)
   public option = cloneDeep(option)

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

@@ -1,4 +1,4 @@
-import { publicConfig } from '@/packages/public'
+import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { Decorates05Config } from './index'
 import cloneDeep from 'lodash/cloneDeep'
@@ -8,7 +8,7 @@ export const option = {
   dur: 3
 }
 
-export default class Config extends publicConfig implements CreateComponentType {
+export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = Decorates05Config.key
   public chartConfig = cloneDeep(Decorates05Config)
   public option = cloneDeep(option)

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

@@ -1,4 +1,4 @@
-import { publicConfig } from '@/packages/public'
+import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { NumberConfig } from './index'
 import cloneDeep from 'lodash/cloneDeep'
@@ -18,7 +18,7 @@ export const option = {
   suffixColor: '#4a9ef8',
 }
 
-export default class Config extends publicConfig implements CreateComponentType {
+export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = NumberConfig.key
   public chartConfig = cloneDeep(NumberConfig)
   public option = cloneDeep(option)

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

@@ -6,8 +6,13 @@
       </span>
     </template>
     <span :style="`color:${numberColor};font-size:${numberSize}px`">
-      <n-number-animation :from="option.from" :to="option.dataset" :duration="dur * 1000" :show-separator="showSeparator"
+      <n-number-animation
-        :precision="precision"></n-number-animation>
+        :from="option.from"
+        :to="option.dataset"
+        :duration="dur * 1000"
+        :show-separator="showSeparator"
+        :precision="precision"
+      ></n-number-animation>
     </span>
     <template #suffix>
       <span :style="`color:${suffixColor};font-size:${numberSize}px`">
@@ -26,25 +31,16 @@ import { useChartDataFetch } from '@/hooks'
 const props = defineProps({
   chartConfig: {
     type: Object as PropType<CreateComponentType>,
-    required: true,
+    required: true
-  },
+  }
 })
 const option = reactive({
   from: 0,
-  dataset: 0,
+  dataset: 0
 })
 const { w, h } = toRefs(props.chartConfig.attr)
-let {
+let { dur, showSeparator, prefixText, prefixColor, suffixText, suffixColor, precision, numberSize, numberColor } =
-  dur,
+  toRefs(props.chartConfig.option)
-  showSeparator,
-  prefixText,
-  prefixColor,
-  suffixText,
-  suffixColor,
-  precision,
-  numberSize,
-  numberColor,
-} = toRefs(props.chartConfig.option)
 
 const updateNumber = (newData: number) => {
   // 原来的目标值作为新的数字动画的起始值
@@ -56,14 +52,19 @@ watch(
   () => props.chartConfig.option.from,
   () => {
     option.from = props.chartConfig.option.from
-  }, { immediate: true }
+  },
+  { immediate: true }
 )
 
 watch(
   () => props.chartConfig.option.dataset,
   () => {
     option.dataset = props.chartConfig.option.dataset
-  }, { immediate: true }
+  },
+  {
+    immediate: true,
+    deep: false
+  }
 )
 
 useChartDataFetch(props.chartConfig, useChartEditStore, updateNumber)

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

@@ -0,0 +1,38 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { TimeCommonConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+import { chartInitConfig } from '@/settings/designSetting'
+
+export enum FontWeightEnum {
+  NORMAL = '常规',
+  BOLD = '加粗'
+}
+
+export const FontWeightObject = {
+  [FontWeightEnum.NORMAL]: 'normal',
+  [FontWeightEnum.BOLD]: 'bold'
+}
+
+export const option = {
+  // 数据说明
+  timeSize: 24,
+  timeLineHeight: 50,
+  timeTextIndent: 2,
+  timeColor: '#E6F7FF',
+  fontWeight: 'normal',
+
+  //阴影
+  showShadow:  true,
+  hShadow: 0,
+  vShadow: 0,
+  blurShadow: 8,
+  colorShadow: '#0075ff'
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = TimeCommonConfig.key
+  public attr = { ...chartInitConfig, w: 300, h: 50, zIndex: -1 }
+  public chartConfig = cloneDeep(TimeCommonConfig)
+  public option = cloneDeep(option)
+}

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

@@ -0,0 +1,99 @@
+<template>
+  <CollapseItem name="内容" :expanded="true">
+    <SettingItemBox name="字体">
+      <SettingItem name="大小">
+        <n-input-number
+          v-model:value="optionData.timeSize"
+          size="small"
+          :min="1"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="粗细">
+        <n-select
+          v-model:value="optionData.fontWeight"
+          size="small"
+          :options="fontWeightOptions"
+        />
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="间距">
+      <SettingItem name="字距">
+        <n-input-number
+          v-model:value="optionData.timeTextIndent"
+          size="small"
+          :min="1"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="行距">
+        <n-input-number
+          v-model:value="optionData.timeLineHeight"
+          size="small"
+          :min="1"
+        ></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+
+    <SettingItemBox name="颜色">
+      <SettingItem name="时间">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.timeColor"
+        ></n-color-picker>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="阴影">
+      <SettingItem>
+        <n-space>
+          <n-switch v-model:value="optionData.showShadow" size="small" />
+          <n-text>展示阴影</n-text>
+        </n-space>
+      </SettingItem>
+      <SettingItem name="x">
+        <n-input-number v-model:value="optionData.hShadow" size="small"></n-input-number
+      ></SettingItem>
+      <SettingItem name="y">
+        <n-input-number v-model:value="optionData.vShadow" size="small"></n-input-number
+      ></SettingItem>
+      <SettingItem name="模糊">
+        <n-input-number
+          v-model:value="optionData.blurShadow"
+          size="small"
+        ></n-input-number
+      ></SettingItem>
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.colorShadow"
+        ></n-color-picker
+      ></SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+</template>
+<script setup lang="ts">
+import { PropType } from "vue";
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem,
+} from "@/components/Pages/ChartItemSetting";
+import { option, FontWeightEnum, FontWeightObject } from "./config";
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true,
+  },
+});
+const fontWeightOptions = [
+  {
+    label: FontWeightEnum.NORMAL,
+    value: FontWeightObject[FontWeightEnum.NORMAL],
+  },
+  {
+    label: FontWeightEnum.BOLD,
+    value: FontWeightObject[FontWeightEnum.BOLD],
+  },
+];
+</script>

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

@@ -0,0 +1,14 @@
+import image from '@/assets/images/chart/decorates/time-common.png'
+import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
+
+export const TimeCommonConfig: ConfigType = {
+  key: 'TimeCommon',
+  chartKey: 'VTimeCommon',
+  conKey: 'VCTimeCommon',
+  title: '通用时间',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.DECORATES,
+  image
+}

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

@@ -0,0 +1,92 @@
+<template>
+  <div class="go-decorates-number" :style="`width:${w}px;height:${h}px;`">
+    <div
+      :style="`color:${timeColor};font-size:${timeSize}px;line-height:${timeLineHeight}px;
+      letter-spacing:${timeTextIndent}px;font-weight:${fontWeight};
+      text-shadow: ${boxShadow}`"
+    >
+      {{ newData }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, ref, reactive, watch, onMounted, onUnmounted } from "vue";
+import { CreateComponentType } from "@/packages/index.d";
+import { useChartEditStore } from "@/store/modules/chartEditStore/chartEditStore";
+import { useChartDataFetch } from "@/hooks";
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true,
+  },
+});
+let yearMonthDay = ref("2021-2-3");
+let nowData = ref("08:00:00");
+let newData = ref("2021-2-3 08:00:00");
+let boxShadow = ref("none");
+
+const { w, h } = toRefs(props.chartConfig.attr);
+
+let {
+  timeColor,
+  timeSize,
+  timeLineHeight,
+  timeTextIndent,
+  fontWeight,
+  showShadow,
+  hShadow,
+  vShadow,
+  blurShadow,
+  colorShadow,
+} = toRefs(props.chartConfig.option);
+
+watch(
+  props.chartConfig.option,
+  () => {
+    if (props.chartConfig.option.showShadow) {
+      boxShadow.value = `${props.chartConfig.option.hShadow}px ${props.chartConfig.option.vShadow}px ${props.chartConfig.option.blurShadow}px ${props.chartConfig.option.colorShadow}`;
+    } else {
+      boxShadow.value = "none";
+    }
+  },
+  {
+    immediate: true,
+  }
+);
+onMounted(() => {
+  const timer = setInterval(() => {
+    var datetime = new Date();
+    var year = datetime.getFullYear();
+    var month =
+      datetime.getMonth() + 1 < 10
+        ? "0" + (datetime.getMonth() + 1)
+        : datetime.getMonth() + 1;
+    var date = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
+    var hh = datetime.getHours(); // 时
+    var mm = datetime.getMinutes(); // 分
+    var ss = datetime.getSeconds(); // 分
+    let time = "";
+    if (hh < 10) time += "0";
+    time += hh + ":";
+    if (mm < 10) time += "0";
+    time += mm + ":";
+    if (ss < 10) time += "0";
+    time += ss;
+    yearMonthDay.value = `${year}-${month}-${date}`;
+    nowData.value = time;
+    newData.value = yearMonthDay.value + " " + nowData.value;
+  }, 500);
+});
+onUnmounted(() => {
+  clearInterval();
+});
+useChartDataFetch(props.chartConfig, useChartEditStore);
+</script>
+
+<style lang="scss" scoped>
+@include go("decorates-number") {
+  text-align: center;
+}
+</style>

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

@@ -2,5 +2,6 @@ import { WeatherConfig } from './Weather/index'
 import { TimeConfig } from './Time/index'
 import { WeatherTimeConfig } from './WeatherTime/index'
 import { NumberConfig } from './Number/index'
+import { TimeCommonConfig } from './TimeCommon/index'
 
-export default [WeatherConfig, TimeConfig, WeatherTimeConfig, NumberConfig]
+export default [WeatherConfig, TimeCommonConfig, TimeConfig, WeatherTimeConfig, NumberConfig]

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

@@ -1,4 +1,4 @@
-import { publicConfig } from '@/packages/public'
+import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { ImageConfig } from './index'
 import cloneDeep from 'lodash/cloneDeep'
@@ -13,7 +13,7 @@ export const option = {
   borderRadius: 10
 }
 
-export default class Config extends publicConfig implements CreateComponentType
+export default class Config extends PublicConfigClass implements CreateComponentType
 {
   public key = ImageConfig.key
   public chartConfig = cloneDeep(ImageConfig)

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

@@ -46,7 +46,8 @@ watch(
     option.dataset = newData
   },
   {
-    immediate: true
+    immediate: true,
+    deep: false
   }
 )
 

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

@@ -1,4 +1,4 @@
-import { publicConfig } from '@/packages/public'
+import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { TextCommonConfig } from './index'
 import cloneDeep from 'lodash/cloneDeep'
@@ -31,7 +31,7 @@ export const option = {
   backgroundColor: '#00000000',
 }
 
-export default class Config extends publicConfig implements CreateComponentType
+export default class Config extends PublicConfigClass implements CreateComponentType
 {
   public key = TextCommonConfig.key
   public chartConfig = cloneDeep(TextCommonConfig)

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

@@ -57,8 +57,10 @@ watch(
   () => props.chartConfig.option.dataset,
   (newData: any) => {
     option.dataset = newData
-  }, {
+  },
-    immediate: true
+  {
+    immediate: true,
+    deep: false
   }
 )
 

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

@@ -1,4 +1,4 @@
-import { publicConfig } from '@/packages/public'
+import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { TextGradientConfig } from './index'
 import cloneDeep from 'lodash/cloneDeep'
@@ -13,7 +13,7 @@ export const option = {
   }
 }
 
-export default class Config extends publicConfig implements CreateComponentType {
+export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = TextGradientConfig.key
   public chartConfig = cloneDeep(TextGradientConfig)
   public option = cloneDeep(option)

src/packages/components/Informations/Texts/TextGradient/index.vue

@@ -32,7 +32,8 @@ watch(
     option.dataset = newData
   },
   {
-    immediate: true
+    immediate: true,
+    deep: false
   }
 )
 

src/packages/components/Tables/Tables/TableList/config.ts

@@ -1,4 +1,4 @@
-import { publicConfig } from '@/packages/public'
+import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { TableListConfig } from './index'
 import cloneDeep from 'lodash/cloneDeep'
@@ -29,7 +29,7 @@ export const option = {
   valueFormatter(item: { value: any}) { return item.value}
 }
 
-export default class Config extends publicConfig implements CreateComponentType {
+export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = TableListConfig.key
   public chartConfig = cloneDeep(TableListConfig)
   public option = cloneDeep(option)

src/packages/components/Tables/Tables/TableList/index.vue

@@ -169,6 +169,9 @@ watch(
   () => props.chartConfig.option.dataset,
   () => {
     onRestart()
+  },
+  {
+    deep: false
   }
 )
 

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

@@ -1,4 +1,4 @@
-import { publicConfig } from '@/packages/public'
+import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { TableScrollBoardConfig } from './index'
 import cloneDeep from 'lodash/cloneDeep'
@@ -9,20 +9,17 @@ export const option = {
   dataset: dataJson,
   index: true,
   columnWidth: [30, 100, 100],
-  align: ['center','right','right','right'],
+  align: ['center', 'right', 'right', 'right'],
   rowNum: 5,
   waitTime: 2,
   headerHeight: 35,
   carousel: 'single',
   headerBGC: '#00BAFF',
   oddRowBGC: '#003B51',
-  evenRowBGC: '#0A2732',
+  evenRowBGC: '#0A2732'
 }
 
-export default class Config
+export default class Config extends PublicConfigClass implements CreateComponentType {
-  extends publicConfig
-  implements CreateComponentType
-{
   public key = TableScrollBoardConfig.key
   public chartConfig = cloneDeep(TableScrollBoardConfig)
   public option = cloneDeep(option)

src/packages/index.d.ts

@@ -2,7 +2,7 @@ import type { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 import type { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
 
 export enum ChartFrameEnum {
-  // echarts 框架
+  // 支持 dataset 的 echarts 框架
   ECHARTS = 'echarts',
   // UI 组件框架
   NAIVE_UI = 'naiveUI',

src/packages/public/publicConfig.ts

@@ -36,7 +36,7 @@ const requestConfig: RequestConfigType = {
 }
 
 // 单实例类
-export class publicConfig implements PublicConfigType {
+export class PublicConfigClass implements PublicConfigType {
   public id = getUUID()
   public isGroup = false
   // 基本信息
@@ -78,8 +78,8 @@ export class publicConfig implements PublicConfigType {
   }
 }
 
-// 成组类 (部分属性不需要, 不继承 publicConfig)
+// 多选成组类
-export class PublicGroupConfigClass extends publicConfig implements CreateComponentGroupType {
+export class PublicGroupConfigClass extends PublicConfigClass implements CreateComponentGroupType {
   // 成组
   public isGroup = true
   // 名称

src/store/modules/chartEditStore/chartEditStore.ts

@@ -480,6 +480,8 @@ export const useChartEditStore = defineStore({
       try {
         // 暂不支持多选
         if (this.getTargetChart.selectId.length > 1) return
+        // 处理弹窗普通复制的场景
+        if (document.getElementsByClassName('n-modal-body-wrapper').length) return
 
         loadingStart()
         const index: number = this.fetchTargetIndex()

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue

@@ -79,7 +79,7 @@
     <!-- 骨架图 -->
     <go-skeleton :load="loading" :repeat="3"></go-skeleton>
     <!-- 请求配置model -->
-    <chart-data-request v-model:modelShow="requestShow"></chart-data-request>
+    <chart-data-request v-model:modelShow="requestShow" @sendHandle="sendHandle"></chart-data-request>
   </div>
 </template>
 

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMatchingAndShow/index.vue

@@ -33,7 +33,6 @@
     </n-timeline-item>
     <n-timeline-item type="success" :title="TimelineTitleEnum.CONTENT">
       <n-space vertical>
-        <n-text depth="3">ECharts 图表需符合 ECharts-setdata 数据规范</n-text>
         <n-space class="source-btn-box">
           <n-upload
             v-model:file-list="uploadFileListRef"
@@ -81,7 +80,7 @@
 
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
-import { PackagesCategoryEnum } from '@/packages/index.d'
+import { ChartFrameEnum } from '@/packages/index.d'
 import { RequestDataTypeEnum } from '@/enums/httpEnum'
 import { icon } from '@/plugins'
 import { DataResultEnum, TimelineTitleEnum } from '../../index.d'
@@ -120,9 +119,9 @@ const filterShow = computed(() => {
   return targetData.value.request.requestDataType === RequestDataTypeEnum.AJAX
 })
 
-// 是图表类型
+// 是支持 dataset 的图表类型
 const isCharts = computed(() => {
-  return targetData.value.chartConfig.package === PackagesCategoryEnum.CHARTS
+  return targetData.value.chartConfig.chartFrame === ChartFrameEnum.ECHARTS
 })
 
 // 处理映射列表状态结果
@@ -165,21 +164,23 @@ const dimensionsAndSourceHandle = () => {
 watch(
   () => targetData.value?.option?.dataset,
   (
-    newData: {
+    newData?: {
       source: any
       dimensions: any
     } | null
   ) => {
-    if (newData && isObject(newData)) {
+    if (newData && targetData?.value?.chartConfig?.chartFrame === ChartFrameEnum.ECHARTS) {
-      // 只有 Echarts 数据才有对应的格式
+      // 只有 DataSet 数据才有对应的格式
       source.value = newData
       if (isCharts.value) {
         dimensions.value = newData.dimensions
         dimensionsAndSource.value = dimensionsAndSourceHandle()
       }
-    } else {
+    } else if (newData !== undefined && newData !== null) {
       dimensionsAndSource.value = null
       source.value = newData
+    } else {
+      source.value = '此组件无数据源'
     }
   },
   {

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestTargetConfig/index.vue

@@ -62,7 +62,17 @@ import { selectTypeOptions, selectTimeOptions } from '@/views/chart/ContentConfi
 import { RequestHeader } from '../RequestHeader'
 import { isDev } from '@/utils'
 import { icon } from '@/plugins'
-import { chartDataUrl, rankListUrl, scrollBoardUrl, numberFloatUrl, numberIntUrl, textUrl, imageUrl } from '@/api/mock'
+import {
+  chartDataUrl,
+  chartSingleDataUrl,
+  rankListUrl,
+  scrollBoardUrl,
+  numberFloatUrl,
+  numberIntUrl,
+  textUrl,
+  imageUrl,
+  radarUrl
+} from '@/api/mock'
 
 const { HelpOutlineIcon } = icon.ionicons5
 const { targetData, chartEditStore } = useTargetData()
@@ -73,6 +83,9 @@ const apiList = [
   {
     value: `【图表】${chartDataUrl}`
   },
+  {
+    value: `【单数据图表】${chartSingleDataUrl}`
+  },
   {
     value: `【文本】${textUrl}`
   },
@@ -90,6 +103,9 @@ const apiList = [
   },
   {
     value: `【滚动表格】${scrollBoardUrl}`
+  },
+  {
+    value: `【雷达】${radarUrl}`
   }
 ]
 </script>

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/index.vue

@@ -33,7 +33,7 @@ import { useTargetData } from '../../../hooks/useTargetData.hook'
 import { RequestGlobalConfig } from './components/RequestGlobalConfig'
 import { RequestTargetConfig } from './components/RequestTargetConfig'
 
-const emit = defineEmits(['update:modelShow'])
+const emit = defineEmits(['update:modelShow', 'sendHandle'])
 
 const { targetData } = useTargetData()
 // 解构基础配置
@@ -50,6 +50,7 @@ defineProps({
 
 const closeHandle = () => {
   emit('update:modelShow', false)
+  emit('sendHandle')
 }
 </script>
 

src/views/chart/ContentConfigurations/components/ChartData/index.vue

@@ -1,16 +1,11 @@
 <template>
   <div class="go-chart-configurations-data" v-if="targetData">
     <setting-item-box name="请求方式" :alone="true">
-      <n-select
+      <n-select v-model:value="targetData.request.requestDataType" :disabled="isNotData" :options="selectOptions" />
-        v-model:value="targetData.request.requestDataType"
-        :options="selectOptions"
-      />
     </setting-item-box>
 
     <!-- 静态 -->
-    <chart-data-static
+    <chart-data-static v-if="targetData.request.requestDataType === RequestDataTypeEnum.STATIC"></chart-data-static>
-      v-if="targetData.request.requestDataType === RequestDataTypeEnum.STATIC"
-    ></chart-data-static>
 
     <!-- 动态 -->
     <chart-data-ajax v-else></chart-data-ajax>
@@ -18,6 +13,7 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import { SettingItemBox } from '@/components/Pages/ChartItemSetting'
 import { useTargetData } from '../hooks/useTargetData.hook'
 import { ChartDataStatic } from './components/ChartDataStatic/index'
@@ -38,4 +34,9 @@ const selectOptions: SelectCreateDataType[] = [
     value: RequestDataTypeEnum.AJAX
   }
 ]
+
+// 无数据源
+const isNotData = computed(() => {
+  return typeof targetData.value?.option?.dataset === 'undefined'
+})
 </script>

src/views/chart/ContentEdit/index.vue

@@ -7,6 +7,7 @@
     :showBottom="true"
     :depth="1"
     :xScroll="true"
+    @mousedown="mousedownHandleUnStop"
     @drop="dragHandle"
     @dragover="dragoverHandle"
     @dragenter="dragoverHandle"
@@ -88,7 +89,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
 import { useLayout } from './hooks/useLayout.hook'
 import { useAddKeyboard } from '../hooks/useKeyboard.hook'
 import { useSync } from '../hooks/useSync.hook'
-import { dragHandle, dragoverHandle, useMouseHandle } from './hooks/useDrag.hook'
+import { dragHandle, dragoverHandle, mousedownHandleUnStop, useMouseHandle } from './hooks/useDrag.hook'
 import { useComponentStyle, useSizeStyle } from './hooks/useStyle.hook'
 
 import { ContentBox } from '../ContentBox/index'