perf: 优化热力图展示，新增全局映射配置

src/components/Pages/ChartItemSetting/GlobalSetting.vue

@@ -1,163 +1,104 @@
 <template>
   <collapse-item v-if="title" name="标题">
     <template #header>
-      <n-switch
+      <n-switch v-model:value="title.show" size="small"></n-switch>
-        v-show="inChart"
-        v-model:value="title.show"
-        size="small"
-      ></n-switch>
     </template>
     <setting-item-box name="标题">
       <setting-item name="颜色">
-        <n-color-picker
+        <n-color-picker v-model:value="title.textStyle.color" size="small"></n-color-picker>
-          v-model:value="title.textStyle.color"
-          size="small"
-        ></n-color-picker>
       </setting-item>
       <setting-item name="大小">
-        <n-input-number
+        <n-input-number v-model:value="title.textStyle.fontSize" :min="1" size="small"></n-input-number>
-          v-model:value="title.textStyle.fontSize"
-          :min="1"
-          size="small"
-        ></n-input-number>
       </setting-item>
     </setting-item-box>
     <setting-item-box name="副标题">
       <setting-item name="颜色">
-        <n-color-picker
+        <n-color-picker size="small" v-model:value="title.subtextStyle.color"></n-color-picker>
-          size="small"
-          v-model:value="title.subtextStyle.color"
-        ></n-color-picker>
       </setting-item>
       <setting-item name="大小">
-        <n-input-number
+        <n-input-number v-model:value="title.subtextStyle.fontSize" :min="1" size="small"></n-input-number>
-          v-model:value="title.subtextStyle.fontSize"
-          :min="1"
-          size="small"
-        ></n-input-number>
       </setting-item>
     </setting-item-box>
   </collapse-item>
 
   <collapse-item v-if="xAxis" name="X轴">
     <template #header>
-      <n-switch
+      <n-switch v-model:value="xAxis.show" size="small"></n-switch>
-        v-show="inChart"
-        v-model:value="xAxis.show"
-        size="small"
-      ></n-switch>
     </template>
     <setting-item-box name="单位">
       <setting-item name="名称">
         <n-input v-model:value="xAxis.name" size="small"></n-input>
       </setting-item>
       <setting-item name="颜色">
-        <n-color-picker
+        <n-color-picker size="small" v-model:value="xAxis.nameTextStyle.color"></n-color-picker>
-          size="small"
-          v-model:value="xAxis.nameTextStyle.color"
-        ></n-color-picker>
       </setting-item>
       <setting-item name="大小">
-         <n-input-number
+        <n-input-number v-model:value="xAxis.nameTextStyle.fontSize" :min="12" size="small"></n-input-number>
-          v-model:value="xAxis.nameTextStyle.fontSize"
-          :min="12"
-          size="small"
-        ></n-input-number>
       </setting-item>
       <setting-item name="偏移量">
-         <n-input-number
+        <n-input-number v-model:value="xAxis.nameGap" :min="5" size="small"></n-input-number>
-          v-model:value="xAxis.nameGap"
-          :min="5"
-          size="small"
-        ></n-input-number>
       </setting-item>
     </setting-item-box>
     <setting-item-box name="标签">
-      <setting-item v-show="inChart" name="展示">
+      <setting-item name="展示">
         <n-space>
-          <n-switch
+          <n-switch v-model:value="xAxis.axisLabel.show" size="small"></n-switch>
-            v-model:value="xAxis.axisLabel.show"
-            size="small"
-          ></n-switch>
         </n-space>
       </setting-item>
       <setting-item name="颜色">
-        <n-color-picker
+        <n-color-picker size="small" v-model:value="xAxis.axisLabel.color"></n-color-picker>
-          size="small"
-          v-model:value="xAxis.axisLabel.color"
-        ></n-color-picker>
       </setting-item>
       <setting-item name="大小">
-        <n-input-number
+        <n-input-number v-model:value="xAxis.axisLabel.fontSize" :min="8" size="small"></n-input-number>
-          v-model:value="xAxis.axisLabel.fontSize"
-          :min="8"
-          size="small"
-        ></n-input-number>
       </setting-item>
     </setting-item-box>
     <setting-item-box name="轴线">
+      <setting-item name="展示">
+        <n-space>
+          <n-switch v-model:value="xAxis.axisLine.show" size="small"></n-switch>
+        </n-space>
+      </setting-item>
       <setting-item name="颜色">
