feat(src/views/chart): 新增部分小组件

+
+
+// 动画时间函数枚举
+export enum AnimationTimingFunctionNameEnum {
+  // 动画从头到尾的速度是相同的
+  LINEAR = '匀速',
+  // 默认值：动画以低速开始，然后加快，在结束前变慢。
+  EASE = '缓速',
+  // 动画以低速开始。
+  EASEIN = '低速开始',
+  // 动画以低速结束。
+  EASEOUT = '低速结束',
+  // 动画以低速开始和结束。
+  EASEINOUT = '低速开始和结束'
+}
+
+export enum AnimationTimingFunctionEnum {
+  // 动画从头到尾的速度是相同的
+  LINEAR = 'linear',
+  // 默认值：动画以低速开始，然后加快，在结束前变慢。
+  EASE = 'ease',
+  // 动画以低速开始。
+  EASEIN = 'ease-in',
+  // 动画以低速结束。
+  EASEOUT = 'ease-out',
+  // 动画以低速开始和结束。
+  EASEINOUT = 'ease-in-out'
+}
+
+// 动画执行状态枚举
+export enum AnimationPlayStateNameEnum {
+  // 暂停
+  PAUSED = '暂停',
+  // 运行
+  RUNNING = '运行'
+}
+
+export enum AnimationPlayStateEnum {
+  // 暂停
+  PAUSED = 'paused',
+  // 运行
+  RUNNING = 'running'
+}
+
+// 动画执行次数枚举
+export enum AnimationIterationCountNameEnum {
+  // 暂停
+  ITERATIONCOUNT = '无限次',
+}
+
+export enum AnimationIterationCountEnum {
+  // 暂停
+  ITERATIONCOUNT = 'infinite',
+}

@@ -16,19 +16,19 @@ export const enum areaEnum {
 }
 
 export interface regionInfo {
-  provinceValue:string
-  cityValue: string|null
-  countyValue: string|null
-  levelStr:areaEnum
+  provinceValue: string
+  cityValue: string | null
+  countyValue: string | null
+  levelStr: areaEnum
 }
 
 type itemOption = {
-  label:string
-  value:string
+  label: string
+  value: string
 }
