From 50e9e994b1ce462ac162bcc742e85c98cff535d0 Mon Sep 17 00:00:00 2001
From: ly-chn <3293232930@qq.com>
Date: Thu, 17 Aug 2023 09:38:30 +0800
Subject: [PATCH 01/11] =?UTF-8?q?fix:=20=E5=90=8C=E6=AD=A5=E6=97=B6?=
 =?UTF-8?q?=E5=87=BA=E7=8E=B0=E7=89=B9=E6=AE=8Akey=E6=97=B6,=20=E5=8A=A0?=
 =?UTF-8?q?=E8=BD=BD=E8=BF=9B=E5=BA=A6=E5=A7=8B=E7=BB=88=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?,=20=E4=B8=94=E6=97=A0=E6=B3=95=E7=BB=A7=E7=BB=AD=E8=A7=A3?=
 =?UTF-8?q?=E6=9E=90=E5=90=8E=E7=BB=AD=E5=86=85=E5=AE=B9=20perf:=20?=
 =?UTF-8?q?=E5=A4=A7=E9=87=8F=E4=BD=BF=E7=94=A8=E7=9B=B8=E5=90=8C=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=97=B6,=20=E6=8F=90=E5=8D=87createComponent?=
 =?UTF-8?q?=E6=80=A7=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore                            |  2 ++
 src/packages/index.ts                 | 35 ++++++++++++++++++---------
 src/views/chart/hooks/useSync.hook.ts |  4 +--
 3 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/.gitignore b/.gitignore
index 60a4aff1..e0f420b7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,4 +3,6 @@ node_modules
 dist
 dist-ssr
 *.local
+pnpm-lock.yaml
 .vscode