-        <n-color-picker
+        <n-color-picker v-model:value="xAxis.axisLine.lineStyle.color" size="small"></n-color-picker>
-          v-model:value="xAxis.axisLine.lineStyle.color"
-          size="small"
-        ></n-color-picker>
       </setting-item>
       <setting-item name="粗细">
-        <n-input-number
+        <n-input-number v-model:value="xAxis.axisLine.lineStyle.width" :min="1" size="small"></n-input-number>
-          v-model:value="xAxis.axisLine.lineStyle.width"
+      </setting-item>
-          :min="1"
+      <setting-item name="位置">
-          size="small"
+        <n-select v-model:value="xAxis.position" size="small" :options="axisConfig.xposition"></n-select>
-        ></n-input-number>
       </setting-item>
       <setting-item name="对齐零">
         <n-space>
-          <n-switch
+          <n-switch v-model:value="xAxis.axisLine.onZero" size="small"></n-switch>
-            v-model:value="xAxis.axisLine.onZero"
-            size="small"
-          ></n-switch>
         </n-space>
       </setting-item>
-      <setting-item v-show="inChart" name="反向">
+      <setting-item name="反向">
         <n-space>
           <n-switch v-model:value="xAxis.inverse" size="small"></n-switch>
         </n-space>
       </setting-item>
     </setting-item-box>
     <setting-item-box name="刻度">
-      <setting-item v-show="inChart" name="展示">
+      <setting-item name="展示">
         <n-space>
           <n-switch v-model:value="xAxis.axisTick.show" size="small"></n-switch>
         </n-space>
       </setting-item>
       <setting-item name="长度">
-        <n-input-number
+        <n-input-number v-model:value="xAxis.axisTick.length" :min="1" size="small"></n-input-number>
-          v-model:value="xAxis.axisTick.length"
-          :min="1"
-          size="small"
-        ></n-input-number>
       </setting-item>
     </setting-item-box>
     <setting-item-box name="分割线">
-      <setting-item v-show="inChart" name="展示">
+      <setting-item name="展示">
         <n-space>
-          <n-switch
+          <n-switch v-model:value="xAxis.splitLine.show" size="small"></n-switch>
-            v-model:value="xAxis.splitLine.show"
-            size="small"
-          ></n-switch>
         </n-space>
       </setting-item>
       <setting-item name="颜色">
-        <n-color-picker
+        <n-color-picker v-model:value="xAxis.splitLine.lineStyle.color" size="small"></n-color-picker>
-          v-model:value="xAxis.splitLine.lineStyle.color"
-          size="small"
-        ></n-color-picker>
       </setting-item>
       <setting-item name="粗细">
-        <n-input-number
+        <n-input-number v-model:value="xAxis.splitLine.lineStyle.width" :min="1" size="small"></n-input-number>
-          v-model:value="xAxis.splitLine.lineStyle.width"
-          :min="1"
-          size="small"
-        ></n-input-number>
       </setting-item>
       <setting-item name="类型">
         <n-select
@@ -166,140 +107,87 @@
           :options="axisConfig.splitLint.lineStyle.type"
         ></n-select>
       </setting-item>
-      <setting-item name="位置">
-        <n-select
-          v-model:value="xAxis.position"
-          size="small"
-          :options="axisConfig.xposition"
-        ></n-select>
-      </setting-item>
     </setting-item-box>
   </collapse-item>
 
   <collapse-item v-if="yAxis" name="Y轴">
     <template #header>
-      <n-switch
+      <n-switch v-model:value="yAxis.show" size="small"></n-switch>
-        v-show="inChart"
-        v-model:value="yAxis.show"
-        size="small"
-      ></n-switch>
     </template>
     <setting-item-box name="单位">
       <setting-item name="名称">
         <n-input v-model:value="yAxis.name" size="small"></n-input>
       </setting-item>
       <setting-item name="颜色">
-        <n-color-picker
+        <n-color-picker size="small" v-model:value="yAxis.nameTextStyle.color"></n-color-picker>
-          size="small"
-          v-model:value="yAxis.nameTextStyle.color"
-        ></n-color-picker>
       </setting-item>
-       <setting-item name="大小">
+      <setting-item name="大小">
-        <n-input-number
+        <n-input-number v-model:value="yAxis.nameTextStyle.fontSize" :min="8" size="small"></n-input-number>
-          v-model:value="yAxis.nameTextStyle.fontSize"
-          :min="8"
-          size="small"
-        ></n-input-number>
       </setting-item>
       <setting-item name="偏移量">