-export interface regionOption{
-  provinceOptions: itemOption[],
-  cityOptions: itemOption[],
+export interface regionOption {
+  provinceOptions: itemOption[]
+  cityOptions: itemOption[]
   countryOptions: itemOption[]
 }
 
@@ -38,9 +38,9 @@ export interface historyParentType {
   level: string
 }
 
-export interface backMapLevel{
-  (levelStr:string): boolean
-  (level:string): boolean
+export interface backMapLevel {
+  (levelStr: string): boolean
+  (level: string): boolean
   (): void
   (): void
 }
@@ -68,6 +68,50 @@ export const option = {
   iconDistanceTop: 20,
   drillingIn: false,
   dataset: dataMaps,
+  dataConfig: {
+    map3D: [
+      {
+        name: '四川省',
+        value: [104.10068024609373, 30.580525329665175, 20000],
+        adcode: 510000,
+        height: 5,
+        itemStyle: {
+          color: '#E41717FF',
+          opacity: 1,
+          borderWidth: 0.4,
+          borderColor: '#5F9EA0'
+        }
+      }
+    ],
+    scatter3D: [
+      {
+        name: '广东省',
+        value: [113.2592945, 23.1301964, 20000],
+        adcode: 440000,
+        height: 5,
+        itemStyle: {
+          color: '#E41717FF',
+          opacity: 1,
+          borderWidth: 0.4,
+          borderColor: '#5F9EA0'
+        }
+      }
+    ],
+    bar3D: [
+      {
+        name: '安徽省',
+        value: [114.878463, 29.395191, 20000],
+        adcode: 340000,
+        height: 5,
+        itemStyle: {
+          color: '#E41717FF',
+          opacity: 1,
+          borderWidth: 0.4,
+          borderColor: '#5F9EA0'
+        }
+      }
+    ]
+  },
   saveClickRegion: {
     level: ''
   },
@@ -76,9 +120,9 @@ export const option = {
     showHainanIsLands: true,
     saveSelect: {
       levelStr: areaEnum.COUNTRY,
-      cityValue:null, 
-      countyValue:null,
-      provinceValue:'china'
+      cityValue: null,
+      countyValue: null,
+      provinceValue: 'china'
     }
   },
   tooltip: {
@@ -122,11 +166,30 @@ export const option = {
         }
       },
       itemStyle: {
-        color: 'green',
+        color: 'orange', //背景颜色
+        opacity: 1,
         borderWidth: 0.8,
-        borderColor: 'blue'
+        borderColor: 'rgb(62,215,213)'
+      },
+      emphasis: {
+        // 鼠标hover 高亮时图形和标签的样式 (当鼠标放上去时 label和itemStyle 的样式)
+        label: {
+          // label高亮时的配置
+          show: true,
+          textStyle: {
+            color: 'green',
+            fontSize: 14
+          }
+        },
+        itemStyle: {
+          color: 'red'
+        }
+      },
+      data: [],
+      viewControl: {
+        projection: 'perspective', // 先设置为这个perspective
+        // distance: 1000             //默认缩放比例
       },
-      data: []
     },
     {
       name: 'scatter3D',
@@ -135,7 +198,21 @@ export const option = {
       symbol: 'circle',
       symbolSize: 20,
       animation: true,
-      data: dataMaps
+      data: []
+    },
+    {
+      name: 'bar3D',
+      type: 'bar3D',
+      coordinateSystem: 'geo3D',
+      // // 倒角尺寸
+      bevelSize: 0,
+      minHeight: 12,
+      shading: 'lambert',
+      barSize: 2,
+      itemStyle: {
+        color: '#51e0f9'
+      },
+      data: []
     }
   ]
 }

@@ -41,7 +41,7 @@
       :drillingIn="optionData.drillingIn"
       @submit="onHandleSelectValues"
     />
-    <SettingItemBox name="颜色">
+    <SettingItemBox name="区块配置">
       <SettingItem name="区域颜色">
         <n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[0].itemStyle.color"></n-color-picker>
       </SettingItem>
@@ -60,6 +60,14 @@
           placeholder="请输入"
         ></n-input-number>
       </SettingItem>
+      <SettingItem name="透明度">
+        <n-input-number
+          v-model:value="seriesList[0].itemStyle.opacity"
+          :min="0"
+          size="small"
+          placeholder="请输入"
+        ></n-input-number>
+      </SettingItem>
       <SettingItem name="厚度">
         <n-input-number
           v-model:value="seriesList[0].regionHeight"
@@ -69,7 +77,7 @@
         ></n-input-number>
       </SettingItem>
     </SettingItemBox>
-    <SettingItemBox name="标题">
+    <SettingItemBox name="标题配置">
       <SettingItem name="是否显示">
         <n-switch v-model:value="seriesList[0].label.show" size="small"></n-switch>
       </SettingItem>
@@ -89,20 +97,20 @@
         ></n-input-number>
       </SettingItem>
     </SettingItemBox>
-    <SettingItemBox name="高亮">
+    <SettingItemBox name="高亮配置">
       <SettingItem name="标题显示">
-        <n-switch v-model:value="optionData.geo3D.emphasis.label.show" size="small"></n-switch>
+        <n-switch v-model:value="seriesList[0].emphasis.label.show" size="small"></n-switch>
       </SettingItem>
       <SettingItem name="颜色">
         <n-color-picker
           size="small"
           :modes="['hex']"
-          v-model:value="optionData.geo3D.emphasis.label.textStyle.color"
+          v-model:value="seriesList[0].emphasis.label.textStyle.color"
         ></n-color-picker>
       </SettingItem>
       <SettingItem name="大小">
         <n-input-number
-          v-model:value="optionData.geo3D.emphasis.label.textStyle.fontSize"
+          v-model:value="seriesList[0].emphasis.label.textStyle.fontSize"
           :min="0"
           size="small"
           placeholder="请输入"
@@ -112,16 +120,16 @@
         <n-color-picker
           size="small"
           :modes="['hex']"
-          v-model:value="optionData.geo3D.emphasis.itemStyle.color"
+          v-model:value="seriesList[0].emphasis.itemStyle.color"
         ></n-color-picker>
       </SettingItem>
     </SettingItemBox>
-    <SettingItemBox name="标记">
+    <SettingItemBox name="散点配置">
       <SettingItem name="大小">
         <n-input-number
           v-model:value="seriesList[1].symbolSize"
           :min="0"
-          :step="10"
+          :step="1"
           size="small"
           placeholder="请输入"
         ></n-input-number>
@@ -130,6 +138,142 @@
         <n-select :options="symbolOption" v-model:value="seriesList[1].symbol"></n-select>
       </SettingItem>
     </SettingItemBox>
+    <SettingItemBox name="柱状配置">
+      <SettingItem name="最小高度">
+        <n-input-number
+          v-model:value="seriesList[2].minHeight"
+          :min="0"
+          :step="1"
+          size="small"
+          placeholder="请输入"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="大小">
+        <n-input-number
+          v-model:value="seriesList[2].barSize"
+          :min="0"
+          :step="1"
+          size="small"
+          placeholder="请输入"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="倒角尺寸">
+        <n-input-number
+          v-model:value="seriesList[2].bevelSize"
+          :min="0"
+          :max="1"
+          :step="0.1"
+          size="small"
+          placeholder="请输入"
+        ></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="区块配置">
+      <template v-for="(item, map3DIndex) in optionData.dataConfig.map3D" :key="map3DIndex">
+        <setting-item name="地区名称">
+          <n-input v-model:value="item.name"> </n-input>
+        </setting-item>
+        <setting-item name="地区代码">
+          <n-input-number v-model:value="item.adcode"> </n-input-number>
+        </setting-item>
+        <setting-item name="离地高度">
+          <n-input-number v-model:value="item.height"> </n-input-number>
+        </setting-item>
+        <setting-item name="经度">
+          <n-input-number v-model:value="item.value[0]"> </n-input-number>
+        </setting-item>
+        <setting-item name="纬度">
+          <n-input-number v-model:value="item.value[1]"> </n-input-number>
+        </setting-item>
+        <setting-item name="区块颜色">
+          <n-color-picker size="small" :modes="['hex']" v-model:value="item.itemStyle.color"></n-color-picker>
+        </setting-item>
+        <setting-item name="区块透明度">
+          <n-input-number v-model:value="item.itemStyle.opacity"> </n-input-number>
+        </setting-item>
+        <setting-item>
+          <n-button size="small" @click="optionData.dataConfig.map3D.splice(map3DIndex, 1)"> - </n-button>
+        </setting-item>
+      </template>
+      <n-button
+        style="float: right"
+        size="small"
+        @click="optionData.dataConfig.map3D.push(cloneDeep(STATIC_SCATTER_CONFIG))"
+      >
+        +
+      </n-button>
+    </SettingItemBox>
+    <SettingItemBox name="散点配置">
+      <template v-for="(item, scatterIndex) in optionData.dataConfig.scatter3D" :key="scatterIndex">
+        <setting-item name="地区名称">
+          <n-input v-model:value="item.name"> </n-input>
+        </setting-item>
+        <setting-item name="地区代码">
+          <n-input-number v-model:value="item.adcode"> </n-input-number>
+        </setting-item>
+        <setting-item name="离地高度">
+          <n-input-number v-model:value="item.height"> </n-input-number>
+        </setting-item>
+        <setting-item name="经度">
+          <n-input-number v-model:value="item.value[0]"> </n-input-number>
+        </setting-item>
+        <setting-item name="纬度">
+          <n-input-number v-model:value="item.value[1]"> </n-input-number>
+        </setting-item>
+        <setting-item name="散点颜色">
+          <n-color-picker size="small" :modes="['hex']" v-model:value="item.itemStyle.color"></n-color-picker>
+        </setting-item>
+        <setting-item name="散点透明度">
+          <n-input-number v-model:value="item.itemStyle.opacity"> </n-input-number>
+        </setting-item>
+        <setting-item> </setting-item>
+        <setting-item>
+          <n-button size="small" @click="optionData.dataConfig.scatter3D.splice(scatterIndex, 1)"> - </n-button>
+        </setting-item>
+      </template>
+      <n-button
+        style="float: right"
+        size="small"
+        @click="optionData.dataConfig.scatter3D.push(cloneDeep(STATIC_SCATTER_CONFIG))"
+      >
+        +
+      </n-button>
+    </SettingItemBox>
+    <SettingItemBox name="柱状配置">
+      <template v-for="(item, barIndex) in optionData.dataConfig.bar3D" :key="barIndex">
+        <setting-item name="地区名称">
+          <n-input v-model:value="item.name"> </n-input>
+        </setting-item>
+        <setting-item name="地区代码">
+          <n-input-number v-model:value="item.adcode"> </n-input-number>
+        </setting-item>
+        <setting-item name="离地高度">
+          <n-input-number v-model:value="item.height"> </n-input-number>
+        </setting-item>
+        <setting-item name="经度">
+          <n-input-number v-model:value="item.value[0]"> </n-input-number>
+        </setting-item>
+        <setting-item name="纬度">
+          <n-input-number v-model:value="item.value[1]"> </n-input-number>
+        </setting-item>
+        <setting-item name="柱状颜色">
+          <n-color-picker size="small" :modes="['hex']" v-model:value="item.itemStyle.color"></n-color-picker>
+        </setting-item>
+        <setting-item name="柱状透明度">
+          <n-input-number v-model:value="item.itemStyle.opacity"> </n-input-number>
+        </setting-item>
+        <setting-item>
+          <n-button size="small" @click="optionData.dataConfig.bar3D.splice(barIndex, 1)"> - </n-button>
+        </setting-item>
+      </template>
+      <n-button
+        style="float: right"
+        size="small"
+        @click="optionData.dataConfig.bar3D.push(cloneDeep(STATIC_SCATTER_CONFIG))"
+      >
+        +
+      </n-button>
+    </SettingItemBox>
   </CollapseItem>
 </template>
 
@@ -140,6 +284,7 @@ import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 import { GlobalSetting } from '@/components/Pages/ChartItemSetting'
 import SelectCity from './components/SelectCity.vue'
 import { regionInfo } from './config'
+import { cloneDeep } from 'lodash'
 
 const props = defineProps({
   optionData: {
@@ -152,6 +297,17 @@ const seriesList = computed(() => {
   return props.optionData.series
 })
 
+const STATIC_SCATTER_CONFIG = {
+  name: '',
+  value: [0, 0, 0],
+  adcode: 0,
+  height: 0,
+  itemStyle: {
+    color: '',
+    opacity: 1
+  }
+}
+
 const symbolOption = ref([
   {
     label: 'circle',

-[
-  {
-    "name": "四川省",
-    "value": [104.10068024609373, 30.580525329665175, 20000],
-    "adcode": 510000,
-    "height": 5,
-    "itemStyle": {
-      "color": "pink",
-      "opacity": 1,
-      "borderWidth": 0.4,
-      "borderColor": "#5F9EA0"
+{
+  "map3D": [
+    {
+      "name": "四川省",
+      "value": [
+        104.10068024609373,
+        30.580525329665175,
+        20000
+      ],
+      "adcode": 510000,
+      "height": 5,
+      "itemStyle": {
+        "color": "green",
+        "opacity": 1,
+        "borderWidth": 0.4,
+        "borderColor": "#5F9EA0"
+      }
     }
-  },
-  {
-    "name": "湖南省",
-    "value": [111.73068512890623, 27.86754509366569, 20000],
-    "adcode": 430000,
-    "height": 4,
-    "itemStyle": {
-      "color": "blue",
-      "opacity": 1,
-      "borderWidth": 0.4,
-      "borderColor": "#5F9EA0"
+  ],
+  "scatter3D": [
+    {
+      "name": "广东省",
+      "value": [
+        113.2592945,
+        23.1301964,
+        20000
+      ],
+      "adcode": 440000,
+      "height": 5,
+      "itemStyle": {
+        "color": "blue",
+        "opacity": 1,
+        "borderWidth": 0.4,
+        "borderColor": "#5F9EA0"
+      }
     }
-  },
-  {
-    "name": "吉林省",
-    "value": [126.45236481640623, 43.7943407914815, 20000],
-    "adcode": 220000,
-    "height": 5,
-    "itemStyle": {
-      "color": "yellow",
-      "opacity": 1,
-      "borderWidth": 0.4,
-      "borderColor": "#5F9EA0"
+  ],
+  "bar3D": [
+    {
+      "name": "安徽省",
+      "value": [
+        114.878463,
+        29.395191,
+        20000
+      ],
+      "adcode": 340000,
+      "height": 5,
+      "itemStyle": {
+        "color": "red",
+        "opacity": 1,
+        "borderWidth": 0.4,
+        "borderColor": "#5F9EA0"
+      }
     }
-  },
-  {
-    "name": "山东省",
-    "value": [118.67404450390623, 36.16387465872037, 20000],
-    "adcode": 370000,
-    "height": 6,
-    "itemStyle": {
-      "color": "orange",
-      "opacity": 1,
-      "borderWidth": 0.4,
-      "borderColor": "#5F9EA0"
-    }
-  }
-]
+  ]
+}
\ No newline at end of file

@@ -14,7 +14,6 @@ import { registerMap } from 'echarts/core'
 import 'echarts-gl'
 import config, { areaEnum, dataPointI, optionType, historyParentType, backMapLevel } from './config'
 import { getGeoJsonMap } from '@/api/external/common'
-import dataMaps from './data.json'
 
 const props = defineProps({
   chartConfig: {
@@ -23,7 +22,8 @@ const props = defineProps({
   }
 })
 
-const backIcon = 'path://M853.333333 245.333333H245.333333l93.866667-93.866666c12.8-12.8 12.8-34.133333 0-46.933334-12.8-12.8-34.133333-12.8-46.933333 0l-145.066667 145.066667c-12.8 12.8-12.8 34.133333 0 46.933333l145.066667 145.066667c6.4 6.4 14.933333 10.666667 23.466666 10.666667s17.066667-4.266667 23.466667-10.666667c12.8-12.8 12.8-34.133333 0-46.933333L256 311.466667h597.333333c6.4 0 10.666667 4.266667 10.666667 10.666666v426.666667c0 6.4-4.266667 10.666667-10.666667 10.666667H170.666667c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h682.666666c40.533333 0 74.666667-34.133333 74.666667-74.666667V320c0-40.533333-34.133333-74.666667-74.666667-74.666667z'
+const backIcon =
+  'path://M853.333333 245.333333H245.333333l93.866667-93.866666c12.8-12.8 12.8-34.133333 0-46.933334-12.8-12.8-34.133333-12.8-46.933333 0l-145.066667 145.066667c-12.8 12.8-12.8 34.133333 0 46.933333l145.066667 145.066667c6.4 6.4 14.933333 10.666667 23.466666 10.666667s17.066667-4.266667 23.466667-10.666667c12.8-12.8 12.8-34.133333 0-46.933333L256 311.466667h597.333333c6.4 0 10.666667 4.266667 10.666667 10.666666v426.666667c0 6.4-4.266667 10.666667-10.666667 10.666667H170.666667c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h682.666666c40.533333 0 74.666667-34.133333 74.666667-74.666667V320c0-40.533333-34.133333-74.666667-74.666667-74.666667z'
 
 const { w, h } = toRefs(props.chartConfig.attr)
 
@@ -50,38 +50,39 @@ const toolBoxOption = ref({
   }
 })
 
-const excludeCountryLevels = ['PROVINCE','CITY'] //如果从右侧配置选择全中国
+const excludeCountryLevels = ['PROVINCE', 'CITY'] //如果从右侧配置选择全中国
 
 const includeCityLevels = ['CITY'] //如果从右侧配置选择省份
 
 //元组 优化if elseif else分支 隐藏返回图标
-const backIconMappingLevels: any[][] =[
+const backIconMappingLevels: any[][] = [
   [
-    (levelStr:string)=>levelStr===areaEnum.COUNTRY,
-    (level:string)=>excludeCountryLevels.includes(level),
-    ()=>toolBoxOption.value.feature.myFullButton.show=true,
-    ()=>toolBoxOption.value.feature.myFullButton.show=false
+    (levelStr: string) => levelStr === areaEnum.COUNTRY,
+    (level: string) => excludeCountryLevels.includes(level),
+    () => (toolBoxOption.value.feature.myFullButton.show = true),
+    () => (toolBoxOption.value.feature.myFullButton.show = false)
   ],
   [
-    (levelStr:string)=>levelStr===areaEnum.PROVINCE,
-    (level:string)=>includeCityLevels.includes(level),
-    ()=>toolBoxOption.value.feature.myFullButton.show=true,
-    ()=>toolBoxOption.value.feature.myFullButton.show=false
-  ],
+    (levelStr: string) => levelStr === areaEnum.PROVINCE,
+    (level: string) => includeCityLevels.includes(level),
+    () => (toolBoxOption.value.feature.myFullButton.show = true),
+    () => (toolBoxOption.value.feature.myFullButton.show = false)
+  ]
 ]
 
-
 watch(
   () => props.chartConfig.option,
-  (newData:optionType) => {
+  (newData: optionType) => {
     const { iconColor, iconDistanceRight, iconDistanceTop, mapRegion } = newData
-    const { saveSelect }=mapRegion
-    const { levelStr }=saveSelect
-    const findBackLevel = backIconMappingLevels.find((backLevelItem: backMapLevel[])=>backLevelItem[0](levelStr)) as backMapLevel[]
-    if(findBackLevel){
-      if(findBackLevel[0]){
+    const { saveSelect } = mapRegion
+    const { levelStr } = saveSelect
+    const findBackLevel = backIconMappingLevels.find((backLevelItem: backMapLevel[]) =>
+      backLevelItem[0](levelStr)
+    ) as backMapLevel[]
+    if (findBackLevel) {
+      if (findBackLevel[0]) {
         const findLevel = findBackLevel[1](saveLevelStr.level)
-        if(findLevel)findBackLevel[2]()
+        if (findLevel) findBackLevel[2]()
         else findBackLevel[3]()
       }
     }
@@ -161,7 +162,7 @@ const saveGeojson: Recordable = ref({}) // 保存geojson
 
 const chinaDefaultRegionId = ref(100000) //如果是china则adcode为100000
 
-const saveLevelStr = reactive<{level:historyParentType["level"]}>({
+const saveLevelStr = reactive<{ level: historyParentType['level'] }>({
   // 地区级别
   level: ''
 })
@@ -180,7 +181,7 @@ const getGeojson = (regionId: number | string) => {
         const { geoJson, name, code, level } = res.data
         const geoJsonFile = JSON.parse(geoJson)
         if (!geoJsonFile) return
-        saveGeojson.value = geoJsonFile//保存一份服务端返回的geojson
+        saveGeojson.value = geoJsonFile //保存一份服务端返回的geojson
         const nameChina = name === '中国' ? 'china' : name
         registerMap(level === areaEnum.COUNTRY ? nameChina : code, { geoJSON: geoJsonFile, specialAreas: {} })
         show.value = false
@@ -209,16 +210,6 @@ const getParentAdcode = (adcode: number) => {
   return adcodeNum
 }
 
-watch(
-  () => w.value,
-  (value: number) => {
-    chartInstance.value.resize({
-      width: value + 'px',
-      height: h.value + 'px'
-    })
-  }
-)
-
 const initMap = async () => {
   chartInstance.value = echarts.init(map3DRef.value)
   await nextTick()
@@ -246,20 +237,41 @@ onMounted(() => {
   initMap()
 })
 
+watch(
+  () => [w.value, h.value],
+  async (newValue: number[]) => {
+    await nextTick()
+    chartInstance.value.resize({
+      width: newValue.at(-2) + 'px',
+      height: newValue.at(-1) + 'px'
+    })
+  }
+)
+
 //处理数据标点
 const handleDataPoint = (newData: string | number) => {
   if (newData === 'china') {
-    props.chartConfig.option.dataset = dataMaps
+    props.chartConfig.option.dataset = props.chartConfig.option.dataConfig
     props.chartConfig.option.series.forEach((item: Recordable) => {
       if (item.type === 'scatter3D') {
-        item.data = dataMaps
+        item.data = props.chartConfig.option.dataConfig['scatter3D']
+      }
+      if (item.type === 'bar3D') {
+        item.data = props.chartConfig.option.dataConfig['bar3D']
       }
     })
   } else {
-    props.chartConfig.option.dataset = dataMaps.filter((item: dataPointI) => item.adcode === newData)
+    props.chartConfig.option.dataset = props.chartConfig.option.dataConfig['map3D'].filter(
+      (item: dataPointI) => item.adcode === newData
+    )
     props.chartConfig.option.series.forEach((item: Recordable) => {
       if (item.type === 'scatter3D') {
-        item.data = dataMaps.filter((item: dataPointI) => item.adcode === newData)
+        item.data = props.chartConfig.option.dataConfig['scatter3D'].filter(
+          (item: dataPointI) => item.adcode === newData
+        )
+      }
+      if (item.type === 'bar3D') {
+        item.data = props.chartConfig.option.dataConfig['bar3D'].filter((item: dataPointI) => item.adcode === newData)
       }
     })
   }
@@ -275,7 +287,7 @@ watch(
       props.chartConfig.option.series.forEach((item: Recordable) => {
         if (item.type === 'map3D') {
           item.map = newData
-          item.data = props.chartConfig.option.dataset
+          item.data = props.chartConfig.option.dataset['map3D']
         }
       })
       handleSetOption(chartInstance.value, props.chartConfig.option)
@@ -311,7 +323,7 @@ watch(
     try {
       props.chartConfig.option.series.forEach((item: Recordable) => {
         if (item.type === 'map3D') {
-          item.data = newData
+          item.data = newData['map3D']
         }
       })
       handleSetOption(chartInstance.value, props.chartConfig.option)

+<template>
+  <!-- 原生方式，没有使用vue-echarts -->
+  <n-space vertical>
+    <n-spin :show="show">
+      <div :style="`width:${w}px;height:${h}px;`" ref="map3DRef"></div>
+    </n-spin>
+  </n-space>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, nextTick, PropType, toRefs, watch, reactive } from 'vue'
+import * as echarts from 'echarts'
+import { registerMap } from 'echarts/core'
+import 'echarts-gl'
+import config, { areaEnum, dataPointI, optionType, historyParentType, backMapLevel } from './config'
+import { getGeoJsonMap } from '@/api/external/common'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true
+  }
+})
+
+const backIcon =
+  'path://M853.333333 245.333333H245.333333l93.866667-93.866666c12.8-12.8 12.8-34.133333 0-46.933334-12.8-12.8-34.133333-12.8-46.933333 0l-145.066667 145.066667c-12.8 12.8-12.8 34.133333 0 46.933333l145.066667 145.066667c6.4 6.4 14.933333 10.666667 23.466666 10.666667s17.066667-4.266667 23.466667-10.666667c12.8-12.8 12.8-34.133333 0-46.933333L256 311.466667h597.333333c6.4 0 10.666667 4.266667 10.666667 10.666666v426.666667c0 6.4-4.266667 10.666667-10.666667 10.666667H170.666667c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h682.666666c40.533333 0 74.666667-34.133333 74.666667-74.666667V320c0-40.533333-34.133333-74.666667-74.666667-74.666667z'
+
+const { w, h } = toRefs(props.chartConfig.attr)
+
+const map3DRef = ref()
+
+const show = ref(true)
+
+const chartInstance = ref()
+
+const toolBoxOption = ref({
+  show: true,
+  right: 110,
+  top: 20,
+  feature: {
+    myFullButton: {
+      show: false,
+      title: '返回',
+      icon: backIcon,
+      iconStyle: {
+        color: ''
+      },
+      onclick: () => handleBack()
+    }
+  }
+})
+
+const excludeCountryLevels = ['PROVINCE', 'CITY'] //如果从右侧配置选择全中国
+
+const includeCityLevels = ['CITY'] //如果从右侧配置选择省份
+
+//元组 优化if elseif else分支 隐藏返回图标
+const backIconMappingLevels: any[][] = [
+  [
+    (levelStr: string) => levelStr === areaEnum.COUNTRY,
+    (level: string) => excludeCountryLevels.includes(level),
+    () => (toolBoxOption.value.feature.myFullButton.show = true),
+    () => (toolBoxOption.value.feature.myFullButton.show = false)
+  ],
+  [
+    (levelStr: string) => levelStr === areaEnum.PROVINCE,
+    (level: string) => includeCityLevels.includes(level),
+    () => (toolBoxOption.value.feature.myFullButton.show = true),
+    () => (toolBoxOption.value.feature.myFullButton.show = false)
+  ]
+]
+
+watch(
+  () => props.chartConfig.option,
+  (newData: optionType) => {
+    const { iconColor, iconDistanceRight, iconDistanceTop, mapRegion } = newData
+    const { saveSelect } = mapRegion
+    const { levelStr } = saveSelect
+    const findBackLevel = backIconMappingLevels.find((backLevelItem: backMapLevel[]) =>
+      backLevelItem[0](levelStr)
+    ) as backMapLevel[]
+    if (findBackLevel) {
+      if (findBackLevel[0]) {
+        const findLevel = findBackLevel[1](saveLevelStr.level)
+        if (findLevel) findBackLevel[2]()
+        else findBackLevel[3]()
+      }
+    }
+    toolBoxOption.value.feature.myFullButton.iconStyle.color = iconColor //返回图标颜色
+    toolBoxOption.value.right = iconDistanceRight
+    toolBoxOption.value.top = iconDistanceTop
+  },
+  {
+    deep: true
+  }
+)
+
+//追加echarts右上角自带toolbox
+props.chartConfig.option = {
+  ...props.chartConfig.option,
+  ...{ toolbox: toolBoxOption.value }
+}
+
+//地图点击返回
+const handleBack = async () => {
+  stopWatch()
+  if (props.chartConfig.option.drillingIn) {
+    //如果是从右边配置里设置的，比如点击四川省，然后点击返回
+    const savePopParent = saveHistoryParent.value.pop()
+    let saveAdcode = savePopParent?.adcode as string | number
+    saveLevelStr.level = savePopParent?.level as string
+    if (!savePopParent) {
+      saveAdcode = getParentAdcode(props.chartConfig.option.mapRegion.adcode)
+      saveLevelStr.level = (regionMapParentArea as Recordable)[props.chartConfig.option.mapRegion.saveSelect.levelStr]
+    }
+    if (saveAdcode === 0) {
+      saveAdcode = 'china'
+      saveLevelStr.level = areaEnum.COUNTRY
+    }
+    const exist = await getGeojson(saveAdcode)
+    const adcode = saveAdcode === 100000 ? 'china' : saveAdcode
+    props.chartConfig.option.saveClickRegion.level = saveLevelStr.level
+    if (exist) {
+      //fix解决点击下钻返回后页面为空问题
+      props.chartConfig.option.mapRegion.adcode = adcode
+    }
+  }
+}
+
+//地区上级对应配置
+const regionMapParentArea = {
+  PROVINCE: areaEnum.COUNTRY, //省份的上一级 中国
+  CITY: areaEnum.PROVINCE, //城市的上一级 省份
+  COUNTY: areaEnum.CITY, //县或者区的上一级 城市
+  TOWN: areaEnum.COUNTY //镇的上一级 县或者区
+}
+
+//地图点击
+const handleMap3DClick = async (params: Recordable) => {
+  if (props.chartConfig.option.drillingIn) {
+    const { name } = params
+    saveGeojson.value?.features.forEach((item: Recordable) => {
+      if (item.properties.name === name) {
+        const level = item.properties.level.toUpperCase()
+        const adcode = item.properties.adcode
+        if (level === 'DISTRICT') return //下钻暂且不支持地区
+        if (String(adcode).startsWith('15') && level === areaEnum.CITY) return //特殊处理地区码15开头的
+        props.chartConfig.option.mapRegion.adcode = adcode
+        props.chartConfig.option.saveClickRegion.level = level
+        saveLevelStr.level = level
+        handleDataPoint(adcode)
+        saveHistoryParent.value.push({
+          adcode: item.properties.parent.adcode,
+          level: (regionMapParentArea as Recordable)[level]
+        })
+      }
+    })
+  }
+}
+
+const saveGeojson: Recordable = ref({}) // 保存geojson
+
+const chinaDefaultRegionId = ref(100000) //如果是china则adcode为100000
+
+const saveLevelStr = reactive<{ level: historyParentType['level'] }>({
+  // 地区级别
+  level: ''
+})
+
+const saveHistoryParent = ref<historyParentType[]>([])
+
+//动态注册地图
+const getGeojson = (regionId: number | string) => {
+  try {
+    return new Promise<boolean>(resolve => {
+      const { levelStr } = props.chartConfig.option.mapRegion.saveSelect //右侧配置项获取的行政级别
+      getGeoJsonMap(
+        regionId === 'china' ? chinaDefaultRegionId.value : regionId,
+        !saveLevelStr.level ? levelStr : saveLevelStr.level //没有则获取右侧配置的行政级别
+      ).then(res => {
+        const { geoJson, name, code, level } = res.data
+        const geoJsonFile = JSON.parse(geoJson)
+        if (!geoJsonFile) return
+        saveGeojson.value = geoJsonFile //保存一份服务端返回的geojson
+        const nameChina = name === '中国' ? 'china' : name
+        registerMap(level === areaEnum.COUNTRY ? nameChina : code, { geoJSON: geoJsonFile, specialAreas: {} })
+        show.value = false
+        resolve(true)
+      })
+    })
+  } catch (error) {
+    show.value = false
+    console.error('注册地图出错', error)
+    //注册出错则注册空的，不然在选择正确的adcode，则视图无法更新
+    registerMap(props.chartConfig.option.mapRegion.adcode, { geoJSON: {} as any, specialAreas: {} })
+  }
+}
+
+//异步时先注册空的 保证初始化不报错
+registerMap(props.chartConfig.option.mapRegion.adcode, { geoJSON: {} as any, specialAreas: {} })
+
+//传adcode 获取上级
+const getParentAdcode = (adcode: number) => {
+  let adcodeNum = 100000
+  saveGeojson.value?.features.forEach((item: Recordable) => {
+    if (item.properties.adcode === adcode) {
+      adcodeNum = item.properties.parent.adcode
+    }
+  })
+  return adcodeNum
+}
+
+const initMap = async () => {
+  chartInstance.value = echarts.init(map3DRef.value)
+  await nextTick()
+  await getGeojson(props.chartConfig.option.mapRegion.adcode)
+  await nextTick().then(() => {
+    handleSetOption(chartInstance.value, props.chartConfig.option)
+  })
+  chartInstance.value.on('click', (e: Recordable) => {
+    handleMap3DClick(e)
+  })
+}
+
+// 手动触发渲染
+const handleSetOption = (instance: any, option: Recordable) => {
+  if (!instance) return
+  try {
+    instance.clear()
+    instance.setOption(option)
+  } catch (error) {
+    console.error('触发渲染出错', error)
+  }
+}
+
+onMounted(() => {
+  initMap()
+})
+
+watch(
+  () => [w.value, h.value],
+  async (newValue: number[]) => {
+    await nextTick()
+    chartInstance.value.resize({
+      width: newValue.at(-2) + 'px',
+      height: newValue.at(-1) + 'px'
+    })
+  }
+)
+
+//处理数据标点
+const handleDataPoint = (newData: string | number) => {
+  if (newData === 'china') {
+    props.chartConfig.option.dataset = props.chartConfig.option.dataConfig
+    props.chartConfig.option.series.forEach((item: Recordable) => {
+      if (item.type === 'scatter3D') {
+        item.data = props.chartConfig.option.dataConfig['scatter3D']
+      }
+      if (item.type === 'bar3D') {
+        item.data = props.chartConfig.option.dataConfig['bar3D']
+      }
+    })
+  } else {
+    props.chartConfig.option.dataset = props.chartConfig.option.dataConfig['map3D'].filter(
+      (item: dataPointI) => item.adcode === newData
+    )
+    props.chartConfig.option.series.forEach((item: Recordable) => {
+      if (item.type === 'scatter3D') {
+        item.data = props.chartConfig.option.dataConfig['scatter3D'].filter(
+          (item: dataPointI) => item.adcode === newData
+        )
+      }
+      if (item.type === 'bar3D') {
+        item.data = props.chartConfig.option.dataConfig['bar3D'].filter((item: dataPointI) => item.adcode === newData)
+      }
+    })
+  }
+}
+
+//监听地图展示区域发生变化
+watch(
+  () => `${props.chartConfig.option.mapRegion.adcode}`,
+  async (newData: string | number) => {
+    try {
+      await getGeojson(newData)
+      props.chartConfig.option.geo3D.map = newData
+      props.chartConfig.option.series.forEach((item: Recordable) => {
+        if (item.type === 'map3D') {
+          item.map = newData
+          item.data = props.chartConfig.option.dataset['map3D']
+        }
+      })
+      handleSetOption(chartInstance.value, props.chartConfig.option)
+      handleDataPoint(newData)
+    } catch (error) {
+      console.log('展示区域发生变化出错', error)
+    }
+  },
+  {
+    immediate: true
+  }
+)
+
+// 监听地图右侧配置项变化
+const stopWatch = watch(
+  props.chartConfig.option,
+  async newData => {
+    try {
+      handleSetOption(chartInstance.value, newData)
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
+    deep: true
+  }
+)
+
+// 监听地图dataset配置项变化
+watch(
+  () => props.chartConfig.option.dataset,
+  newData => {
+    try {
+      props.chartConfig.option.series.forEach((item: Recordable) => {
+        if (item.type === 'map3D') {
+          item.data = newData['map3D']
+        }
+      })
+      handleSetOption(chartInstance.value, props.chartConfig.option)
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
+    deep: true
+  }
+)
+</script>

@@ -27,7 +27,6 @@ import { getDeviceActiveTime } from '@/api/external/common/index'
 import dayjs from 'dayjs'
 import DeviceLatestTable from './components/DeviceLatestTable.vue'
 import { getDeviceLatest, getProfileAttrs } from '@/api/external/common'
-import { NButton } from 'naive-ui'
 
 const props = defineProps({
   chartConfig: {

@@ -8,7 +8,6 @@ export const option = {
   dataset: '',
   attribute: {
     bgColor1:'#00e0db',
-    bgColor2:'#66ffff',
   }
 }
 

@@ -8,14 +8,6 @@
         <n-button size="small" @click="optionData.attribute.bgColor1 = '#00e0db'"> 恢复默认 </n-button>
       </SettingItem>
     </SettingItemBox>
-    <SettingItemBox :name="`装饰2`">
-      <SettingItem name="颜色">
-        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor2"></n-color-picker>
-      </SettingItem>
-      <SettingItem>
-        <n-button size="small" @click="optionData.attribute.bgColor2 = '#66ffff'"> 恢复默认 </n-button>
-      </SettingItem>
-    </SettingItemBox>
   </CollapseItem>
 </template>
 

@@ -32,7 +32,6 @@
           <path
             id="矩形"
             fill-rule="evenodd"
-            :style="{fill: attribute.bgColor2}"
             opacity="0"
             d="M0 87.26L87.26 87.26L87.26 0L0 0L0 87.26Z"
           />

+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
+import { Decorates13Config } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
+
+export const option = {
+  dataset: 66,
+  unitStr: '人',
+  grid: {
+    top: 200,
+    bottom: 300
+  },
+  xAxis: {
+    data: [],
+    axisTick: {
+      show: false
+    },
+    axisLine: {
+      show: false
+    }
+  },
+  yAxis: {
+    splitLine: {
+      show: false
+    },
+    axisTick: {
+      show: false
+    },
+    axisLine: {
+      show: false
+    },
+    axisLabel: {
+      show: false
+    }
+  },
+  series: [
+    {
+      name: '',
+      type: 'pictorialBar',
+      symbolSize: [100, 45],
+      symbolOffset: [-10, -20],
+      z: 12,
+      data: [
+        {
+          name: '',
+          value: 66,
+          symbolPosition: 'end',
+          itemStyle: {
+            normal: {
+              color: 'rgba(2, 163, 243,0.5)' //圆柱顶部颜色
+            }
+          }
+        }
+      ]
+    },
+    {
+      name: '',
+      type: 'pictorialBar',
+      symbolSize: [100, 45],
+      symbolOffset: [-10, 24],
+      z: 12,
+      data: [
+        {
+          name: '',
+          value: 66,
+          itemStyle: {
+            normal: {
+              color: 'rgba(2, 163, 243, 1)' //圆柱底部颜色
+            }
+          }
+        }
+      ]
+    },
+    {
+      type: 'bar',
+      barWidth: 100,
+      data: [
+        {
+          name: '',
+          value: 66,
+          label: {
+            normal: {
+              show: true,
+              formatter: '{c}' + '人',
+              position: 'top',
+              textStyle: {
+                color: 'rgba(2, 163, 243, 1)', //柱子对应数值颜色
+                fontSize: 40,
+                fontWeight: 600
+              }
+            }
+          },
+          itemStyle: {
+            normal: {
+              color: {
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                type: 'linear',
+                global: false,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: 'rgba(18, 246, 255, 0)'
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(2, 163, 243, 1)' //底部渐变颜色
+                  }
+                ]
+              }
+            }
+          }
+        }
+      ]
+    },
+    //往上是内部柱状图
+    //往下是外部柱状图
+    {
+      name: '',
+      type: 'pictorialBar',
+      symbolSize: [340, 45],
+      symbolOffset: [-10, -20],
+      z: 12,
+      data: [
+        {
+          name: '',
+          value: '100',
+          symbolPosition: 'end',
+          itemStyle: {
+            normal: {
+              color: 'rgba(0, 255, 136, 0)' //圆柱顶部颜色
+            }
+          }
+        }
+      ]
+    },
+    {
+      name: '',
+      type: 'pictorialBar',
+      symbolSize: [150, 75],
+      symbolOffset: [-10, 41],
+      z: 12,
+      data: [
+        {
+          name: '',
+          value: '100',
+          itemStyle: {
+            normal: {
+              color: 'rgba(2, 163, 243, .1)' //圆柱底部颜色
+            }
+          }
+        }
+      ]
+    },
+    {
+      name: '',
+      type: 'pictorialBar',
+      symbolSize: [150, 75],
+      symbolOffset: [-10, 55],
+      z: 11,
+      data: [
+        {
+          name: '',
+          value: '100',
+          itemStyle: {
+            normal: {
+              color: 'transparent',
+              borderColor: 'rgba(2, 163, 243, 1)', //底部内圆圈颜色
+              borderWidth: 30
+            }
+          }
+        }
+      ]
+    },
+    {
+      name: '',
+      type: 'pictorialBar',
+      symbolSize: [200, 100],
+      symbolOffset: [-10, 62],
+      z: 10,
+      data: [
+        {
+          name: '关井数',
+          value: '100',
+          itemStyle: {
+            normal: {
+              color: 'transparent',
+              borderColor: 'rgba(2, 163, 243, 1)', //底部外圆圈颜色
+              borderType: 'dashed',
+              borderWidth: 2
+            }
+          }
+        }
+      ]
+    },
+    {
+      type: 'bar',
+      silent: true,
+      barWidth: 140,
+      barGap: '-120%',
+      data: [
+        {
+          name: '',
+          value: '100',
+          label: {
+            normal: {
+              show: false
+            }
+          },
+          itemStyle: {
+            normal: {
+              color: {
+                x: 1,
+                y: 1,
+                x2: 1,
+                y2: 0,
+                type: 'linear',
+                global: false,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: 'rgba(0, 255, 136, 0)'
+                  },
+                  {
+                    offset: 0.3,
+                    color: 'rgba(0, 255, 136, .1)'
+                  },
+                  {
+                    offset: 0.5,
+                    color: 'rgba(0, 255, 136, .1)'
+                  },
+                  {
+                    offset: 0.8,
+                    color: 'rgba(0, 255, 136, .1)'
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(0, 255, 136, 0)' //底部渐变颜色
+                  }
+                ]
+              }
+            }
+          }
+        }
+      ]
+    }
+  ]
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = Decorates13Config.key
+  public chartConfig = cloneDeep(Decorates13Config)
+  // 图表配置项
+  public option = echartOptionProfixHandle(option, includes)
+}

+<template>
+  <!-- Echarts 全局设置 -->
+  <global-setting :optionData="optionData"></global-setting>
+  <CollapseItem name="配置" :expanded="true">
+    <setting-item-box name="数据点配置">
+      <setting-item name="数据">
+        <n-input-number v-model:value="optionData.dataset"></n-input-number>
+      </setting-item>
+      <setting-item name="单位">
+        <n-input v-model:value="optionData.unitStr"></n-input>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="grid配置">
+      <setting-item name="顶部">
+        <n-input-number v-model:value="optionData.grid.top"></n-input-number>
+      </setting-item>
+      <setting-item name="底部">
+        <n-input-number v-model:value="optionData.grid.bottom"></n-input-number>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="内部圆柱">
+      <setting-item name="顶部颜色">
+        <n-color-picker size="small" v-model:value="seriesList[0].data[0].itemStyle.normal.color"></n-color-picker>
+      </setting-item>
+      <setting-item name="底部颜色">
+        <n-color-picker size="small" v-model:value="seriesList[1].data[0].itemStyle.normal.color"></n-color-picker>
+      </setting-item>
+      <setting-item name="数字颜色">
+        <n-color-picker
+          size="small"
+          v-model:value="seriesList[2].data[0].label.normal.textStyle.color"
+        ></n-color-picker>
+      </setting-item>
+      <setting-item name="底部渐变色1">
+        <n-color-picker
+          size="small"
+          v-model:value="seriesList[2].data[0].itemStyle.normal.color.colorStops[0].color"
+        ></n-color-picker>
+      </setting-item>
+      <setting-item name="底部渐变色1">
+        <n-color-picker
+          size="small"
+          v-model:value="seriesList[2].data[0].itemStyle.normal.color.colorStops[1].color"
+        ></n-color-picker>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="外部圆柱">
+      <setting-item name="顶部颜色">
+        <n-color-picker size="small" v-model:value="seriesList[3].data[0].itemStyle.normal.color"></n-color-picker>
+      </setting-item>
+      <setting-item name="底部颜色">
+        <n-color-picker size="small" v-model:value="seriesList[4].data[0].itemStyle.normal.color"></n-color-picker>
+      </setting-item>
+      <setting-item name="底部内圆圈颜色">
+        <n-color-picker
+          size="small"
+          v-model:value="seriesList[5].data[0].itemStyle.normal.borderColor"
+        ></n-color-picker>
+      </setting-item>
+      <setting-item name="底部外圆圈颜色">
+        <n-color-picker
+          size="small"
+          v-model:value="seriesList[6].data[0].itemStyle.normal.borderColor"
+        ></n-color-picker>
+      </setting-item>
+      <setting-item name="底部渐变色1">
+        <n-color-picker
+          size="small"
+          v-model:value="seriesList[7].data[0].itemStyle.normal.color.colorStops[0].color"
+        ></n-color-picker>
+      </setting-item>
+      <setting-item name="底部渐变色2">
+        <n-color-picker
+          size="small"
+          v-model:value="seriesList[7].data[0].itemStyle.normal.color.colorStops[1].color"
+        ></n-color-picker>
+      </setting-item>
+      <setting-item name="底部渐变色3">
+        <n-color-picker
+          size="small"
+          v-model:value="seriesList[7].data[0].itemStyle.normal.color.colorStops[2].color"
+        ></n-color-picker>
+      </setting-item>
+      <setting-item name="底部渐变色4">
+        <n-color-picker
+          size="small"
+          v-model:value="seriesList[7].data[0].itemStyle.normal.color.colorStops[3].color"
+        ></n-color-picker>
+      </setting-item>
+      <setting-item name="底部渐变色5">
+        <n-color-picker
+          size="small"
+          v-model:value="seriesList[7].data[0].itemStyle.normal.color.colorStops[4].color"
+        ></n-color-picker>
+      </setting-item>
+    </setting-item-box>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed } from 'vue'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
+import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<GlobalThemeJsonType> & PropType<any>,
+    required: true
+  }
+})
+
+const seriesList = computed(() => {
+  return props.optionData.series
+})
+</script>

+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, chartKey, conKey } = useWidgetKey('Decorates13',true)
+
+export const Decorates13Config: ConfigType = {
+    key,
+    chartKey,
+    conKey,
+    title: '装饰13',
+    category: ChatCategoryEnum.DECORATE,
+    categoryName: ChatCategoryEnumName.DECORATE,
+    package: PackagesCategoryEnum.DECORATES,
+    chartFrame: ChartFrameEnum.COMMON,
+    image: 'decorates13.png',
+}

+<template>
+  <v-chart :theme="themeColor" :init-options="initOptions" :option="option.value" autoresize> </v-chart>
+</template>
+
+<script setup lang="ts">
+import { PropType, watch, reactive } from 'vue'
+import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
+import { use } from 'echarts/core'
+import { 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 { useChartDataFetch } from '@/hooks'
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
+
+const props = defineProps({
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
+    required: true
+  },
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true
+  }
+})
+
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
+use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
+
+const option = reactive({
+  value: {}
+})
+
+const dataHandle = (newData: number) => {
+  let config = props.chartConfig.option
+  config.series[2].data[0].value = newData
+  config.series[2].data[0].label.normal.formatter = '{c}' + config.unitStr
+  option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+  option.value = { ...props.chartConfig.option, ...config }
+}
+
+// 配置时
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData: number) => {
+    try {
+      dataHandle(newData)
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
+    immediate: true,
+  }
+)
+// 预览时
+useChartDataFetch(props.chartConfig, useChartEditStore, (resData: number) => {
+  // @ts-ignore
+  option.value.series[2].data[0].value = resData
+})
+</script>

+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
+import { Decorates14Config } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
+
+const ydata = ['A2'] //y轴
+
+export const option = {
+  dataset: 60,
+  backgroundColor: 'rgba(0,0,0,1)',
+  grid: {
+    left: '10%',
+    top: 10,
+    bottom: 10
+  },
+  tooltip: {
+    show: false
+  },
+  xAxis: {
+    max: 100,
+    splitLine: {
+      show: false
+    },
+    axisLine: {
+      show: false
+    },
+    axisLabel: {
+      show: false
+    },
+    axisTick: {
+      show: false
+    }
+  },
+  yAxis: [
+    {
+      type: 'category',
+      inverse: false,
+      data: ydata,
+      axisLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        show: false
+      }
+    }
+  ],
+  series: [
+    {
+      //内
+      type: 'bar',
+      barWidth: 60,
+      legendHoverLink: false,
+      silent: true,
+      itemStyle: {
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 1,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: 'rgba(156,224,99,1)' // 0% 处的颜色
+            },
+            {
+              offset: 1,
+              color: 'rgba(12,245,243,1)' // 100% 处的颜色
+            }
+          ],
+          globalCoord: false // 缺省为 false
+        } //底色
+      },
+      label: {
+        normal: {
+          show: true,
+          textStyle: {
+            color: '#fff',
+            fontSize: 20
+          },
+          position: 'right',
+          formatter: function (params: Recordable) {
+            return '{white|' + params.value + '}'
+          },
+          verticalAlign: 'bottom',
+          rich: {
+            white: {
+              // backgroundColor: {
+              //   image:
+              //     'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAAZCAYAAAB6v90+AAAA2klEQVRYhe2YMUoDQRhG32zAwsKkyRGCHmE9hE3uuSkNSqogaOEBcgzXDVg+i2xhEdKYn2GWefDX33vlDCjoCu3QHrXQ68eGFUpC74EPYME0+ALahHbAOrfNldkktAfucptcmWNCzW0RQZNbIIoaVho1rDRqWGnUsNKoYaUx6bDv3BIBHBtgl9sigNeEPgDvTOsF/dgAB6AFNsCQVel/DJwaWuDA+JkTcTfo9sLnS4fOwvYDw0Bv0f2ZqJcxPG47OAx0jn7+iXobg0N306kunCXwDPwAT0AfPfgLAvYRIEVmrDQAAAAASUVORK5CYII='
+              // },
+              padding: [5, 0, 5, 5],
+              align: 'center',
+              fontSize: 16,
+              color: 'black'
+            }
+          }
+        }
+      },
+      data: [60],
+      z: 100
+    },
+    {
+      //外
+      type: 'bar',
+      barWidth: 61,
+      barGap: '-100%',
+      label: {
+        normal: {
+          show: false
+        }
+      },
+      legendHoverLink: false,
+      silent: true,
+      data: [100],
+      itemStyle: {
+        color: 'rgba(45, 46, 48,0.5)',
+        borderWidth: 1,
+        borderColor: '#fff'
+      },
+      z: 98
+    },
+    {
+      //分隔
+      type: 'pictorialBar',
+      animationDuration: 0,
+      itemStyle: {
+        color: 'rgba(0,0,0,0.7)'
+      },
+      symbolRepeat: 'fixed',
+      symbolMargin: '8',
+      symbol: 'rect',
+      symbolClip: true,
+      symbolSize: [4, 60],
+      symbolPosition: 'start',
+      symbolOffset: [0, 0],
+      data: [60],
+      z: 101
+    }
+  ]
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = Decorates14Config.key
+  public chartConfig = cloneDeep(Decorates14Config)
+  // 图表配置项
+  public option = echartOptionProfixHandle(option, includes)
+}

+<template>
+  <!-- Echarts 全局设置 -->
+  <global-setting :optionData="optionData"></global-setting>
+  <CollapseItem name="配置" :expanded="true">
+    <setting-item-box name="数据点配置">
+      <setting-item name="数据">
+        <n-input-number v-model:value="optionData.dataset"></n-input-number>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="grid配置">
+      <setting-item name="顶部">
+        <n-input-number v-model:value="optionData.grid.top"></n-input-number>
+      </setting-item>
+      <setting-item name="底部">
+        <n-input-number v-model:value="optionData.grid.bottom"></n-input-number>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="内外bar和中间分隔高度">
+      <setting-item name="内">
+        <n-input-number v-model:value="seriesList[0].barWidth"></n-input-number>
+      </setting-item>
+      <setting-item name="外">
+        <n-input-number v-model:value="seriesList[1].barWidth"></n-input-number>
+      </setting-item>
+      <setting-item name="分隔">
+        <n-input-number v-model:value="seriesList[2].symbolSize[1]"></n-input-number>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="数值">
+      <setting-item name="颜色">
+        <n-color-picker v-model:value="seriesList[0].label.normal.rich.white.color"></n-color-picker>
+      </setting-item>
+      <setting-item name="大小">
+        <n-input-number v-model:value="seriesList[0].label.normal.rich.white.fontSize"></n-input-number>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="内部bar">
+      <setting-item name="渐变色1">
+        <n-color-picker size="small" v-model:value="seriesList[0].itemStyle.color.colorStops[0].color"></n-color-picker>
+      </setting-item>
+      <setting-item name="渐变色2">
+        <n-color-picker size="small" v-model:value="seriesList[0].itemStyle.color.colorStops[1].color"></n-color-picker>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="外部bar">
+      <setting-item name="颜色">
+        <n-color-picker size="small" v-model:value="seriesList[1].itemStyle.color"></n-color-picker>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="分隔">
+      <setting-item name="颜色">
+        <n-color-picker size="small" v-model:value="seriesList[2].itemStyle.color"></n-color-picker>
+      </setting-item>
+    </setting-item-box>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed } from 'vue'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
+import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<GlobalThemeJsonType> & PropType<any>,
+    required: true
+  }
+})
+
+const seriesList = computed(() => {
+  return props.optionData.series
+})
+</script>

+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, chartKey, conKey } = useWidgetKey('Decorates14',true)
+
+export const Decorates14Config: ConfigType = {
+    key,
+    chartKey,
+    conKey,
+    title: '装饰14',
+    category: ChatCategoryEnum.DECORATE,
+    categoryName: ChatCategoryEnumName.DECORATE,
+    package: PackagesCategoryEnum.DECORATES,
+    chartFrame: ChartFrameEnum.COMMON,
+    image: 'decorates13.png',
+}

+<template>
+  <v-chart :theme="themeColor" :init-options="initOptions" :option="option.value" autoresize> </v-chart>
+</template>
+
+<script setup lang="ts">
+import { PropType, watch, reactive, onMounted } from 'vue'
+import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { LineChart } from 'echarts/charts'
+import config, { includes } from './config'
+import { mergeTheme } from '@/packages/public/chart'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartDataFetch } from '@/hooks'
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
+
+const props = defineProps({
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
+    required: true
+  },
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true
+  }
+})
+
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
+use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
+
+const option = reactive<{ value: Recordable }>({
+  value: {}
+})
+
+onMounted(() => {
+  option.value = { ...props.chartConfig.option }
+})
+
+const dataHandle = (newData: number) => {
+  let config = props.chartConfig.option
+  config.series[0].data = [newData]
+  config.series[2].data = [newData]
+  option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+  option.value = { ...props.chartConfig.option, ...config }
+}
+
+// 配置时
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData: number) => {
+    try {
+      dataHandle(newData)
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
+    immediate: true
+  }
+)
+// 预览时
+useChartDataFetch(props.chartConfig, useChartEditStore, (resData: number) => {
+  option.value.series[0].data = [resData]
+  option.value.series[2].data = [resData]
+})
+</script>

+import { PublicConfigClass } from '@/packages/public'
+import { Decorates15Config } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+import { chartInitConfig } from '@/settings/designSetting'
+export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
+
+export const option = {
+  styleConfig: {
+    scale: 1
+  }
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = Decorates15Config.key
+  public attr = { ...chartInitConfig, w: 300, h: 300, zIndex: -1 }
+  public chartConfig = cloneDeep(Decorates15Config)
+  public option = cloneDeep(option)
+}

+<template>
+  <!-- Echarts 全局设置 -->
+  <global-setting :optionData="optionData"></global-setting>
+  <CollapseItem name="配置" :expanded="true">
+    <setting-item-box name="样式配置">
+      <setting-item name="缩放">
+        <n-input-number :min="0" v-model:value="optionData.styleConfig.scale"></n-input-number>
+      </setting-item>
+    </setting-item-box>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { option } from './config'
+import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+
+defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>

+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, chartKey, conKey } = useWidgetKey('Decorates15',true)
+
+export const Decorates15Config: ConfigType = {
+    key,
+    chartKey,
+    conKey,
+    title: '装饰15',
+    category: ChatCategoryEnum.DECORATE,
+    categoryName: ChatCategoryEnumName.DECORATE,
+    package: PackagesCategoryEnum.DECORATES,
+    chartFrame: ChartFrameEnum.COMMON,
+    image: 'decorates13.png',
+}