+.idea
diff --git a/src/packages/index.ts b/src/packages/index.ts
index 20bc8535..5653bd23 100644
--- a/src/packages/index.ts
+++ b/src/packages/index.ts
@@ -1,9 +1,9 @@
-import { ChartList } from '@/packages/components/Charts/index'
-import { DecorateList } from '@/packages/components/Decorates/index'
-import { InformationList } from '@/packages/components/Informations/index'
-import { TableList } from '@/packages/components/Tables/index'
-import { PhotoList } from '@/packages/components/Photos/index'
-import { IconList } from '@/packages/components/Icons/index'
+import {ChartList} from '@/packages/components/Charts/index'
+import {DecorateList} from '@/packages/components/Decorates/index'
+import {InformationList} from '@/packages/components/Informations/index'
+import {TableList} from '@/packages/components/Tables/index'
+import {PhotoList} from '@/packages/components/Photos/index'
+import {IconList} from '@/packages/components/Icons/index'
 import { PackagesCategoryEnum, PackagesType, ConfigType, FetchComFlagType } from '@/packages/index.d'
 
 const configModules: Record<string, { default: string }> = import.meta.glob('./components/**/config.vue', {
@@ -26,6 +26,16 @@ export let packagesList: PackagesType = {
   [PackagesCategoryEnum.ICONS]: IconList
 }
 
+// 组件缓存, 可以大幅度提升组件加载速度
+const componentCacheMap = new Map<string, any>()
+const loadConfig = (packageName: string, categoryName: string, keyName: string) => {
+  const key = packageName + categoryName + keyName
+  if (!componentCacheMap.has(key)) {
+    componentCacheMap.set(key, import(`./components/${packageName}/${categoryName}/${keyName}/config.ts`))
+  }
+  return componentCacheMap.get(key)
+}
+
 /**
  * * 获取目标组件配置信息
  * @param targetData
@@ -35,10 +45,10 @@ export const createComponent = async (targetData: ConfigType) => {
   // redirectComponent 是给图片组件库和图标组件库使用的
   if (redirectComponent) {
     const [packageName, categoryName, keyName] = redirectComponent.split('/')
-    const redirectChart = await import(`./components/${packageName}/${categoryName}/${keyName}/config.ts`)
+    const redirectChart = await loadConfig(packageName, categoryName, keyName)
     return new redirectChart.default()
   }
-  const chart = await import(`./components/${targetData.package}/${category}/${key}/config.ts`)
+  const chart = await loadConfig(targetData.package, category, key)
   return new chart.default()
 }
 
@@ -62,7 +72,7 @@ const fetchComponent = (chartName: string, flag: FetchComFlagType) => {
  * @param {ConfigType} dropData 配置项
  */
 export const fetchChartComponent = (dropData: ConfigType) => {
-  const { key } = dropData
+  const {key} = dropData
   return fetchComponent(key, FetchComFlagType.VIEW)?.default
 }
 
@@ -71,7 +81,7 @@ export const fetchChartComponent = (dropData: ConfigType) => {
  * @param {ConfigType} dropData 配置项
  */
 export const fetchConfigComponent = (dropData: ConfigType) => {
-  const { key } = dropData
+  const {key} = dropData
   return fetchComponent(key, FetchComFlagType.CONFIG)?.default
 }
 
@@ -84,7 +94,10 @@ export const fetchImages = async (targetData?: ConfigType) => {
   // 正则判断图片是否为 url，是则直接返回该 url
   if (/^(http|https):\/\/([\w.]+\/?)\S*/.test(targetData.image)) return targetData.image
   // 新数据动态处理
-  const { image, package: targetDataPackage } = targetData
+  const {
+    image,
+    package: targetDataPackage
+  } = targetData
   // 兼容旧数据
   if (image.includes('@') || image.includes('base64')) return image
 
diff --git a/src/views/chart/hooks/useSync.hook.ts b/src/views/chart/hooks/useSync.hook.ts
index b97fd4e5..0d27fc99 100644
--- a/src/views/chart/hooks/useSync.hook.ts
+++ b/src/views/chart/hooks/useSync.hook.ts
@@ -196,9 +196,7 @@ export const useSync = () => {
             chartHistoryStore.clearForwardStack()
           }
         }
-      } else {
-        // 非组件(顺便排除脏数据)
-        if (key !== 'editCanvasConfig' && key !== 'requestGlobalConfig') return
+      } else if (key === ChartEditStoreEnum.EDIT_CANVAS_CONFIG || key === ChartEditStoreEnum.REQUEST_GLOBAL_CONFIG) {
         componentMerge(chartEditStore[key], projectData[key], true)
       }
     }

From 73d8889bc49e2d5b87663886b0546323304e44cb Mon Sep 17 00:00:00 2001
From: QuietlyChan <1013893148@qq.com>
Date: Wed, 30 Aug 2023 15:23:41 +0800
Subject: [PATCH 02/11] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=85=B3=E7=B3=BB?=
 =?UTF-8?q?=E5=9B=BE=E5=8A=9B=E5=BC=95=E5=AF=BC=E5=B8=83=E5=B1=80=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Charts/Mores/Graph/config.ts   | 86 +++++++++++--------
 .../components/Charts/Mores/Graph/config.vue  | 73 +++++++++++++---
 .../components/Charts/Mores/Graph/index.vue   |  9 +-
 src/packages/components/Charts/Mores/index.ts | 12 ++-
 4 files changed, 131 insertions(+), 49 deletions(-)

diff --git a/src/packages/components/Charts/Mores/Graph/config.ts b/src/packages/components/Charts/Mores/Graph/config.ts
index 0dfb0dc8..7ba6b00c 100644
--- a/src/packages/components/Charts/Mores/Graph/config.ts
+++ b/src/packages/components/Charts/Mores/Graph/config.ts
@@ -9,13 +9,14 @@ export const includes = []
 // 关系图布局
 export const GraphLayout = [
   { label: '无', value: 'none' },
-  { label: '环形', value: 'circular' }
+  { label: '环形', value: 'circular' },
+  { label: '力引导', value: 'force' }
 ]
 
 // 标签开关
 export const LabelSwitch = [
-  { label: '开启', value: 1 },
-  { label: '关闭', value: 0 }
+  { label: '开启', value: true },
+  { label: '关闭', value: false }
 ]
 
 // 标签位置
@@ -24,44 +25,57 @@ export const LabelPosition = [
   { label: '右侧', value: 'right' },
   { label: '顶部', value: 'top' },
   { label: '底部', value: 'bottom' },
-  { label: '内部', value: 'inside' },
+  { label: '内部', value: 'inside' }
+]
+
+// 图-迭代动画
+export const LayoutAnimation = [
+  { label: '开启', value: true },
+  { label: '关闭', value: false }
 ]
 
 export const option = {
-    dataset: { ...dataJson },
-    tooltip: {},
-    legend:{
-      show:true,
-      textStyle:{
-        color:"#eee",
-        fontSize: 14 ,
-      },
-      data: dataJson.categories.map(function (a) {
-          return a.name;
-      })
+  dataset: { ...dataJson },
+  tooltip: {},
+  legend: {
+    show: true,
+    textStyle: {
+      color: '#eee',
+      fontSize: 14
     },
-    series: [
-      {
-        type: 'graph',
-        layout: 'none', // none circular环形布局
-        data: dataJson.nodes,
-        links: dataJson.links,
-        categories: dataJson.categories,
-        label: { // 标签
-          show: 1,
-          position: 'right',
-          formatter: '{b}'
-        },
-        labelLayout: {
-          hideOverlap: true
-        },
-        lineStyle: {
-          color: 'source', // 线条颜色
-          curveness: 0.2 // 线条卷曲程度
-        }
+    data: dataJson.categories.map(function (a) {
+      return a.name
+    })
+  },
+  series: [
+    {
+      type: 'graph',
+      layout: 'none', // none circular环形布局
+      data: dataJson.nodes,
+      links: dataJson.links,
+      categories: dataJson.categories,
+      label: {
+        show: true,
+        position: 'right',
+        formatter: '{b}'
+      },
+      labelLayout: {
+        hideOverlap: true
+      },
+      lineStyle: {
+        color: 'source', // 线条颜色
+        curveness: 0.2 // 线条卷曲程度
+      },
+      force: {
+        repulsion: 100,
+        gravity: 0.1,
+        edgeLength: 30,
+        layoutAnimation: true,
+        friction: 0.6
       }
-    ]
-  };
+    }
+  ]
+}
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = GraphConfig.key
diff --git a/src/packages/components/Charts/Mores/Graph/config.vue b/src/packages/components/Charts/Mores/Graph/config.vue
index 07319fde..81ce82f0 100644
--- a/src/packages/components/Charts/Mores/Graph/config.vue
+++ b/src/packages/components/Charts/Mores/Graph/config.vue
@@ -16,14 +16,14 @@
       </SettingItemBox>
       <SettingItemBox name="线条">
         <SettingItem name="弧线">
-        <!-- 需要输入两位的小数才会变化 -->
+          <!-- 需要输入两位的小数才会变化 -->
           <n-input-number
-          v-model:value="optionData.series[0].lineStyle.curveness"
-          :min="0"
-          :step="0.01"
-          placeholder="弯曲程度"
-          size="small"
-        ></n-input-number>
+            v-model:value="optionData.series[0].lineStyle.curveness"
+            :min="0"
+            :step="0.01"
+            placeholder="弯曲程度"
+            size="small"
+          ></n-input-number>
         </SettingItem>
       </SettingItemBox>
       <SettingItemBox name="图例">
@@ -32,10 +32,61 @@
             size="small"
             :modes="['hex']"
             v-model:value="optionData.legend.textStyle.color"
-        ></n-color-picker>
+          ></n-color-picker>
         </SettingItem>
         <SettingItem name="文本">
-          <n-input-number v-model:value="optionData.legend.textStyle.fontSize" :min="0" :step="1" size="small" placeholder="文字大小">
+          <n-input-number
+            v-model:value="optionData.legend.textStyle.fontSize"
+            :min="0"
+            :step="1"
+            size="small"
+            placeholder="文字大小"
+          >
+          </n-input-number>
+        </SettingItem>
+      </SettingItemBox>
+      <SettingItemBox name="力引导" v-show="graphConfig.layout == 'force'">
+        <SettingItem name="斥力因子">
+          <n-input-number
+            v-model:value="optionData.series[0].force.repulsion"
+            :min="0"
+            :step="1"
+            size="small"
+            placeholder="斥力因子大小"
+          >
+          </n-input-number>
+        </SettingItem>
+        <SettingItem name="引力因子">
+          <n-input-number
+            v-model:value="optionData.series[0].force.gravity"
+            :min="0"
+            :step="0.1"
+            size="small"
+            placeholder="引力因子"
+          >
+          </n-input-number>
+        </SettingItem>
+        <SettingItem name="节点距离">
+          <n-input-number
+            v-model:value="optionData.series[0].force.edgeLength"
+            :min="0"
+            :step="1"
+            size="small"
+            placeholder="节点距离"
+          >
+          </n-input-number>
+        </SettingItem>
+        <SettingItem name="迭代动画">
+          <n-select v-model:value="graphConfig.force.layoutAnimation" :options="LayoutAnimation" size="small" />
+        </SettingItem>
+        <SettingItem name="节点速度">
+          <n-input-number
+            v-model:value="optionData.series[0].force.friction"
+            :min="0"
+            :step="0.1"
+            size="small"
+            placeholder="节点速度"
+          >
           </n-input-number>
         </SettingItem>
       </SettingItemBox>
@@ -46,7 +97,7 @@
 <script setup lang="ts">
 import { PropType, computed } from 'vue'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
-import { option, GraphLayout, LabelSwitch, LabelPosition } from './config'
+import { option, GraphLayout, LabelSwitch, LabelPosition, LayoutAnimation } from './config'
 import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 
 const props = defineProps({
@@ -56,7 +107,7 @@ const props = defineProps({
   }
 })
 
-const graphConfig = computed<typeof option.series[0]>(() => {
+const graphConfig = computed<(typeof option.series)[0]>(() => {
   return props.optionData.series[0]
 })
 </script>
diff --git a/src/packages/components/Charts/Mores/Graph/index.vue b/src/packages/components/Charts/Mores/Graph/index.vue
index 40c2b0e1..378c968e 100644
--- a/src/packages/components/Charts/Mores/Graph/index.vue
+++ b/src/packages/components/Charts/Mores/Graph/index.vue
@@ -1,5 +1,12 @@
 <template>
-  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
+  <v-chart
+    ref="vChartRef"
+    :init-options="initOptions"
+    :theme="themeColor"
+    :option="option"
+    :manual-update="isPreview()"
+    autoresize
+  ></v-chart>
 </template>
 
 <script setup lang="ts">
diff --git a/src/packages/components/Charts/Mores/index.ts b/src/packages/components/Charts/Mores/index.ts
index 84b74f78..a246346b 100644
--- a/src/packages/components/Charts/Mores/index.ts
+++ b/src/packages/components/Charts/Mores/index.ts
@@ -8,4 +8,14 @@ import { DialConfig } from './Dial/index'
 import { SankeyConfig } from './Sankey/index'
 import { GraphConfig } from './Graph/index'
 
-export default [ProcessConfig, RadarConfig, FunnelConfig, HeatmapConfig, WaterPoloConfig, TreeMapConfig, GraphConfig, SankeyConfig, DialConfig]
+export default [
+  ProcessConfig,
+  RadarConfig,
+  FunnelConfig,
+  HeatmapConfig,
+  WaterPoloConfig,
+  TreeMapConfig,
+  GraphConfig,
+  SankeyConfig,
+  DialConfig
+]

From c7796c985246e707f01498928427919757686779 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
 <1262327911@qq.com>
Date: Sun, 3 Sep 2023 16:52:31 +0800
Subject: [PATCH 03/11] =?UTF-8?q?fix:=20=E8=A7=A3=E5=86=B3=E9=A2=84?=
 =?UTF-8?q?=E8=A7=88=E4=B8=8D=E4=BC=9A=E9=9A=90=E8=97=8F=E8=B6=85=E5=87=BA?=
 =?UTF-8?q?=E5=86=85=E5=AE=B9=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/preview/suspenseIndex.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/views/preview/suspenseIndex.vue b/src/views/preview/suspenseIndex.vue
index bf2c528e..bdb1aa32 100644
--- a/src/views/preview/suspenseIndex.vue
+++ b/src/views/preview/suspenseIndex.vue
@@ -47,6 +47,7 @@ setTitle(`预览-${chartEditStore.editCanvasConfig.projectName}`)
 
 const previewRefStyle = computed(() => {
   return {
+    overflow: 'hidden',
     ...getEditCanvasConfigStyle(chartEditStore.editCanvasConfig),
     ...getFilterStyle(chartEditStore.editCanvasConfig)
   }

From dad89b1c52d5621340d730de5b2fcfb90b60480d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
 <1262327911@qq.com>
Date: Sun, 3 Sep 2023 17:42:11 +0800
Subject: [PATCH 04/11] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E5=85=B3?=
 =?UTF-8?q?=E7=B3=BB=E5=9B=BE=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/components/Charts/Mores/Graph/config.ts | 12 ++++++------
 .../components/Charts/Mores/Graph/config.vue         |  6 +++---
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/packages/components/Charts/Mores/Graph/config.ts b/src/packages/components/Charts/Mores/Graph/config.ts
index 7ba6b00c..125d7469 100644
--- a/src/packages/components/Charts/Mores/Graph/config.ts
+++ b/src/packages/components/Charts/Mores/Graph/config.ts
@@ -15,8 +15,8 @@ export const GraphLayout = [
 
 // 标签开关
 export const LabelSwitch = [
-  { label: '开启', value: true },
-  { label: '关闭', value: false }
+  { label: '开启', value: 1 },
+  { label: '关闭', value: 0 }
 ]
 
 // 标签位置
@@ -30,8 +30,8 @@ export const LabelPosition = [
 
 // 图-迭代动画
 export const LayoutAnimation = [
-  { label: '开启', value: true },
-  { label: '关闭', value: false }
+  { label: '开启', value: 1 },
+  { label: '关闭', value: 0 }
 ]
 
 export const option = {
@@ -55,7 +55,7 @@ export const option = {
       links: dataJson.links,
       categories: dataJson.categories,
       label: {
-        show: true,
+        show: 1,
         position: 'right',
         formatter: '{b}'
       },
@@ -70,7 +70,7 @@ export const option = {
         repulsion: 100,
         gravity: 0.1,
         edgeLength: 30,
-        layoutAnimation: true,
+        layoutAnimation: 1,
         friction: 0.6
       }
     }
diff --git a/src/packages/components/Charts/Mores/Graph/config.vue b/src/packages/components/Charts/Mores/Graph/config.vue
index 81ce82f0..65e6e38d 100644
--- a/src/packages/components/Charts/Mores/Graph/config.vue
+++ b/src/packages/components/Charts/Mores/Graph/config.vue
@@ -45,8 +45,8 @@
           </n-input-number>
         </SettingItem>
       </SettingItemBox>
-      <SettingItemBox name="力引导" v-show="graphConfig.layout == 'force'">
-        <SettingItem name="斥力因子">
+      <SettingItemBox name="力引导" v-if="optionData.series[0].force && graphConfig.layout == 'force'">
+        <SettingItem name="斥力因子" v-if="optionData.series[0].force.repulsion">
           <n-input-number
             v-model:value="optionData.series[0].force.repulsion"
             :min="0"
@@ -56,7 +56,7 @@
           >
           </n-input-number>
         </SettingItem>
-        <SettingItem name="引力因子">
+        <SettingItem name="引力因子" v-if="optionData.series[0].force.gravity">
           <n-input-number
             v-model:value="optionData.series[0].force.gravity"
             :min="0"

From 30e7a76de9b7b999004a7eeeae7373a8685ff260 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
 <1262327911@qq.com>
Date: Sun, 3 Sep 2023 18:02:01 +0800
Subject: [PATCH 05/11] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=20pr=5F200=20?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore            |  1 -
 src/packages/index.ts | 21 +++++++++------------
 2 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/.gitignore b/.gitignore
index e0f420b7..624876e9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,6 +3,5 @@ node_modules
 dist
 dist-ssr
 *.local
-pnpm-lock.yaml
 .vscode
 .idea
diff --git a/src/packages/index.ts b/src/packages/index.ts
index 5653bd23..fd551313 100644
--- a/src/packages/index.ts
+++ b/src/packages/index.ts
@@ -1,9 +1,9 @@
-import {ChartList} from '@/packages/components/Charts/index'
-import {DecorateList} from '@/packages/components/Decorates/index'
-import {InformationList} from '@/packages/components/Informations/index'
-import {TableList} from '@/packages/components/Tables/index'
-import {PhotoList} from '@/packages/components/Photos/index'
-import {IconList} from '@/packages/components/Icons/index'
+import { ChartList } from '@/packages/components/Charts/index'
+import { DecorateList } from '@/packages/components/Decorates/index'
+import { InformationList } from '@/packages/components/Informations/index'
+import { TableList } from '@/packages/components/Tables/index'
+import { PhotoList } from '@/packages/components/Photos/index'
+import { IconList } from '@/packages/components/Icons/index'
 import { PackagesCategoryEnum, PackagesType, ConfigType, FetchComFlagType } from '@/packages/index.d'
 
 const configModules: Record<string, { default: string }> = import.meta.glob('./components/**/config.vue', {
@@ -72,7 +72,7 @@ const fetchComponent = (chartName: string, flag: FetchComFlagType) => {
  * @param {ConfigType} dropData 配置项
  */
 export const fetchChartComponent = (dropData: ConfigType) => {
-  const {key} = dropData
+  const { key } = dropData
   return fetchComponent(key, FetchComFlagType.VIEW)?.default
 }
 
@@ -81,7 +81,7 @@ export const fetchChartComponent = (dropData: ConfigType) => {
  * @param {ConfigType} dropData 配置项
  */
 export const fetchConfigComponent = (dropData: ConfigType) => {
-  const {key} = dropData
+  const { key } = dropData
   return fetchComponent(key, FetchComFlagType.CONFIG)?.default
 }
 
@@ -94,10 +94,7 @@ export const fetchImages = async (targetData?: ConfigType) => {
   // 正则判断图片是否为 url，是则直接返回该 url
   if (/^(http|https):\/\/([\w.]+\/?)\S*/.test(targetData.image)) return targetData.image
   // 新数据动态处理
-  const {
-    image,
-    package: targetDataPackage
-  } = targetData
+  const { image } = targetData
   // 兼容旧数据
   if (image.includes('@') || image.includes('base64')) return image
 

From 8883c470238c72a6f574c87c9083256e8e55ee94 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
 <1262327911@qq.com>
Date: Sun, 3 Sep 2023 23:09:54 +0800
Subject: [PATCH 06/11] =?UTF-8?q?feat:=20=E8=A7=A3=E5=86=B3=E5=88=86?=
 =?UTF-8?q?=E7=BB=84=E5=9C=A8=E9=A2=84=E8=A7=88=E4=BC=9A=E5=A4=B1=E6=95=88?=
 =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../preview/components/PreviewRenderGroup/index.vue    | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/views/preview/components/PreviewRenderGroup/index.vue b/src/views/preview/components/PreviewRenderGroup/index.vue
index 354fa29c..a24e8676 100644
--- a/src/views/preview/components/PreviewRenderGroup/index.vue
+++ b/src/views/preview/components/PreviewRenderGroup/index.vue
@@ -6,8 +6,8 @@
     :key="item.id"
     :style="{
       ...getComponentAttrStyle(item.attr, groupIndex),
-      ...getFilterStyle(item.styles),
-      ...getTransformStyle(item.styles),
+      ...getFilterStyle(groupData.styles),
+      ...getTransformStyle(groupData.styles),
       ...getStatusStyle(item.status),
       ...getPreviewConfigStyle(item.preview),
       ...getBlendModeStyle(item.styles) as any
@@ -19,7 +19,11 @@
       :chartConfig="item"
       :themeSetting="themeSetting"
       :themeColor="themeColor"
-      :style="{ ...getSizeStyle(item.attr) }"
+      :style="{
+        ...getSizeStyle(item.attr),
+        ...getFilterStyle(item.styles),
+        ...getTransformStyle(item.styles)
+      }"
       v-on="useLifeHandler(item)"
     ></component>
   </div>

From b4e018ee96dbd3e63b1b87f408916d5ee7826b43 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
 <1262327911@qq.com>
Date: Wed, 6 Sep 2023 16:58:42 +0800
Subject: [PATCH 07/11] =?UTF-8?q?fix:=20=E8=A7=A3=E5=86=B3=E4=BE=9D?=
 =?UTF-8?q?=E8=B5=96=E5=AE=89=E8=A3=85=E4=BC=9A=E6=8A=A5=E9=94=99=E7=9A=84?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index bd5acbb0..3636ceb3 100644
--- a/package.json
+++ b/package.json
@@ -41,7 +41,7 @@
     "three": "^0.145.0",
     "vue": "^3.2.31",
     "vue-demi": "^0.13.1",
-    "vue-i18n": "^9.2.2",
+    "vue-i18n": "9.2.2",
     "vue-router": "4.0.12",
     "vue3-lazyload": "^0.2.5-beta",
     "vue3-sketch-ruler": "^1.3.3",

From 52f74d7b91776c05cd7818b85f79645bcc6f4bef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
 <1262327911@qq.com>
Date: Wed, 13 Sep 2023 10:43:11 +0800
Subject: [PATCH 08/11] =?UTF-8?q?fix:=20=E8=A7=A3=E5=86=B3=E4=BF=9D?=
 =?UTF-8?q?=E5=AD=98=E6=97=B6=E5=80=99=E5=8F=AF=E8=83=BD=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E8=8E=B7=E5=8F=96=E4=B8=8D=E5=AE=8C=E6=95=B4=E7=9A=84bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/chartEditStore/chartEditStore.ts  | 10 +--
 .../EditTools/hooks/useSyncUpdate.hook.ts     |  4 +-
 .../components/EditTools/index.vue            |  2 +-
 .../components/EditTools/utils/index.ts       | 82 +++++++++----------
 .../ContentHeader/headerRightBtn/index.vue    |  2 +-
 5 files changed, 50 insertions(+), 50 deletions(-)

diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts
index 91156ac3..0b37bb6a 100644
--- a/src/store/modules/chartEditStore/chartEditStore.ts
+++ b/src/store/modules/chartEditStore/chartEditStore.ts
@@ -161,17 +161,17 @@ export const useChartEditStore = defineStore({
     },
     getComponentList(): Array<CreateComponentType | CreateComponentGroupType> {
       return this.componentList
-    },
-    // 获取需要存储的数据项
+    }
+  },
+  actions: {
+    // * 获取需要存储的数据项
     getStorageInfo(): ChartEditStorage {
       return {
         [ChartEditStoreEnum.EDIT_CANVAS_CONFIG]: this.getEditCanvasConfig,
         [ChartEditStoreEnum.COMPONENT_LIST]: this.getComponentList,
         [ChartEditStoreEnum.REQUEST_GLOBAL_CONFIG]: this.getRequestGlobalConfig
       }
-    }
-  },
-  actions: {
+    },
     // * 设置 editCanvas 数据项
     setEditCanvas<T extends keyof EditCanvasType, K extends EditCanvasType[T]>(key: T, value: K) {
       this.editCanvas[key] = value
diff --git a/src/views/chart/ContentEdit/components/EditTools/hooks/useSyncUpdate.hook.ts b/src/views/chart/ContentEdit/components/EditTools/hooks/useSyncUpdate.hook.ts
index 3865742d..60e7133c 100644
--- a/src/views/chart/ContentEdit/components/EditTools/hooks/useSyncUpdate.hook.ts
+++ b/src/views/chart/ContentEdit/components/EditTools/hooks/useSyncUpdate.hook.ts
@@ -19,14 +19,14 @@ export const syncData = () => {
     transformOrigin: 'center',
     onPositiveCallback: () => {
       window['$message'].success('正在同步编辑器...')
-      dispatchEvent(new CustomEvent(SavePageEnum.CHART, { detail: chartEditStore.getStorageInfo }))
+      dispatchEvent(new CustomEvent(SavePageEnum.CHART, { detail: chartEditStore.getStorageInfo() }))
     }
   })
 }
 
 // 同步数据到预览页
 export const syncDataToPreview = () => {
-  dispatchEvent(new CustomEvent(SavePageEnum.CHART_TO_PREVIEW, { detail: chartEditStore.getStorageInfo }))
+  dispatchEvent(new CustomEvent(SavePageEnum.CHART_TO_PREVIEW, { detail: chartEditStore.getStorageInfo() }))
 }
 
 // 侦听器更新
diff --git a/src/views/chart/ContentEdit/components/EditTools/index.vue b/src/views/chart/ContentEdit/components/EditTools/index.vue
index 197a82c5..3f7ada41 100644
--- a/src/views/chart/ContentEdit/components/EditTools/index.vue
+++ b/src/views/chart/ContentEdit/components/EditTools/index.vue
@@ -158,7 +158,7 @@ const editHandle = () => {
 
 // 把内存中的数据同步到SessionStorage 便于传递给新窗口初始化数据
 const updateToSession = (id: string) => {
-  const storageInfo = chartEditStore.getStorageInfo
+  const storageInfo = chartEditStore.getStorageInfo()
   const sessionStorageInfo = getLocalStorage(StorageEnum.GO_CHART_STORAGE_LIST) || []
 
   if (sessionStorageInfo?.length) {
diff --git a/src/views/chart/ContentEdit/components/EditTools/utils/index.ts b/src/views/chart/ContentEdit/components/EditTools/utils/index.ts
index 39e7af13..f465123a 100644
--- a/src/views/chart/ContentEdit/components/EditTools/utils/index.ts
+++ b/src/views/chart/ContentEdit/components/EditTools/utils/index.ts
@@ -1,41 +1,41 @@
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { canvasCut, downloadTextFile, JSONStringify } from '@/utils'
-const chartEditStore = useChartEditStore()
-
-// 导出
-export const exportHandle = () => {
-  // 取消选中
-  chartEditStore.setTargetSelectChart(undefined)
-
-  // 导出数据
-  downloadTextFile(
-    JSONStringify(chartEditStore.getStorageInfo || []),
-    undefined,
-    'json'
-  )
-
-  // 导出图片
-  const range = document.querySelector('.go-edit-range') as HTMLElement
-  const watermark = document.getElementById('go-edit-watermark')
-  // 隐藏边距线
-  if (!range || !watermark) {
-    window['$message'].error('导出失败！')
-    return
-  }
-
-  // 记录缩放比例
-  const scaleTemp = chartEditStore.getEditCanvas.scale
-  // 百分百展示页面
-  chartEditStore.setScale(1, true)
-  // 展示水印
-  watermark.style.display = 'block'
-
-  setTimeout(() => {
-    canvasCut(range, () => {
-      // 隐藏水印
-      if (watermark) watermark.style.display = 'none'
-      // 还原页面大小
-      chartEditStore.setScale(scaleTemp, true)
-    })
-  }, 600)
-}
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { canvasCut, downloadTextFile, JSONStringify } from '@/utils'
+const chartEditStore = useChartEditStore()
+
+// 导出
+export const exportHandle = () => {
+  // 取消选中
+  chartEditStore.setTargetSelectChart(undefined)
+
+  // 导出数据
+  downloadTextFile(
+    JSONStringify(chartEditStore.getStorageInfo() || []),
+    undefined,
+    'json'
+  )
+
+  // 导出图片
+  const range = document.querySelector('.go-edit-range') as HTMLElement
+  const watermark = document.getElementById('go-edit-watermark')
+  // 隐藏边距线
+  if (!range || !watermark) {
+    window['$message'].error('导出失败！')
+    return
+  }
+
+  // 记录缩放比例
+  const scaleTemp = chartEditStore.getEditCanvas.scale
+  // 百分百展示页面
+  chartEditStore.setScale(1, true)
+  // 展示水印
+  watermark.style.display = 'block'
+
+  setTimeout(() => {
+    canvasCut(range, () => {
+      // 隐藏水印
+      if (watermark) watermark.style.display = 'none'
+      // 还原页面大小
+      chartEditStore.setScale(scaleTemp, true)
+    })
+  }, 600)
+}
diff --git a/src/views/chart/ContentHeader/headerRightBtn/index.vue b/src/views/chart/ContentHeader/headerRightBtn/index.vue
index 18369413..297ebe43 100644
--- a/src/views/chart/ContentHeader/headerRightBtn/index.vue
+++ b/src/views/chart/ContentHeader/headerRightBtn/index.vue
@@ -32,7 +32,7 @@ const previewHandle = () => {
   const { id } = routerParamsInfo.params
   // id 标识
   const previewId = typeof id === 'string' ? id : id[0]
-  const storageInfo = chartEditStore.getStorageInfo
+  const storageInfo = chartEditStore.getStorageInfo()
   const sessionStorageInfo = getLocalStorage(StorageEnum.GO_CHART_STORAGE_LIST) || []
 
   if (sessionStorageInfo?.length) {

From 52aeca9dd45fc2a096d9fd54fe608c1ef5b4543b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A9=BA?= <jinj@hxcfsoft.com>
Date: Fri, 15 Sep 2023 14:12:28 +0000
Subject: [PATCH 09/11] =?UTF-8?q?=E7=AC=AC=E4=B8=89=E6=96=B9=E5=BA=94?=
 =?UTF-8?q?=E7=94=A8open=E9=A2=84=E8=A7=88=E5=9C=B0=E5=9D=80=E7=9A=84?=
 =?UTF-8?q?=E6=97=B6=E5=80=99=EF=BC=8C=E5=8F=91=E7=8E=B0window.opener?=
 =?UTF-8?q?=E5=B9=B6=E4=B8=8D=E6=98=AF=E4=B8=80=E4=B8=AAwindow=E5=AF=B9?=
 =?UTF-8?q?=E8=B1=A1=E4=BC=9A=E6=8A=A5addEventListener=E4=B8=8D=E5=AD=98?=
 =?UTF-8?q?=E5=9C=A8=E3=80=82=20=E7=AC=AC=E4=B8=89=E6=96=B9=E5=BA=94?=
 =?UTF-8?q?=E7=94=A8open=E9=A2=84=E8=A7=88=E5=9C=B0=E5=9D=80=E7=9A=84?=
 =?UTF-8?q?=E6=97=B6=E5=80=99=EF=BC=8C=E5=8F=91=E7=8E=B0window.opener?=
 =?UTF-8?q?=E5=B9=B6=E4=B8=8D=E6=98=AF=E4=B8=80=E4=B8=AAwindow=E5=AF=B9?=
 =?UTF-8?q?=E8=B1=A1=E4=BC=9A=E6=8A=A5addEventListener=E4=B8=8D=E5=AD=98?=
 =?UTF-8?q?=E5=9C=A8=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 空 <jinj@hxcfsoft.com>
---
 src/views/preview/wrapper.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/views/preview/wrapper.vue b/src/views/preview/wrapper.vue
index c119a661..6a9b9a72 100644
--- a/src/views/preview/wrapper.vue
+++ b/src/views/preview/wrapper.vue
@@ -16,6 +16,7 @@ let key = ref(Date.now())
 // 数据变更 -> 组件销毁重建
 ;[SavePageEnum.JSON, SavePageEnum.CHART_TO_PREVIEW].forEach((saveEvent: string) => {
   if (!window.opener) return
+  if(!(window.opener === window)) return
   window.opener.addEventListener(saveEvent, async (e: any) => {
     const localStorageInfo: ChartEditStorageType = await getSessionStorageInfo() as unknown as ChartEditStorageType
     setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, [{ ...e.detail, id: localStorageInfo.id }])

From b97126d03e5628511ca85fe55ac9fa1a2b06bdbd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A9=BA?= <jinj@hxcfsoft.com>
Date: Fri, 15 Sep 2023 14:12:28 +0000
Subject: [PATCH 10/11] =?UTF-8?q?=E7=AC=AC=E4=B8=89=E6=96=B9=E5=BA=94?=
 =?UTF-8?q?=E7=94=A8open=E9=A2=84=E8=A7=88=E5=9C=B0=E5=9D=80=E7=9A=84?=
 =?UTF-8?q?=E6=97=B6=E5=80=99=EF=BC=8C=E5=8F=91=E7=8E=B0window.opener?=
 =?UTF-8?q?=E5=B9=B6=E4=B8=8D=E6=98=AF=E4=B8=80=E4=B8=AAwindow=E5=AF=B9?=
 =?UTF-8?q?=E8=B1=A1=E4=BC=9A=E6=8A=A5addEventListener=E4=B8=8D=E5=AD=98?=
 =?UTF-8?q?=E5=9C=A8=E3=80=82=20=E7=AC=AC=E4=B8=89=E6=96=B9=E5=BA=94?=
 =?UTF-8?q?=E7=94=A8open=E9=A2=84=E8=A7=88=E5=9C=B0=E5=9D=80=E7=9A=84?=
 =?UTF-8?q?=E6=97=B6=E5=80=99=EF=BC=8C=E5=8F=91=E7=8E=B0window.opener?=
 =?UTF-8?q?=E5=B9=B6=E4=B8=8D=E6=98=AF=E4=B8=80=E4=B8=AAwindow=E5=AF=B9?=
 =?UTF-8?q?=E8=B1=A1=E4=BC=9A=E6=8A=A5addEventListener=E4=B8=8D=E5=AD=98?=
 =?UTF-8?q?=E5=9C=A8=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 空 <jinj@hxcfsoft.com>
---
 src/views/preview/wrapper.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/views/preview/wrapper.vue b/src/views/preview/wrapper.vue
index c119a661..6a9b9a72 100644
--- a/src/views/preview/wrapper.vue
+++ b/src/views/preview/wrapper.vue
@@ -16,6 +16,7 @@ let key = ref(Date.now())
 // 数据变更 -> 组件销毁重建
 ;[SavePageEnum.JSON, SavePageEnum.CHART_TO_PREVIEW].forEach((saveEvent: string) => {
   if (!window.opener) return
+  if(!(window.opener === window)) return
   window.opener.addEventListener(saveEvent, async (e: any) => {
     const localStorageInfo: ChartEditStorageType = await getSessionStorageInfo() as unknown as ChartEditStorageType
     setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, [{ ...e.detail, id: localStorageInfo.id }])

From 2b067ce818eaada1b9c6fcba3c941210b75188af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
 <1262327911@qq.com>
Date: Sat, 16 Sep 2023 16:52:55 +0800
Subject: [PATCH 11/11] =?UTF-8?q?feat:=20=E6=8A=BD=E5=8F=96PR=E5=9C=B0?=
 =?UTF-8?q?=E5=9B=BE=E4=B8=8B=E9=92=BB=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Charts/Maps/MapBase/config.ts  |  31 +-
 .../components/Charts/Maps/MapBase/config.vue |  67 ++-
 .../components/Charts/Maps/MapBase/data.json  |  26 ++
 .../components/Charts/Maps/MapBase/index.vue  | 412 +++++++++++-------
 4 files changed, 369 insertions(+), 167 deletions(-)

diff --git a/src/packages/components/Charts/Maps/MapBase/config.ts b/src/packages/components/Charts/Maps/MapBase/config.ts
index dd020e50..d9844001 100644
--- a/src/packages/components/Charts/Maps/MapBase/config.ts
+++ b/src/packages/components/Charts/Maps/MapBase/config.ts
@@ -11,7 +11,10 @@ export const option = {
   dataset: dataJson,
   mapRegion: {
     adcode: 'china',
-    showHainanIsLands: true
+    showHainanIsLands: true,
+    enter: false,
+    backSize: 20,
+    backColor: '#ffffff'
   },
   tooltip: {
     show: true,
@@ -103,19 +106,19 @@ export const option = {
         borderColor: 'rgba(147, 235, 248, 0.8)',
         textStyle: {
           color: '#FFFFFF',
-          fontSize: 12,
+          fontSize: 12
         }
       },
       label: {
         show: false,
         color: '#FFFFFF',
-        fontSize: 12,
+        fontSize: 12
       },
       emphasis: {
         disabled: false,
         label: {
           color: '#FFFFFF',
-          fontSize: 12,
+          fontSize: 12
         },
         itemStyle: {
           areaColor: '#389BB7',
@@ -148,6 +151,26 @@ export const option = {
         shadowOffsetY: 2,
         shadowBlur: 10
       }
+    },
+    {
+      type: 'lines',
+      zlevel: 2,
+      effect: {
+        show: true,
+        period: 4, //箭头指向速度，值越小速度越快
+        trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重
+        symbol: 'arrow', //箭头图标
+        symbolSize: 7 //图标大小
+      },
+      lineStyle: {
+        normal: {
+          color: '#4fb6d2',
+          width: 1, //线条宽度
+          opacity: 0.1, //尾迹线条透明度
+          curveness: 0.3 //尾迹线条曲直度
+        }
+      },
+      data: []
     }
   ]
 }
diff --git a/src/packages/components/Charts/Maps/MapBase/config.vue b/src/packages/components/Charts/Maps/MapBase/config.vue
index b3ef4961..e0363d8f 100644
--- a/src/packages/components/Charts/Maps/MapBase/config.vue
+++ b/src/packages/components/Charts/Maps/MapBase/config.vue
@@ -69,11 +69,7 @@
         </n-space>
       </SettingItem>
       <SettingItem name="字体颜色">
-        <n-color-picker
-          size="small"
-          :modes="['hex']"
-          v-model:value="seriesList[1].label.color"
-        ></n-color-picker>
+        <n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[1].label.color"></n-color-picker>
       </SettingItem>
       <SettingItem name="字体大小">
         <n-input-number
@@ -129,7 +125,7 @@
         ></n-color-picker>
       </SettingItem>
     </SettingItemBox>
-    
+
     <SettingItemBox name="悬浮弹窗">
       <SettingItem name="显示">
         <n-space>
@@ -180,6 +176,22 @@
       <SettingItem>
         <n-checkbox v-model:checked="mapRegion.showHainanIsLands" size="small">显示南海群岛</n-checkbox>
       </SettingItem>
+      <SettingItem v-if="seriesList[2]">
+        <n-checkbox v-model:checked="mapRegion.enter" size="small">点击进入下级</n-checkbox>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="返回图标" v-if="mapRegion.enter">
+      <SettingItem name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="mapRegion.backColor"></n-color-picker>
+      </SettingItem>
+      <SettingItem name="大小">
+        <n-input-number
+          v-model:value="mapRegion.backSize"
+          :min="1"
+          size="small"
+          placeholder="请输入字体大小"
+        ></n-input-number>
+      </SettingItem>
     </SettingItemBox>
   </CollapseItem>
   <CollapseItem name="标记" :expanded="true">
@@ -191,7 +203,7 @@
         <n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[0].itemStyle.color"></n-color-picker>
       </SettingItem>
     </SettingItemBox>
-      
+
     <SettingItemBox name="文本">
       <SettingItem name="显示">
         <n-space>
@@ -223,6 +235,47 @@
       </SettingItem>
     </SettingItemBox>
   </CollapseItem>
+
+  <CollapseItem v-if="seriesList[2]" name="飞线" :expanded="true">
+    <SettingItemBox name="箭头">
+      <SettingItem name="速度">
+        <n-tooltip trigger="hover">
+          <template #trigger>
+            <n-input-number v-model:value="seriesList[2].effect.period" size="small" :min="0"></n-input-number>
+          </template>
+          值越小速度越快
+        </n-tooltip>
+      </SettingItem>
+      <SettingItem name="尾迹">
+        <n-tooltip trigger="hover">
+          <template #trigger>
+            <n-input-number
+              v-model:value="seriesList[2].effect.trailLength"
+              size="small"
+              :min="0"
+              :max="1"
+            ></n-input-number>
+          </template>
+          特效尾迹长度[0,1]值越大，尾迹越长重
+        </n-tooltip>
+      </SettingItem>
+      <SettingItem name="大小">
+        <n-input-number v-model:value="seriesList[2].effect.symbolSize" size="small" :min="0"></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="配置">
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="seriesList[2].lineStyle.normal.color"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="宽度">
+        <n-input-number v-model:value="seriesList[2].lineStyle.normal.width" size="small" :min="1"></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
 </template>
 
 <script setup lang="ts">
diff --git a/src/packages/components/Charts/Maps/MapBase/data.json b/src/packages/components/Charts/Maps/MapBase/data.json
index 3deec4f2..58d86ddd 100644
--- a/src/packages/components/Charts/Maps/MapBase/data.json
+++ b/src/packages/components/Charts/Maps/MapBase/data.json
@@ -21,6 +21,32 @@
       "value": [126.642464, 45.756967, 101]
     }
   ],
+  "line": [
+    {
+      "coords": [
+        [113.665412, 34.757975],
+        [116.405285, 39.904989]
+      ]
+    },
+    {
+      "coords": [
+        [101.778916, 36.623178],
+        [116.405285, 39.904989]
+      ]
+    },
+    {
+      "coords": [
+        [106.278179, 38.46637],
+        [116.405285, 39.904989]
+      ]
+    },
+    {
+      "coords": [
+        [126.642464, 45.756967],
+        [116.405285, 39.904989]
+      ]
+    }
+  ],
   "map": [
     {
       "name": "北京市",
diff --git a/src/packages/components/Charts/Maps/MapBase/index.vue b/src/packages/components/Charts/Maps/MapBase/index.vue
index a6300819..95feda3c 100644
--- a/src/packages/components/Charts/Maps/MapBase/index.vue
+++ b/src/packages/components/Charts/Maps/MapBase/index.vue
@@ -1,156 +1,256 @@
-<template>
-  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
-  </v-chart>
-</template>
-
-<script setup lang="ts">
-import { PropType, reactive, watch, ref, nextTick } from 'vue'
-import config, { includes } from './config'
-import VChart from 'vue-echarts'
-import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
-import { use, registerMap } from 'echarts/core'
-import { EffectScatterChart, MapChart } from 'echarts/charts'
-import { CanvasRenderer } from 'echarts/renderers'
-import { useChartDataFetch } from '@/hooks'
-import { mergeTheme, setOption } from '@/packages/public/chart'
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { isPreview } from '@/utils'
-import mapJsonWithoutHainanIsLands from './mapWithoutHainanIsLands.json'
-import { DatasetComponent, GridComponent, TooltipComponent, GeoComponent, VisualMapComponent } 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([
-  MapChart,
-  DatasetComponent,
-  CanvasRenderer,
-  GridComponent,
-  TooltipComponent,
-  GeoComponent,
-  EffectScatterChart,
-  VisualMapComponent
-])
-
-const option = reactive({
-  value: mergeTheme(props.chartConfig.option, props.themeSetting, includes)
-})
-const vChartRef = ref<typeof VChart>()
-
-//动态获取json注册地图
-const getGeojson = (regionId: string) => {
-  return new Promise<boolean>(resolve => {
-    import(`./mapGeojson/${regionId}.json`).then(data => {
-      registerMap(regionId, { geoJSON: data.default as any, specialAreas: {} })
-      resolve(true)
-    })
-  })
-}
-
-//异步时先注册空的 保证初始化不报错
-registerMap(`${props.chartConfig.option.mapRegion.adcode}`, { geoJSON: {} as any, specialAreas: {} })
-
-// 进行更换初始化地图 如果为china 单独处理
-const registerMapInitAsync = async () => {
-  await nextTick()
-  const adCode = `${props.chartConfig.option.mapRegion.adcode}`;
-  if (adCode !== 'china') {
-    await getGeojson(adCode)
-  } else {
-    await hainanLandsHandle(props.chartConfig.option.mapRegion.showHainanIsLands)
-  }
-  vEchartsSetOption()
-}
-registerMapInitAsync()
-
-// 手动触发渲染
-const vEchartsSetOption = () => {
-  option.value = props.chartConfig.option
-  setOption(vChartRef.value, props.chartConfig.option)
-}
-
-// 更新数据处理
-const dataSetHandle = async (dataset: any) => {
-  props.chartConfig.option.series.forEach((item: any) => {
-    if (item.type === 'effectScatter' && dataset.point) item.data = dataset.point
-    else if (item.type === 'map' && dataset.map) item.data = dataset.map
-  })
-  if (dataset.pieces) props.chartConfig.option.visualMap.pieces = dataset.pieces
-
-  isPreview() && vEchartsSetOption()
-}
-// 处理海南群岛
-const hainanLandsHandle = async (newData: boolean) => {
-  if (newData) {
-    await getGeojson('china')
-  } else {
-    registerMap('china', { geoJSON: mapJsonWithoutHainanIsLands as any, specialAreas: {} })
-  }
-}
-//监听 dataset 数据发生变化
-watch(
-  () => props.chartConfig.option.dataset,
-  newData => {
-    dataSetHandle(newData)
-  },
-  {
-    immediate: true,
-    deep: false
-  }
-)
-
-//监听是否显示南海群岛
-watch(
-  () => props.chartConfig.option.mapRegion.showHainanIsLands,
-  async newData => {
-    try {
-      await hainanLandsHandle(newData)
-      vEchartsSetOption()
-    } catch (error) {
-      console.log(error)
-    }
-  },
-  {
-    deep: false
-  }
-)
-
-//监听地图展示区域发生变化
-watch(
-  () => `${props.chartConfig.option.mapRegion.adcode}`,
-  async newData => {
-    try {
-      await getGeojson(newData)
-      props.chartConfig.option.geo.map = newData
-      props.chartConfig.option.series.forEach((item: any) => {
-        if (item.type === 'map') item.map = newData
-      })
-      vEchartsSetOption()
-    } catch (error) {
-      console.log(error)
-    }
-  },
-  {
-    deep: false
-  }
-)
-
-// 预览
-useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
-  dataSetHandle(newData)
-})
-</script>
+<template>
+  <div>
+    <div class="back-icon" v-if="(enter && levelHistory.length !== 0) || (enter && !isPreview())" @click="backLevel">
+      <n-icon :color="backColor" :size="backSize * 1.1">
+        <ArrowBackIcon />
+      </n-icon>
+      <span
+        :style="{
+          'font-weight': 200,
+          color: backColor,
+          'font-size': `${backSize}px`
+        }"
+      >
+        返回上级
+      </span>
+    </div>
+    <v-chart
+      ref="vChartRef"
+      :init-options="initOptions"
+      :theme="themeColor"
+      :option="option.value"
+      :manual-update="isPreview()"
+      autoresize
+      @click="chartPEvents"
+    >
+    </v-chart>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, reactive, watch, ref, nextTick, toRefs } from 'vue'
+import config, { includes } from './config'
+import VChart from 'vue-echarts'
+import { icon } from '@/plugins'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
+import { use, registerMap } from 'echarts/core'
+import { EffectScatterChart, MapChart } from 'echarts/charts'
+import { CanvasRenderer } from 'echarts/renderers'
+import { useChartDataFetch } from '@/hooks'
+import { mergeTheme, setOption } from '@/packages/public/chart'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { isPreview } from '@/utils'
+import mapJsonWithoutHainanIsLands from './mapWithoutHainanIsLands.json'
+import mapChinaJson from './mapGeojson/china.json'
+import { DatasetComponent, GridComponent, TooltipComponent, GeoComponent, VisualMapComponent } 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 { ArrowBackIcon } = icon.ionicons5
+let levelHistory: any = ref([])
+
+const { backColor, backSize, enter } = toRefs(props.chartConfig.option.mapRegion)
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
+use([
+  MapChart,
+  DatasetComponent,
+  CanvasRenderer,
+  GridComponent,
+  TooltipComponent,
+  GeoComponent,
+  EffectScatterChart,
+  VisualMapComponent
+])
+
+const option = reactive({
+  value: mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+})
+const vChartRef = ref<typeof VChart>()
+
+//动态获取json注册地图
+const getGeojson = (regionId: string) => {
+  return new Promise<boolean>(resolve => {
+    import(`./mapGeojson/${regionId}.json`).then(data => {
+      registerMap(regionId, { geoJSON: data.default as any, specialAreas: {} })
+      resolve(true)
+    })
+  })
+}
+
+//异步时先注册空的 保证初始化不报错
+registerMap(`${props.chartConfig.option.mapRegion.adcode}`, { geoJSON: {} as any, specialAreas: {} })
+
+// 进行更换初始化地图 如果为china 单独处理
+const registerMapInitAsync = async () => {
+  await nextTick()
+  const adCode = `${props.chartConfig.option.mapRegion.adcode}`
+  if (adCode !== 'china') {
+    await getGeojson(adCode)
+  } else {
+    await hainanLandsHandle(props.chartConfig.option.mapRegion.showHainanIsLands)
+  }
+  vEchartsSetOption()
+}
+registerMapInitAsync()
+
+// 手动触发渲染
+const vEchartsSetOption = () => {
+  option.value = props.chartConfig.option
+  setOption(vChartRef.value, props.chartConfig.option)
+}
+
+// 更新数据处理
+const dataSetHandle = async (dataset: any) => {
+  props.chartConfig.option.series.forEach((item: any) => {
+    if (item.type === 'effectScatter' && dataset.point) item.data = dataset.point
+    else if (item.type === 'lines' && dataset.line) {
+      item.data = dataset.line.map((it: any) => {
+        return {
+          ...it,
+          lineStyle: {
+            color: props.chartConfig.option.series[2].lineStyle.normal.color
+          }
+        }
+      })
+    } else if (item.type === 'map' && dataset.map) item.data = dataset.map
+  })
+  if (dataset.pieces) props.chartConfig.option.visualMap.pieces = dataset.pieces
+
+  isPreview() && vEchartsSetOption()
+}
+// 处理海南群岛
+const hainanLandsHandle = async (newData: boolean) => {
+  if (newData) {
+    await getGeojson('china')
+  } else {
+    registerMap('china', { geoJSON: mapJsonWithoutHainanIsLands as any, specialAreas: {} })
+  }
+}
+
+// 点击区域
+const chartPEvents = (e: any) => {
+  if (e.seriesType !== 'map') return
+  if (!props.chartConfig.option.mapRegion.enter) {
+    return
+  }
+  mapChinaJson.features.forEach(item => {
+    var pattern = new RegExp(e.name)
+    if (pattern.test(item.properties.name)) {
+      let code = String(item.properties.adcode)
+      levelHistory.value.push(code)
+      checkOrMap(code)
+    }
+  })
+}
+
+// 返回上一级
+const backLevel = () => {
+  levelHistory.value = []
+  if (levelHistory.value.length > 1) {
+    levelHistory.value.pop()
+    const code = levelHistory[levelHistory.value.length - 1]
+    checkOrMap(code)
+  } else {
+    checkOrMap('china')
+  }
+}
+
+// 切换地图
+const checkOrMap = async (newData: string) => {
+  await getGeojson(newData)
+  props.chartConfig.option.geo.map = newData
+  props.chartConfig.option.series.forEach((item: any) => {
+    if (item.type === 'map') item.map = newData
+  })
+  vEchartsSetOption()
+}
+
+//监听 dataset 数据发生变化
+watch(
+  () => props.chartConfig.option.dataset,
+  newData => {
+    dataSetHandle(newData)
+  },
+  {
+    immediate: true,
+    deep: false
+  }
+)
+
+// 监听线的颜色
+if (props.chartConfig.option.series[2] && !isPreview()) {
+  watch(
+    () => props.chartConfig.option.series[2].lineStyle.normal.color,
+    () => {
+      dataSetHandle(props.chartConfig.option.dataset)
+    },
+    {
+      deep: false
+    }
+  )
+}
+
+//监听是否显示南海群岛
+if (!isPreview()) {
+  watch(
+    () => props.chartConfig.option.mapRegion.showHainanIsLands,
+    async newData => {
+      try {
+        await hainanLandsHandle(newData)
+        vEchartsSetOption()
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    {
+      deep: false
+    }
+  )
+}
+//监听地图展示区域发生变化
+watch(
+  () => `${props.chartConfig.option.mapRegion.adcode}`,
+  newData => {
+    try {
+      checkOrMap(newData)
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
+    deep: false
+  }
+)
+
+// 预览
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  dataSetHandle(newData)
+})
+</script>
+
+<style scope lang="scss">
+.back-icon {
+  z-index: 50;
+  cursor: pointer;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  top: 0;
+  left: 0;
+  gap: 2px;
+}
+</style>