-         <n-input-number
+        <n-input-number v-model:value="yAxis.nameGap" :min="5" size="small"></n-input-number>
-          v-model:value="yAxis.nameGap"
-          :min="5"
-          size="small"
-        ></n-input-number>
       </setting-item>
     </setting-item-box>
     <setting-item-box name="标签">
-      <setting-item v-show="inChart" name="展示">
+      <setting-item name="展示">
         <n-space>
-          <n-switch
+          <n-switch v-model:value="yAxis.axisLabel.show" size="small"></n-switch>
-            v-model:value="yAxis.axisLabel.show"
-            size="small"
-          ></n-switch>
         </n-space>
       </setting-item>
       <setting-item name="颜色">
-        <n-color-picker
+        <n-color-picker size="small" v-model:value="yAxis.axisLabel.color"></n-color-picker>
-          size="small"
-          v-model:value="yAxis.axisLabel.color"
-        ></n-color-picker>
       </setting-item>
       <setting-item name="大小">
-        <n-input-number
+        <n-input-number v-model:value="yAxis.axisLabel.fontSize" :min="8" size="small"></n-input-number>
-          v-model:value="yAxis.axisLabel.fontSize"
-          :min="8"
-          size="small"
-        ></n-input-number>
       </setting-item>
     </setting-item-box>
     <setting-item-box name="轴线">
-      <setting-item v-show="inChart" name="展示">
+      <setting-item name="展示">
         <n-space>
           <n-switch v-model:value="yAxis.axisLine.show" size="small"></n-switch>
         </n-space>
       </setting-item>
       <setting-item name="颜色">
-        <n-color-picker
+        <n-color-picker v-model:value="yAxis.axisLine.lineStyle.color" size="small"></n-color-picker>
-          v-model:value="yAxis.axisLine.lineStyle.color"
-          size="small"
-        ></n-color-picker>
       </setting-item>
       <setting-item name="粗细">
-        <n-input-number
+        <n-input-number v-model:value="yAxis.axisLine.lineStyle.width" :min="1" size="small"></n-input-number>
-          v-model:value="yAxis.axisLine.lineStyle.width"
+      </setting-item>
-          :min="1"
+      <setting-item name="位置">
-          size="small"
+        <n-select v-model:value="yAxis.position" size="small" :options="axisConfig.yposition"></n-select>
-        ></n-input-number>
       </setting-item>
       <setting-item name="对齐零">
         <n-space>
-          <n-switch
+          <n-switch v-model:value="yAxis.axisLine.onZero" size="small"></n-switch>
-            v-model:value="yAxis.axisLine.onZero"
-            size="small"
-          ></n-switch>
         </n-space>
       </setting-item>
-      <setting-item v-show="inChart" name="反向">
+      <setting-item name="反向">
         <n-space>
           <n-switch v-model:value="yAxis.inverse" size="small"></n-switch>
         </n-space>
       </setting-item>
     </setting-item-box>
     <setting-item-box name="刻度">
-      <setting-item v-show="inChart" name="展示">
+      <setting-item name="展示">
         <n-space>
           <n-switch v-model:value="yAxis.axisTick.show" size="small"></n-switch>
         </n-space>
       </setting-item>
       <setting-item name="长度">
-        <n-input-number
+        <n-input-number v-model:value="yAxis.axisTick.length" :min="1" size="small"></n-input-number>
-          v-model:value="yAxis.axisTick.length"
-          :min="1"
-          size="small"
-        ></n-input-number>
       </setting-item>
     </setting-item-box>
     <setting-item-box name="分割线">
-      <setting-item v-show="inChart" name="展示">
+      <setting-item name="展示">
         <n-space>
-          <n-switch
+          <n-switch v-model:value="yAxis.splitLine.show" size="small"></n-switch>
-            v-model:value="yAxis.splitLine.show"
-            size="small"
-          ></n-switch>
         </n-space>
       </setting-item>
       <setting-item name="颜色">
-        <n-color-picker
+        <n-color-picker v-model:value="yAxis.splitLine.lineStyle.color" size="small"></n-color-picker>
-          v-model:value="yAxis.splitLine.lineStyle.color"
-          size="small"
-        ></n-color-picker>
       </setting-item>
       <setting-item name="粗细">
-        <n-input-number
+        <n-input-number v-model:value="yAxis.splitLine.lineStyle.width" :min="1" size="small"></n-input-number>
-          v-model:value="yAxis.splitLine.lineStyle.width"
-          :min="1"
-          size="small"
-        ></n-input-number>
       </setting-item>
       <setting-item name="类型">
         <n-select