+<template>
+  <div style="position: fixed" :style="{ width: `${w}px`, height: `${h}px` }">
+    <div :style="{ transform: `scale(${styleConfig.scale})` }" class="arc_reactor">
+      <div class="case_container">
+        <div class="e7">
+          <div class="semi_arc_3 e5_1">
+            <div class="semi_arc_3 e5_2">
+              <div class="semi_arc_3 e5_3">
+                <div class="semi_arc_3 e5_4"></div>
+              </div>
+            </div>
+          </div>
+          <div class="core2"></div>
+        </div>
+        <ul class="marks">
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, watch } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { option } from './config'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType & typeof option>,
+    required: true
+  }
+})
+const { w, h } = toRefs(props.chartConfig.attr)
+
+const { styleConfig } = toRefs(props.chartConfig.option)
+
+watch(
+  () => styleConfig.value,
+  (newValue: Recordable) => {
+    styleConfig.value.scale = newValue.scale
+    console.log(styleConfig.value.scale)
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+</script>
+
+<style scoped>
+body {
+  color: #02feff;
+  overflow: hidden;
+}
+
+.core2 {
+  background: #cedce0;
+  width: 100px;
+  height: 100px;
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  border-radius: 50%;
+  border: 10px rgba(2, 255, 255, 0.15) solid;
+  animation: flicker2 0.2s infinite;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 40px;
+}
+
+.big_core {
+  background: #cedce0;
+  width: 200px;
+  height: 200px;
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  border-radius: 50%;
+  border: 10px rgba(2, 255, 255, 0.15) solid;
+  animation: big_flicker 0.2s infinite;
+}
+
+.c_ease {
+  animation: colour_ease 3s infinite ease-in-out;
+}
+
+.counterspin5 {
+  animation: rotate_anti 5s linear infinite;
+}
+
+.counterspin4 {
+  animation: rotate_anti 4s linear infinite;
+}
+
+.semi_arc {
+  width: 100px;
+  height: 100px;
+  border: 6px solid #02feff;
+  background: rgba(2, 254, 255, 0.2);
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  border-radius: 50%;
+  transform: rotateZ(0deg);
+  transition: box-shadow 3s ease;
+  text-align: center;
+  line-height: 100px;
+}
+
+.semi_arc:hover {
+  box-shadow: 0px 0px 30px rgba(2, 254, 255, 0.8);
+  transition: 0.3s;
+}
+
+.semi_arc_2 {
+  content: '';
+  position: absolute;
+  width: 94%;
+  height: 94%;
+  left: 3%;
+  top: 3%;
+  border: 5px solid #02feff;
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  border-radius: 50%;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  animation: rotate 4s linear infinite;
+  text-align: center;
+  line-height: 129px;
+}
+
+.semi_arc_2:after {
+  content: '';
+  position: absolute;
+  width: 94%;
+  height: 94%;
+  left: 3%;
+  top: 3%;
+  border: 4px solid #02feff;
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  border-radius: 50%;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  animation: rotate_anti 2s linear infinite;
+}
+
+.semi_arc_3 {
+  content: '';
+  position: absolute;
+  width: 94%;
+  height: 94%;
+  left: 3%;
+  top: 3%;
+  border: 5px solid #02feff;
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  border-radius: 50%;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  animation: rotate 4s linear infinite;
+  text-align: center;
+  line-height: 129px;
+}
+
+.arc {
+  width: 100px;
+  height: 100px;
+  border: 6px solid #02feff;
+  background: rgba(2, 254, 255, 0.2);
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  border-radius: 50%;
+  -moz-transform: rotateY(-30deg) translateZ(-200px);
+  -ms-transform: rotateY(-30deg) translateZ(-200px);
+  -webkit-transform: rotateY(-30deg) translateZ(-200px);
+  transform: rotateY(-30deg) translateZ(-200px);
+  transform: rotateZ(0deg);
+  transition: box-shadow 3s ease;
+  text-align: center;
+  line-height: 100px;
+}
+
+.arc:hover {
+  box-shadow: 0px 0px 30px rgba(2, 254, 255, 0.8);
+  transition: 0.3s;
+}
+
+.arc:after {
+  content: '';
+  position: absolute;
+  width: 94%;
+  height: 94%;
+  left: 3%;
+  top: 3%;
+  border: 4px solid #02feff;
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  border-radius: 50%;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  animation: rotate 4s linear infinite;
+}
+
+.e1:after {
+  border-color: rgba(2, 255, 255, 0.6);
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+}
+
+.e2:after {
+  border-color: rgba(2, 255, 255, 0.6);
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-bottom: 5px solid transparent;
+}
+
+.e3 {
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  animation: rotate 5s linear infinite;
+}
+
+.e3:after {
+  border-color: rgba(2, 255, 255, 0.6);
+  border-top: 5px solid transparent;
+  border-bottom: 5px solid transparent;
+}
+
+.e4 {
+  width: 150px;
+  height: 150px;
+}
+
+.e4_1 {
+  border-color: rgba(2, 255, 255, 0.3);
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+}
+
+.e4_1:after {
+  border-color: rgba(2, 255, 255, 0.6);
+  border-top: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+}
+
+.e5 {
+  width: 200px;
+  height: 200px;
+}
+
+.e5_1 {
+  color: rgba(2, 255, 255, 0.15);
+  border: 2px solid;
+  border-left: 2px solid transparent;
+  animation: rotate 5s linear infinite;
+}
+
+.e5_2 {
+  color: rgba(2, 255, 255, 0.7);
+  border: 4px solid;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  animation: rotate_anti 4s linear infinite;
+}
+
+.e5_3 {
+  color: rgba(2, 255, 255, 0.5);
+  border: 2px solid;
+  border-left: 2px solid transparent;
+  border-right: 2px solid transparent;
+  animation: rotate 3s linear infinite;
+}
+
+.e5_4 {
+  color: rgba(2, 255, 255, 0.15);
+  border: 4px solid;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+  animation: rotate_anti 2s linear infinite;
+}
+
+.e6 {
+  border-color: transparent;
+  background: rgba(255, 255, 255, 0);
+  width: 200px;
+  height: 200px;
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotateZ(0deg);
+  }
+  100% {
+    transform: rotateZ(360deg);
+  }
+}
+@keyframes rotate_anti {
+  0% {
+    transform: rotateZ(360deg);
+  }
+  100% {
+    transform: rotateZ(0deg);
+  }
+}
+@keyframes colour_ease {
+  0% {
+    border-color: #02feff;
+  }
+  50% {
+    border-color: rgba(2, 254, 255, 0.5);
+  }
+  100% {
+    border-color: #02feff;
+  }
+}
+@keyframes flicker {
+  0% {
+    box-shadow: 0px 0px 16px 8px rgba(150, 255, 255, 0.5), inset 0px 1px 4px 2px rgba(21, 211, 233, 0.3);
+  }
+  40% {
+    box-shadow: 0px 0px 16px 8px rgba(150, 255, 255, 0.5), inset 0px 1px 4px 2px rgba(21, 211, 233, 0.3);
+  }
+  50% {
+    box-shadow: 0px 0px 16px 6px rgba(150, 255, 255, 0.5), inset 0px 1px 100px 2px rgba(21, 211, 233, 0.3);
+  }
+  60% {
+    box-shadow: 0px 0px 16px 8px rgba(150, 255, 255, 0.5), inset 0px 1px 4px 2px rgba(21, 211, 233, 0.3);
+  }
+  100% {
+    box-shadow: 0px 0px 16px 8px rgba(150, 255, 255, 0.5), inset 0px 1px 4px 2px rgba(21, 211, 233, 0.3);
+  }
+}
+@keyframes flicker2 {
+  0% {
+    box-shadow: 0px 0px 60px 25px rgba(150, 255, 255, 0.5), inset 0px 1px 4px 2px rgba(21, 211, 233, 0.3);
+  }
+  40% {
+    box-shadow: 0px 0px 60px 25px rgba(150, 255, 255, 0.5), inset 0px 1px 4px 2px rgba(21, 211, 233, 0.3);
+  }
+  50% {
+    box-shadow: 0px 0px 50px 17px rgba(150, 255, 255, 0.5), inset 0px 1px 100px 2px rgba(21, 211, 233, 0.3);
+  }
+  60% {
+    box-shadow: 0px 0px 60px 25px rgba(150, 255, 255, 0.5), inset 0px 1px 4px 2px rgba(21, 211, 233, 0.3);
+  }
+  100% {
+    box-shadow: 0px 0px 60px 25px rgba(150, 255, 255, 0.5), inset 0px 1px 4px 2px rgba(21, 211, 233, 0.3);
+  }
+}
+@keyframes big_flicker {
+  0% {
+    box-shadow: 0px 0px 40px 20px rgba(150, 255, 255, 0.5), inset 0px 1px 30px 15px rgba(21, 211, 233, 0.3);
+  }
+  40% {
+    box-shadow: 0px 0px 40px 20px rgba(150, 255, 255, 0.5), inset 0px 1px 30px 15px rgba(21, 211, 233, 0.3);
+  }
+  50% {
+    box-shadow: 0px 0px 35px 17px rgba(150, 255, 255, 0.5), inset 0px 1px 50px 40px rgba(21, 211, 233, 0.3);
+  }
+  60% {
+    box-shadow: 0px 0px 40px 20px rgba(150, 255, 255, 0.5), inset 0px 1px 30px 15px rgba(21, 211, 233, 0.3);
+  }
+  100% {
+    box-shadow: 0px 0px 40px 20px rgba(150, 255, 255, 0.5), inset 0px 1px 30px 15px rgba(21, 211, 233, 0.3);
+  }
+}
+html,
+body {
+  height: 100%;
+}
+
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.arc_reactor {
+  position: relative;
+  top: 50%;
+  margin-top: -125px;
+  margin-left: auto;
+  margin-right: auto;
+  width: 250px;
+  height: 250px;
+  border-radius: 50%;
+  box-shadow: 0px 0px 50px 15px rgba(2, 255, 255, 0.3), inset 0px 0px 50px 15px rgba(2, 255, 255, 0.3);
+}
+
+.core2 {
+  background: #cedce0;
+  width: 110px;
+  height: 110px;
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  border-radius: 50%;
+  border: 5px solid rgba(2, 255, 255, 0.15);
+  animation: flicker2 0.2s infinite;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 40px;
+}
+
+.e7 {
+  width: 95.25%;
+  height: 95.25%;
+  left: 2.5475%;
+  right: 2.5475%;
+  border: 6px solid transparent;
+  background: transparent;
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  border-radius: 50%;
+  transform: rotateZ(0deg);
+  transition: box-shadow 3s ease;
+  text-align: center;
+  line-height: 100px;
+}
+
+.case_container {
+  width: 210px;
+  height: 210px;
+  border-radius: 50%;
+  position: absolute;
+  margin-left: 20px;
+  margin-top: 20px;
+}
+
+.marks li {
+  display: block;
+  width: 3px;
+  height: 11px;
+  background: rgba(2, 254, 255, 0.8);
+  position: absolute;
+  margin-left: 105px;
+  margin-top: -110px;
+  animation: colour_ease2 3s infinite ease-in-out;
+}
+
+@keyframes colour_ease2 {
+  0% {
+    background: #02feff;
+  }
+  50% {
+    background: rgba(2, 254, 255, 0.3);
+  }
+  100% {
+    background: #02feff;
+  }
+}
+.marks li:first-child {
+  transform: rotate(6deg) translateY(125px);
+}
+
+.marks li:nth-child(2) {
+  transform: rotate(12deg) translateY(125px);
+}
+
+.marks li:nth-child(3) {
+  transform: rotate(18deg) translateY(125px);
+}
+
+.marks li:nth-child(4) {
+  transform: rotate(24deg) translateY(125px);
+}
+
+.marks li:nth-child(5) {
+  transform: rotate(30deg) translateY(125px);
+}
+
+.marks li:nth-child(6) {
+  transform: rotate(36deg) translateY(125px);
+}
+
+.marks li:nth-child(7) {
+  transform: rotate(42deg) translateY(125px);
+}
+
+.marks li:nth-child(8) {
+  transform: rotate(48deg) translateY(125px);
+}
+
+.marks li:nth-child(9) {
+  transform: rotate(54deg) translateY(125px);
+}
+
+.marks li:nth-child(10) {
+  transform: rotate(60deg) translateY(125px);
+}
+
+.marks li:nth-child(11) {
+  transform: rotate(66deg) translateY(125px);
+}
+
+.marks li:nth-child(12) {
+  transform: rotate(72deg) translateY(125px);
+}
+
+.marks li:nth-child(13) {
+  transform: rotate(78deg) translateY(125px);
+}
+
+.marks li:nth-child(14) {
+  transform: rotate(84deg) translateY(125px);
+}
+
+.marks li:nth-child(15) {
+  transform: rotate(90deg) translateY(125px);
+}
+
+.marks li:nth-child(16) {
+  transform: rotate(96deg) translateY(125px);
+}
+
+.marks li:nth-child(17) {
+  transform: rotate(102deg) translateY(125px);
+}
+
+.marks li:nth-child(18) {
+  transform: rotate(108deg) translateY(125px);
+}
+
+.marks li:nth-child(19) {
+  transform: rotate(114deg) translateY(125px);
+}
+
+.marks li:nth-child(20) {
+  transform: rotate(120deg) translateY(125px);
+}
+
+.marks li:nth-child(21) {
+  transform: rotate(126deg) translateY(125px);
+}
+
+.marks li:nth-child(22) {
+  transform: rotate(132deg) translateY(125px);
+}
+
+.marks li:nth-child(23) {
+  transform: rotate(138deg) translateY(125px);
+}
+
+.marks li:nth-child(24) {
+  transform: rotate(144deg) translateY(125px);
+}
+
+.marks li:nth-child(25) {
+  transform: rotate(150deg) translateY(125px);
+}
+
+.marks li:nth-child(26) {
+  transform: rotate(156deg) translateY(125px);
+}
+
+.marks li:nth-child(27) {
+  transform: rotate(162deg) translateY(125px);
+}
+
+.marks li:nth-child(28) {
+  transform: rotate(168deg) translateY(125px);
+}
+
+.marks li:nth-child(29) {
+  transform: rotate(174deg) translateY(125px);
+}
+
+.marks li:nth-child(30) {
+  transform: rotate(180deg) translateY(125px);
+}
+
+.marks li:nth-child(31) {
+  transform: rotate(186deg) translateY(125px);
+}
+
+.marks li:nth-child(32) {
+  transform: rotate(192deg) translateY(125px);
+}
+
+.marks li:nth-child(33) {
+  transform: rotate(198deg) translateY(125px);
+}
+
+.marks li:nth-child(34) {
+  transform: rotate(204deg) translateY(125px);
+}
+
+.marks li:nth-child(35) {
+  transform: rotate(210deg) translateY(125px);
+}
+
+.marks li:nth-child(36) {
+  transform: rotate(216deg) translateY(125px);
+}
+
+.marks li:nth-child(37) {
+  transform: rotate(222deg) translateY(125px);
+}
+
+.marks li:nth-child(38) {
+  transform: rotate(228deg) translateY(125px);
+}
+
+.marks li:nth-child(39) {
+  transform: rotate(234deg) translateY(125px);
+}
+
+.marks li:nth-child(40) {
+  transform: rotate(240deg) translateY(125px);
+}
+
+.marks li:nth-child(41) {
+  transform: rotate(246deg) translateY(125px);
+}
+
+.marks li:nth-child(42) {
+  transform: rotate(252deg) translateY(125px);
+}
+
+.marks li:nth-child(43) {
+  transform: rotate(258deg) translateY(125px);
+}
+
+.marks li:nth-child(44) {
+  transform: rotate(264deg) translateY(125px);
+}
+
+.marks li:nth-child(45) {
+  transform: rotate(270deg) translateY(125px);
+}
+
+.marks li:nth-child(46) {
+  transform: rotate(276deg) translateY(125px);
+}
+
+.marks li:nth-child(47) {
+  transform: rotate(282deg) translateY(125px);
+}
+
+.marks li:nth-child(48) {
+  transform: rotate(288deg) translateY(125px);
+}
+
+.marks li:nth-child(49) {
+  transform: rotate(294deg) translateY(125px);
+}
+
+.marks li:nth-child(50) {
+  transform: rotate(300deg) translateY(125px);
+}
+
+.marks li:nth-child(51) {
+  transform: rotate(306deg) translateY(125px);
+}
+
+.marks li:nth-child(52) {
+  transform: rotate(312deg) translateY(125px);
+}
+
+.marks li:nth-child(53) {
+  transform: rotate(318deg) translateY(125px);
+}
+
+.marks li:nth-child(54) {
+  transform: rotate(324deg) translateY(125px);
+}
+
+.marks li:nth-child(55) {
+  transform: rotate(330deg) translateY(125px);
+}
+
+.marks li:nth-child(56) {
+  transform: rotate(336deg) translateY(125px);
+}
+
+.marks li:nth-child(57) {
+  transform: rotate(342deg) translateY(125px);
+}
+
+.marks li:nth-child(58) {
+  transform: rotate(348deg) translateY(125px);
+}
+
+.marks li:nth-child(59) {
+  transform: rotate(354deg) translateY(125px);
+}
+
+.marks li:nth-child(60) {
+  transform: rotate(360deg) translateY(125px);
+}
+</style>

+import { PublicConfigClass } from '@/packages/public'
+import { Decorates16Config } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+import { chartInitConfig } from '@/settings/designSetting'
+export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
+
+export const option = {
+  dataset: 20,
+  unit: '台',
+  mainCicleColor: '#03A6E0CC',
+  subCicleColor: '#03A6E07F',
+  textColor:'green'
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = Decorates16Config.key
+  public attr = { ...chartInitConfig, w: 150, h: 120, zIndex: -1 }
+  public chartConfig = cloneDeep(Decorates16Config)
+  public option = cloneDeep(option)
+}

+<template>
+  <!-- Echarts 全局设置 -->
+  <global-setting :optionData="optionData"></global-setting>
+  <CollapseItem name="配置" :expanded="true">
+    <setting-item-box name="数据">
+      <setting-item name="数据源">
+        <n-input-number :min="0" v-model:value="optionData.dataset"></n-input-number>
+      </setting-item>
+      <setting-item name="单位">
+        <n-input v-model:value="optionData.unit"></n-input>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="颜色">
+      <setting-item name="颜色1">
+        <n-color-picker v-model:value="optionData.mainCicleColor"></n-color-picker>
+      </setting-item>
+      <setting-item name="颜色2">
+        <n-color-picker v-model:value="optionData.subCicleColor"></n-color-picker>
+      </setting-item>
+      <setting-item name="文字颜色">
+        <n-color-picker v-model:value="optionData.textColor"></n-color-picker>
+      </setting-item>
+    </setting-item-box>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { option } from './config'
+import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+
+defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>

+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, chartKey, conKey } = useWidgetKey('Decorates16',true)
+
+export const Decorates16Config: ConfigType = {
+    key,
+    chartKey,
+    conKey,
+    title: '装饰16',
+    category: ChatCategoryEnum.DECORATE,
+    categoryName: ChatCategoryEnumName.DECORATE,
+    package: PackagesCategoryEnum.DECORATES,
+    chartFrame: ChartFrameEnum.COMMON,
+    image: 'decorates13.png',
+}