@@ -308,44 +196,72 @@
           :options="axisConfig.splitLint.lineStyle.type"
         ></n-select>
       </setting-item>
-      <setting-item name="位置">
-        <n-select
-          v-model:value="yAxis.position"
-          size="small"
-          :options="axisConfig.yposition"
-        ></n-select>
-      </setting-item>
     </setting-item-box>
   </collapse-item>
 
   <collapse-item v-if="legend" name="图例">
     <template #header>
-      <n-switch
+      <n-switch v-model:value="legend.show" size="small"></n-switch>
-        v-show="inChart"
-        v-model:value="legend.show"
-        size="small"
-      ></n-switch>
     </template>
     <setting-item-box name="图例文字">
       <setting-item>
-        <n-color-picker
+        <n-color-picker size="small" v-model:value="legend.textStyle.color"></n-color-picker>
-          size="small"
-          v-model:value="legend.textStyle.color"
-        ></n-color-picker>
       </setting-item>
     </setting-item-box>
   </collapse-item>
+
+  <collapse-item v-if="visualMap" name="视觉映射">
+    <template #header>
+      <n-switch v-model:value="visualMap.show" size="small"></n-switch>
+    </template>
+
+    <setting-item-box name="范围">
+      <setting-item name="最小值">
+        <n-input-number v-model:value="visualMap.min" size="small"></n-input-number>
+      </setting-item>
+      <setting-item name="最大值">
+        <n-input-number v-model:value="visualMap.max" size="small"></n-input-number>
+      </setting-item>
+    </setting-item-box>
+
+    <setting-item-box name="视觉映射">
+      <setting-item name="放置方向">
+        <n-select v-model:value="visualMap.orient" size="small" :options="axisConfig.visualMap.orient"></n-select>
+      </setting-item>
+      <setting-item name="宽度">
+        <n-input-number v-model:value="visualMap.temWidth" size="small"></n-input-number>
+      </setting-item>
+      <setting-item name="高度">
+        <n-input-number v-model:value="visualMap.itemHeight" size="small"></n-input-number>
+      </setting-item>
+      <setting-item name="反转">
+        <n-space>
+          <n-switch v-model:value="visualMap.inverse" size="small"></n-switch>
+        </n-space>
+      </setting-item>
+      <setting-item name="拖拽组件实时更新">
+        <n-space>
+          <n-switch v-model:value="visualMap.realtime" size="small"></n-switch>
+        </n-space>
+      </setting-item>
+    </setting-item-box>
+    <global-setting-position :targetData="visualMap"></global-setting-position>
+    <!-- <setting-item-box name="位置">
+      <setting-item name="距离底部">
+        <n-input-number v-model:value="visualMap.bottom" size="small"></n-input-number>
+      </setting-item>
+      <setting-item name="距离左侧">
+        <n-input-number v-model:value="visualMap.left" size="small"></n-input-number>
+      </setting-item>
+    </setting-item-box> -->
+  </collapse-item>
 </template>
 
 <script setup lang="ts">
 import { PropType, computed } from 'vue'
 import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 import { axisConfig } from '@/packages/chartConfiguration/echarts/index'