+<template>
+  <div class="go-content-box">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+      :width="w"
+      :height="h"
+      viewBox="0 0 180 180"
+    >
+      <g opacity="0.6" transform="translate(11 14)  scale(1.6)">
+        <defs>
+          <polygon :id="polygonId" points="15, 46.5, 21, 47.5, 21, 52.5, 15, 53.5" />
+        </defs>
+        <circle
+          cx="50"
+          cy="50"
+          r="45"
+          fill="transparent"
+          :stroke="mainCicleColor || defaultColor[0]"
+          stroke-width="10"
+          stroke-dasharray="80, 100, 30, 100"
+        >
+          <animateTransform
+            attributeName="transform"
+            type="rotate"
+            values="0 50 50;360 50 50"
+            :dur="`${dur}s`"
+            repeatCount="indefinite"
+          />
+        </circle>
+        <circle
+          cx="50"
+          cy="50"
+          r="45"
+          fill="transparent"
+          :stroke="subCicleColor || defaultColor[1]"
+          stroke-width="6"
+          stroke-dasharray="50, 66, 100, 66"
+        >
+          <animateTransform
+            attributeName="transform"
+            type="rotate"
+            values="0 50 50;-360 50 50"
+            :dur="`${dur}s`"
+            repeatCount="indefinite"
+          />
+        </circle>
+        <circle
+          cx="50"
+          cy="50"
+          r="38"
+          fill="transparent"
+          :stroke="subCicleColor || defaultColor[1]"
+          stroke-width="1"
+          stroke-dasharray="5, 1"
+        />
+        <use
+          v-for="(foo, i) in new Array(20).fill(0)"
+          :key="i"
+          :xlink:href="`#${polygonId}`"
+          :stroke="mainCicleColor || defaultColor[0]"
+          :fill="Math.random() > 0.4 ? 'transparent' : mainCicleColor"
+        >
+          <animateTransform
+            attributeName="transform"
+            type="rotate"
+            values="0 50 50;360 50 50"
+            :dur="`${dur}s`"
+            :begin="`${(i * dur) / 20}s`"
+            repeatCount="indefinite"
+          />
+        </use>
+        <circle
+          cx="50"
+          cy="50"
+          r="26"
+          fill="transparent"
+          :stroke="subCicleColor || defaultColor[1]"
+          stroke-width="1"
+          stroke-dasharray="5, 1"
+        />
+        <text x="50" y="55" text-anchor="middle" :style="{ fill: textColor, opacity: 1 }" font-size="14">
+          {{ dataset + unit }}
+        </text>
+      </g>
+    </svg>
+  </div>
+</template>
+<script setup lang="ts">
+import { PropType, toRefs, ref } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { option } from './config'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType & typeof option>,
+    required: true
+  }
+})
+const { w, h } = toRefs(props.chartConfig.attr)
+
+const { mainCicleColor, subCicleColor, dataset, unit, textColor } = toRefs(props.chartConfig.option)
+
+const id = Number(Math.random().toString().substring(2, 10) + Date.now()).toString(36)
+
+const dur = ref(3)
+
+const polygonId = ref(`decoration-9-polygon-${id}`)
+
+const defaultColor = ref(['rgba(3, 166, 224, 0.8)', 'rgba(3, 166, 224, 0.5)'])
+</script>
+
+<style lang="scss" scoped>
+.go-content-box {
+  width: v-bind('w+"px"');
+  height: v-bind('h+"px"');
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

@@ -54,6 +54,10 @@ import { Decorates09Config } from '@/packages/components/external/Decorates/Deco
 import { Decorates10Config } from '@/packages/components/external/Decorates/Decorates/Decorates10'
 import { Decorates11Config } from '@/packages/components/external/Decorates/Decorates/Decorates11'
 import { Decorates12Config } from '@/packages/components/external/Decorates/Decorates/Decorates12'
+import { Decorates13Config } from '@/packages/components/external/Decorates/Decorates/Decorates13'
+import { Decorates14Config } from '@/packages/components/external/Decorates/Decorates/Decorates14'
+import { Decorates15Config } from '@/packages/components/external/Decorates/Decorates/Decorates15'
+import { Decorates16Config } from '@/packages/components/external/Decorates/Decorates/Decorates16'
 import { OverrideTableScrollBoardConfig } from '@/packages/components/external/Tables/Tables/OverrideTableScrollBoard'
 
 
@@ -86,6 +90,10 @@ export function useInjectLib(packagesList: EPackagesType) {
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Decorates10Config)//新增装饰10
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Decorates11Config)//新增装饰11
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Decorates12Config)//新增装饰12
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Decorates13Config)//新增装饰13
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Decorates14Config)//新增装饰14
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Decorates15Config)//新增装饰15
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Decorates16Config)//新增装饰16
   //
 
   //信息

@@ -110,6 +110,28 @@ export const BlendModeEnumList = [
   { label: '亮度', value: 'luminosity' }
 ]
 
+// // 动画时间函数枚举
+// export enum AnimationTimingFunctionEnum {
+//   // 动画从头到尾的速度是相同的
+//   LINEAR = 'linear',
+//   // 默认值：动画以低速开始，然后加快，在结束前变慢。
+//   EASE = 'ease',
+//   // 动画以低速开始。
+//   EASEIN = 'ease-in',
+//   // 动画以低速结束。
+//   EASEOUT = 'ease-out',
+//   // 动画以低速开始和结束。
+//   EASEINOUT = 'ease-in-out'
+// }
+
+// // 动画执行状态枚举
+// export enum AnimationPlayStateEnum {
+//   // 运行
+//   PAUSED = 'paused',
+//   // 暂停
+//   RUNNING = 'running'
+// }
+
 // 组件实例类
 export interface PublicConfigType {
   id: string
@@ -132,6 +154,14 @@ export interface PublicConfigType {
     [FilterEnum.BLEND_MODE]: string
     // 动画
     animations: string[]
+    // 动画配置（时长、时间函数、动画延迟、动画执行的次数、动画的执行状态）
+    animationsStyleConfig: {
+      animationPlayState: string
+      animationTimingFunction: string
+      animationDuration: number
+      animationDelay: number
+      animationIterationCount: number | string //动画执行的次数，具体数值或者infinite
+    }
   }
   preview?: {
     // 预览超出隐藏
@@ -160,7 +190,7 @@ export interface CreateComponentType extends PublicConfigType, requestConfig {
   chartConfig: ConfigType
   option: GlobalThemeJsonType
   groupList?: Array<CreateComponentType>
-  saveHistoryInput?:string // THINGS_KIT 新增一个接口字段 saveHistoryInput,用于记录当前组件id和输入框的内容，这里不能重写，有很多地方引用到的，这里升级版本有冲突
+  saveHistoryInput?: string // THINGS_KIT 新增一个接口字段 saveHistoryInput,用于记录当前组件id和输入框的内容，这里不能重写，有很多地方引用到的，这里升级版本有冲突
 }
 
 // 组件成组实例类

@@ -9,22 +9,17 @@ import {
   RequestContentTypeEnum,
   RequestBodyEnum
 } from '@/enums/httpEnum'
-import {
-  ChartFrameEnum,
-  PublicConfigType,
-  CreateComponentType,
-  CreateComponentGroupType
-} from '@/packages/index.d'
+import { ChartFrameEnum, PublicConfigType, CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
 import { chartInitConfig } from '@/settings/designSetting'
 import cloneDeep from 'lodash/cloneDeep'
 
 /**
-   * 这里更新版本有冲突 
-   * ft 修改在公共接口下拉框里默认选择公共接口,不选择静态
-   * 修改后的代码在注释之间，并标注好源代码和修改后代码，方便回溯
-   * 源代码 requestDataType: RequestDataTypeEnum.STATIC,
-   * 修改后的代码 requestDataType: RequestDataTypeEnum.Pond,
-   */
+ * 这里更新版本有冲突
+ * ft 修改在公共接口下拉框里默认选择公共接口,不选择静态
+ * 修改后的代码在注释之间，并标注好源代码和修改后代码，方便回溯
+ * 源代码 requestDataType: RequestDataTypeEnum.STATIC,
+ * 修改后的代码 requestDataType: RequestDataTypeEnum.Pond,
+ */
 // 请求基础属性
 export const requestConfig: RequestConfigType = {
   requestDataType: RequestDataTypeEnum.Pond,
@@ -83,7 +78,15 @@ export class PublicConfigClass implements PublicConfigType {
     blendMode: 'normal',
 
     // 动画
-    animations: []
+    animations: [],
+    // 动画配置
+    animationsStyleConfig: {
+      animationPlayState: 'paused',
+      animationTimingFunction: 'ease',
+      animationDuration: 0,
+      animationDelay: 0,
+      animationIterationCount: 'infinite'
+    }
   }
   // 预览
   public preview = {

 <template>
   <div class="go-chart-configurations-animations" v-if="targetData">
-    <n-button
-      class="clear-btn go-my-2"
-      :disabled="!targetData.styles.animations.length"
-      @click="clearAnimation"
-    >
+    <SettingItemBox name="动画配置">
+      <SettingItem name="是否开启动画">
+        <n-select
+          clearable
+          v-model:value="targetData.styles.animationsStyleConfig.animationPlayState"
+          size="small"
+          :options="animationPlayStateOption"
+        ></n-select>
+      </SettingItem>
+      <SettingItem name="动画时间函数">
+        <n-select
+          clearable
+          v-model:value="targetData.styles.animationsStyleConfig.animationTimingFunction"
+          size="small"
+          :options="animationTimingFunctionOption"
+        ></n-select>
+      </SettingItem>
+      <SettingItem name="动画时长">
+        <n-input-number
+          :min="0"
+          v-model:value="targetData.styles.animationsStyleConfig.animationDuration"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="动画延迟">
+        <n-input-number
+          :min="0"
+          v-model:value="targetData.styles.animationsStyleConfig.animationDelay"
+          size="small"
+          :options="animationTimingFunctionOption"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="动画执行次数">
+        <n-select
+          clearable
+          v-model:value="targetData.styles.animationsStyleConfig.animationIterationCount"
+          size="small"
+          :options="animationIterationCountOption"
+        ></n-select>
+      </SettingItem>
+    </SettingItemBox>
+    <n-button class="clear-btn go-my-2" :disabled="!targetData.styles.animations.length" @click="clearAnimation">
       清除动画
     </n-button>
-    <collapse-item
-      v-for="(item, index) in animations"
-      :key="index"
-      :name="item.label"
-      :expanded="true"
-    >
+    <collapse-item v-for="(item, index) in animations" :key="index" :name="item.label" :expanded="true">
       <n-grid :x-gap="6" :y-gap="10" :cols="3">
         <n-grid-item
           class="animation-item go-transition-quick"
           :class="[
             activeIndex(childrenItem.value) && 'active',
-            hoverPreviewAnimate === childrenItem.value &&
-              `animate__animated  animate__${childrenItem.value}`
+            hoverPreviewAnimate === childrenItem.value && `animate__animated  animate__${childrenItem.value}`
           ]"
           v-for="(childrenItem, index) in item.children"
           :key="index"
@@ -39,6 +69,16 @@ import { animations } from '@/settings/animations/index'
 import { CollapseItem } from '@/components/Pages/ChartItemSetting'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { useTargetData } from '../hooks/useTargetData.hook'
+import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import type { SelectOption } from 'naive-ui'
+import {
+  AnimationPlayStateEnum,
+  AnimationTimingFunctionEnum,
+  AnimationTimingFunctionNameEnum,
+  AnimationPlayStateNameEnum,
+  AnimationIterationCountNameEnum,
+  AnimationIterationCountEnum
+} from '@/enums/external/animationEnum'
 
 // 全局颜色
 const designStore = useDesignStore()
@@ -68,6 +108,50 @@ const clearAnimation = () => {
 const addAnimation = (item: { label: string; value: string }) => {
   targetData.value.styles.animations = [item.value]
 }
+
+//动画运行状态配置
+const animationPlayStateOption: SelectOption[] = [
+  {
+    label: AnimationPlayStateNameEnum.RUNNING,
+    value: AnimationPlayStateEnum.RUNNING
+  },
+  {
+    label: AnimationPlayStateNameEnum.PAUSED,
+    value: AnimationPlayStateEnum.PAUSED
+  }
+]
+
+//动画运行时间函数配置
+const animationTimingFunctionOption: SelectOption[] = [
+  {
+    label: AnimationTimingFunctionNameEnum.LINEAR,
+    value: AnimationTimingFunctionEnum.LINEAR
+  },
+  {
+    label: AnimationTimingFunctionNameEnum.EASE,
+    value: AnimationTimingFunctionEnum.EASE
+  },
+  {
+    label: AnimationTimingFunctionNameEnum.EASEIN,
+    value: AnimationTimingFunctionEnum.EASEIN
+  },
+  {
+    label: AnimationTimingFunctionNameEnum.EASEOUT,
+    value: AnimationTimingFunctionEnum.EASEOUT
+  },
+  {
+    label: AnimationTimingFunctionNameEnum.EASEINOUT,
+    value: AnimationTimingFunctionEnum.EASEINOUT
+  }
+]
+
+//动画执行次数
+const animationIterationCountOption: SelectOption[] = [
+  {
+    label: AnimationIterationCountNameEnum.ITERATIONCOUNT,
+    value: AnimationIterationCountEnum.ITERATIONCOUNT
+  }
+]
 </script>
 
 <style lang="scss" scoped>

@@ -42,7 +42,8 @@
           :style="{
             ...useSizeStyle(item.attr),
             ...getFilterStyle(item.styles),
-            ...getTransformStyle(item.styles)
+            ...getTransformStyle(item.styles),
+            ...item.styles.animationsStyleConfig,
           }"
         ></component>
       </edit-shape-box>

@@ -31,7 +31,8 @@
                   :themeColor="themeColor" :style="{
                     ...useSizeStyle(item.attr),
                     ...getFilterStyle(item.styles),
-                    ...getTransformStyle(item.styles)
+                    ...getTransformStyle(item.styles),
+                    ...item.styles.animationsStyleConfig,
                   }"></component>
               </edit-shape-box>
             </div>

@@ -15,7 +15,8 @@
 		...getComponentAttrStyle(item.attr, groupIndex),
 		...getStatusStyle(item.status),
 		...getPreviewConfigStyle(item.preview),
-		...getBlendModeStyle(item.styles) as any
+		...getBlendModeStyle(item.styles) as any,
+    ...item.styles.animationsStyleConfig,
 	}"
     >
     <component

@@ -10,7 +10,8 @@
       ...getStatusStyle(item.status),
       ...getPreviewConfigStyle(item.preview),
       ...getBlendModeStyle(item.styles) as any,
-      ...getSizeStyle(item.attr)
+      ...getSizeStyle(item.attr),
+      ...item.styles.animationsStyleConfig,
     }"
   >
     <!-- 分组 -->
@@ -32,7 +33,7 @@
       :themeColor="themeColor"
       :style="{	    
         ...getSizeStyle(item.attr),	    
-        ...getFilterStyle(item.styles)
+        ...getFilterStyle(item.styles),
       }"
       v-on="useLifeHandler(item)"
     ></component>