-import {
+import { CollapseItem, SettingItemBox, SettingItem, GlobalSettingPosition} from '@/components/Pages/ChartItemSetting'
-  CollapseItem,
-  SettingItemBox,
-  SettingItem
-} from '@/components/Pages/ChartItemSetting'
 
 const props = defineProps({
   optionData: {
@@ -374,4 +290,8 @@ const yAxis = computed(() => {
 const legend = computed(() => {
   return props.optionData.legend
 })
+
+const visualMap = computed(() => {
+  return props.optionData.visualMap
+})
 </script>

src/components/Pages/ChartItemSetting/GlobalSettingPosition.vue

@@ -0,0 +1,29 @@
+<template>
+  <setting-item-box name="位置">
+    <setting-item :name="`偏移 X：${targetData.left || 0}px`">
+      <n-input-number v-model:value="targetData.left" size="small" step="10"></n-input-number>
+    </setting-item>
+    <setting-item :name="`偏移 Y：${targetData.top || 0}px`">
+      <n-input-number v-model:value="targetData.top" size="small" step="10"></n-input-number>
+    </setting-item>
+  </setting-item-box>
+</template>
+
+<script setup lang="ts">
+import { PropType, reactive } from 'vue'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+
+type positionType = {
+  top?: number | string | null
+  left?: number | string | null
+  right?: number | string | null
+  bottom?: number | string | null
+}
+
+const props = defineProps({
+  targetData: {
+    type: Object as PropType<positionType>,
+    required: true
+  }
+})
+</script>

src/components/Pages/ChartItemSetting/index.ts

@@ -5,6 +5,9 @@ import CollapseItem from './CollapseItem.vue'
 
 // 全局配置属性
 import GlobalSetting from './GlobalSetting.vue'
+// 全局配置属性-位置
+import GlobalSettingPosition from './GlobalSettingPosition.vue'
+
 // 名称
 import NameSetting from './NameSetting.vue'
 // 方向
@@ -14,4 +17,4 @@ import SizeSetting from './SizeSetting.vue'
 // 样式
 import StylesSetting from './StylesSetting.vue'
 
-export { CollapseItem, SettingItemBox, SettingItem, GlobalSetting, NameSetting, PositionSetting, SizeSetting, StylesSetting }
+export { CollapseItem, SettingItemBox, SettingItem, GlobalSetting, GlobalSettingPosition, NameSetting, PositionSetting, SizeSetting, StylesSetting }

src/packages/chartConfiguration/echarts/axis.ts

@@ -1,40 +1,56 @@
 export const axisConfig = {
+  // X轴位置
   xposition: [
     {
-      label: 'top',
+      label: '顶部',
       value: 'top'
     },
     {
-      label: 'bottom',
+      label: '底部',
       value: 'bottom'
     }
   ],
+  // Y轴位置
   yposition: [
     {
-      label: 'left',
+      label: '左侧',
       value: 'left'
     },
     {
-      label: 'right',
+      label: '右侧',
       value: 'right'
     }
   ],
+  // 线条
   splitLint: {
     lineStyle: {
       type: [
         {
-          label: 'solid',
+          label: '实线',
           value: 'solid'
         },
         {
-          label: 'dashed',
+          label: '虚线',
           value: 'dashed'
         },
         {
-          label: 'dotted',
+          label: '点线',
           value: 'dotted'
         }
       ]
     }
+  },
+  // 视觉映射
+  visualMap: {
+    orient: [
+      {
+        label: '竖直',
+        value: 'vertical'
+      },
+      {
+        label: '水平',
+        value: 'horizontal'
+      }
+    ]
   }
 }

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

@@ -1,4 +1,6 @@
 <template>
+   <!-- Echarts 全局设置 --> 
+  <global-setting :optionData="optionData"></global-setting>
   <CollapseItem
     v-for="(item, index) in seriesList"
     :key="index"
@@ -36,8 +38,6 @@
       </SettingItem>
     </SettingItemBox>
   </CollapseItem>
-  <!-- Echarts 全局设置 --> 
-  <global-setting :optionData="optionData" :in-chart="true"></global-setting>
 </template>
 
 <script setup lang="ts">

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

@@ -1,4 +1,6 @@
 <template>
+  <!-- Echarts 全局设置 --> 
+  <global-setting :optionData="optionData"></global-setting>
   <CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`柱状图-${index+1}`" :expanded="true">
     <SettingItemBox name="图形">
       <SettingItem name="颜色">
@@ -25,8 +27,6 @@
       </SettingItem>
     </SettingItemBox>
   </CollapseItem>
-  <!-- Echarts 全局设置 --> 
-  <global-setting :optionData="optionData" :in-chart="true"></global-setting>
 </template>
 
 <script setup lang="ts">

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

@@ -1,4 +1,6 @@
 <template>
+  <!-- Echarts 全局设置 -->
+  <global-setting :optionData="optionData"></global-setting>
   <CollapseItem
     v-for="(item, index) in seriesList"
     :key="index"
@@ -24,8 +26,6 @@
       </SettingItem>
     </SettingItemBox>
   </CollapseItem>
-  <!-- Echarts 全局设置 -->
-  <global-setting :optionData="optionData" :in-chart="true"></global-setting>
 </template>
 
 <script setup lang="ts">

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

@@ -1,4 +1,6 @@
 <template>
+  <!-- Echarts 全局设置 -->
+  <global-setting :optionData="optionData"></global-setting>
   <CollapseItem
     v-for="(item, index) in seriesList"
     :key="index"
@@ -24,8 +26,6 @@
       </SettingItem>
     </SettingItemBox>
   </CollapseItem>
-  <!-- Echarts 全局设置 -->
-  <global-setting :optionData="optionData" :in-chart="true"></global-setting>
 </template>
 
 <script setup lang="ts">

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

@@ -1,4 +1,6 @@
 <template>
+  <!-- Echarts 全局设置 -->
+  <global-setting :optionData="optionData"></global-setting>
   <CollapseItem
     v-for="(item, index) in seriesList"
     :key="index"
@@ -24,8 +26,6 @@
       </SettingItem>
     </SettingItemBox>
   </CollapseItem>
-  <!-- Echarts 全局设置 -->
-  <global-setting :optionData="optionData" :in-chart="true"></global-setting>
 </template>
 
 <script setup lang="ts">

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

@@ -1,4 +1,6 @@
 <template>
+  <!-- Echarts 全局设置 -->
+  <global-setting :optionData="optionData"></global-setting>
   <CollapseItem
     v-for="(item, index) in seriesList"
     :key="index"
@@ -58,8 +60,6 @@
       </SettingItem>
     </SettingItemBox>
   </CollapseItem>
-  <!-- Echarts 全局设置 -->
-  <global-setting :optionData="optionData" :in-chart="true"></global-setting>
 </template>
 
 <script setup lang="ts">

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

@@ -1,65 +1,63 @@
 <template>
   <!-- Echarts 全局设置 -->
-  <div>
+  <global-setting :optionData="optionData"></global-setting>
-    <global-setting :optionData="optionData" :in-chart="true"></global-setting>
+  <CollapseItem name="地图" :expanded="true">
-    <CollapseItem name="地图" :expanded="true">
+    <SettingItemBox name="省份" :alone="true">
-      <SettingItemBox name="省份" :alone="true">
+      <SettingItem name="背景颜色">
-        <SettingItem name="背景颜色">
+        <n-color-picker
-          <n-color-picker
+          size="small"
-            size="small"
+          :modes="['hex']"
-            :modes="['hex']"
+          v-model:value="seriesList[1].itemStyle.areaColor"
-            v-model:value="seriesList[1].itemStyle.areaColor"
+        ></n-color-picker>
-          ></n-color-picker>
+      </SettingItem>
-        </SettingItem>
+      <SettingItem name="聚焦颜色（预览可见）">
-        <SettingItem name="聚焦颜色（预览可见）">
+        <n-color-picker
-          <n-color-picker
+          size="small"
-            size="small"
+          :modes="['hex']"
-            :modes="['hex']"
+          v-model:value="seriesList[1].itemStyle.emphasis.areaColor"
-            v-model:value="seriesList[1].itemStyle.emphasis.areaColor"
+        ></n-color-picker>
-          ></n-color-picker>
+      </SettingItem>
-        </SettingItem>
+      <SettingItem name="聚焦阴影（预览可见）">
-        <SettingItem name="聚焦阴影（预览可见）">
+        <n-color-picker
-          <n-color-picker
+          size="small"
-            size="small"
+          :modes="['hex']"
-            :modes="['hex']"
+          v-model:value="seriesList[1].itemStyle.emphasis.shadowColor"
-            v-model:value="seriesList[1].itemStyle.emphasis.shadowColor"
+        ></n-color-picker>
-          ></n-color-picker>
+      </SettingItem>
-        </SettingItem>
+    </SettingItemBox>
-      </SettingItemBox>
+    <SettingItemBox name="边框">
-      <SettingItemBox name="边框">
+      <SettingItem name="颜色">
-        <SettingItem name="颜色">
+        <n-color-picker
-          <n-color-picker
+          size="small"
-            size="small"
+          :modes="['hex']"
-            :modes="['hex']"
+          v-model:value="seriesList[1].itemStyle.borderColor"
-            v-model:value="seriesList[1].itemStyle.borderColor"
+        ></n-color-picker>
-          ></n-color-picker>
+      </SettingItem>
-        </SettingItem>
+      <SettingItem name="大小">
-        <SettingItem name="大小">
+        <n-input-number
-          <n-input-number
+          v-model:value="seriesList[1].itemStyle.borderWidth"
-            v-model:value="seriesList[1].itemStyle.borderWidth"
+          :min="1"
-            :min="1"
+          size="small"
-            size="small"
+          placeholder="请输入边框大小"
-            placeholder="请输入边框大小"
+        ></n-input-number>
-          ></n-input-number>
+      </SettingItem>
-        </SettingItem>
+    </SettingItemBox>
-      </SettingItemBox>
+    <SettingItemBox name="其他">
-      <SettingItemBox name="其他">
+      <SettingItem>
-        <SettingItem>
+        <n-checkbox v-model:checked="seriesList[1].itemStyle.showHainanIsLands" size="small">显示南海群岛</n-checkbox>
-          <n-checkbox v-model:checked="seriesList[1].itemStyle.showHainanIsLands" size="small">显示南海群岛</n-checkbox>
+      </SettingItem>
-        </SettingItem>
+    </SettingItemBox>
-      </SettingItemBox>
+  </CollapseItem>
-    </CollapseItem>
+  <CollapseItem name="标记" :expanded="true">
-    <CollapseItem name="标记" :expanded="true">
+    <SettingItemBox name="样式">
-      <SettingItemBox name="样式">
+      <SettingItem name="大小">
-        <SettingItem name="大小">
+        <n-input-number v-model:value="seriesList[0].symbolSize" size="small" :min="0"></n-input-number>
-          <n-input-number v-model:value="seriesList[0].symbolSize" size="small" :min="0"></n-input-number>
+      </SettingItem>
-        </SettingItem>
+      <SettingItem name="颜色">
-        <SettingItem name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[0].itemStyle.color"></n-color-picker>
-          <n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[0].itemStyle.color"></n-color-picker>
+      </SettingItem>
-        </SettingItem>
+    </SettingItemBox>
-      </SettingItemBox>
+  </CollapseItem>
-    </CollapseItem>
-  </div>
 </template>
 
 <script setup lang="ts">

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

@@ -1,6 +1,6 @@
 <template>
   <!-- Echarts 全局设置 -->
-  <global-setting :optionData="optionData" :in-chart="true"> </global-setting>
+  <global-setting :optionData="optionData"> </global-setting>
   <!-- 漏斗图 -->
   <collapse-item v-for="(item, index) in seriesList" :key="index" :name="`漏斗图`" expanded>
     <setting-item-box name="排序" alone>

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

@@ -1,55 +1,48 @@
 import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
 import { HeatmapConfig } from './index'
 import { CreateComponentType } from '@/packages/index.d'
-import {cloneDeep} from 'lodash'
+import { cloneDeep } from 'lodash'
 import dataJson from './data.json'
 
-export const includes = ['legend']
+export const includes = ['xAxis', 'yAxis']
 
 export const option = {
-  tooltip: {},
+  dataset: { ...dataJson },
-  legend: {},
+  tooltip: {
+    position: 'top'
+  },
   xAxis: {
-    show:false,
-    type: 'category',
     data: dataJson.xAxis
   },
   yAxis: {
-    show:false,
-    type: 'category',
     data: dataJson.yAxis
   },
-  dataset: { ...dataJson },
   visualMap: {
+    show: true,
     min: 0,
-    max: 1,
+    max: 10,
+    itemWidth: 20,
+    itemHeight: 140,
     calculable: true,
-    realtime: false,
+    orient: 'horizontal',
     inRange: {
-      color: [
+      color: ['#4661c2', '#263253']
-        '#313695',
-        '#4575b4',
-        '#74add1',
-        '#abd9e9',
-        '#e0f3f8',
-        '#ffffbf',
-        '#fee090',
-        '#fdae61',
-        '#f46d43',
-        '#d73027',
-        '#a50026'
-      ]
     }
   },
-  series:[
+  series: [
     {
       name: '',
       type: 'heatmap',
       data: dataJson.seriesData,
+      label: {
+        show: true
+      },
       emphasis: {
         itemStyle: {
           borderColor: '#333',
-          borderWidth: 1
+          borderWidth: 1,
+          shadowBlur: 10,
+          shadowColor: 'rgba(0, 0, 0, 0.5)'
         }
       },
       progressive: 1000,

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

@@ -1,16 +1,6 @@
 <template>
   <div>
-    <global-setting :optionData="optionData" :in-chart="true"></global-setting>
+    <global-setting :optionData="optionData"></global-setting>
-    <CollapseItem name="热力图" :expanded="true">
-      <SettingItemBox name="拖拽手柄" :alone="true">
-        <SettingItem name="">
-          <n-switch v-model:value="heatMapConfig.visualMap.calculable" size="small" />
-        </SettingItem>
-      </SettingItemBox>
-      <SettingItemBox name="实时更新" :alone="true">
-        <n-switch v-model:value="heatMapConfig.visualMap.realtime" size="small" />
-      </SettingItemBox>
-    </CollapseItem>
   </div>
 </template>
 

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

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

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

@@ -1,8 +1,7 @@
 <template>
   <div>
     <!-- Echarts 全局设置 -->
-    <global-setting :optionData="optionData" :in-chart="true"></global-setting>
+    <global-setting :optionData="optionData"></global-setting>
-
     <CollapseItem name="雷达" :expanded="true">
       <SettingItemBox name="样式">
         <SettingItem>
@@ -12,7 +11,12 @@
           <n-checkbox v-model:checked="radarConfig.splitLine.show">分割线</n-checkbox>
         </SettingItem>
         <SettingItem name="雷达形状">
-          <n-select v-model:value="radarConfig.shape" size="small" :options="RadarShapeEnumList" placeholder="选择形状" />
+          <n-select
+            v-model:value="radarConfig.shape"
+            size="small"
+            :options="RadarShapeEnumList"
+            placeholder="选择形状"
+          />
         </SettingItem>
       </SettingItemBox>
 

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

@@ -10,14 +10,17 @@
     <!-- Echarts 全局设置 -->
     <SettingItemBox name="进度条">
       <SettingItem name="颜色">
-        <n-color-picker
+        <n-color-picker size="small" :modes="['hex']" v-model:value="item.data[0].itemStyle.color"></n-color-picker>
-          size="small"
-          :modes="['hex']"
-          v-model:value="item.data[0].itemStyle.color"
-        ></n-color-picker>
       </SettingItem>
       <SettingItem name="阴影模糊等级">
-        <n-input-number v-model:value="item.data[0].itemStyle.shadowBlur" :min="0" :max="50" :step="1" size="small" placeholder="阴影模糊等级">
+        <n-input-number
+          v-model:value="item.data[0].itemStyle.shadowBlur"
+          :min="0"
+          :max="50"
+          :step="1"
+          size="small"
+          placeholder="阴影模糊等级"
+        >
         </n-input-number>
       </SettingItem>
       <SettingItem name="阴影颜色">
@@ -31,28 +34,32 @@
     <!-- 中心标题 -->
     <SettingItemBox v-if="config.title" name="标题">
       <SettingItem name="颜色">
-        <n-color-picker
+        <n-color-picker size="small" :modes="['hex']" v-model:value="config.title.textStyle.color"></n-color-picker>
-          size="small"
-          :modes="['hex']"
-          v-model:value="config.title.textStyle.color"
-        ></n-color-picker>
       </SettingItem>
       <SettingItem name="字体大小">
-        <n-input-number v-model:value="config.title.textStyle.fontSize" :min="0" :step="1" size="small" placeholder="字体大小">
+        <n-input-number
+          v-model:value="config.title.textStyle.fontSize"
+          :min="0"
+          :step="1"
+          size="small"
+          placeholder="字体大小"
+        >
         </n-input-number>
       </SettingItem>
     </SettingItemBox>
     <!-- 其他样式 -->
     <SettingItemBox name="轨道样式">
       <SettingItem name="颜色">
-        <n-color-picker
+        <n-color-picker size="small" :modes="['hex']" v-model:value="item.data[1].itemStyle.color"></n-color-picker>
-          size="small"
-          :modes="['hex']"
-          v-model:value="item.data[1].itemStyle.color"
-        ></n-color-picker>
       </SettingItem>
       <SettingItem name="阴影模糊等级">
-        <n-input-number v-model:value="item.data[1].itemStyle.shadowBlur" :min="0" :step="1" size="small" placeholder="阴影模糊等级">
+        <n-input-number
+          v-model:value="item.data[1].itemStyle.shadowBlur"
+          :min="0"
+          :step="1"
+          size="small"
+          placeholder="阴影模糊等级"
+        >
         </n-input-number>
       </SettingItem>
       <SettingItem name="阴影颜色">
@@ -69,11 +76,7 @@
 <script setup lang="ts">
 import { PropType, computed } from 'vue'
 // 以下是封装的设置模块布局组件，具体效果可在官网查看
-import {
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
-  CollapseItem,
-  SettingItemBox,
-  SettingItem
-} from '@/components/Pages/ChartItemSetting'
 import { GlobalThemeJsonType } from '@/settings/chartThemes'
 
 const props = defineProps({

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

@@ -1,6 +1,6 @@
 <template>
   <!-- Echarts 全局设置 -->
-  <global-setting :optionData="optionData" :in-chart="true"></global-setting>
+  <global-setting :optionData="optionData"></global-setting>
 </template>
 
 <script setup lang="ts">

src/settings/chartThemes/global.theme.json

@@ -26,6 +26,7 @@
     },
     "position": "bottom",
     "axisLine": {
+      "show": true,
       "lineStyle": {
         "color": "#B9B8CE",
         "width": 1