From 40a129aafdd4891bbcf29c54916aecdb24b0aac9 Mon Sep 17 00:00:00 2001
From: MTrun <1262327911@qq.com>
Date: Wed, 23 Feb 2022 14:11:33 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=85=A8=E5=B1=80?=
 =?UTF-8?q?=E6=B5=8B=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CollapseItem.vue                          |   2 +-
 .../ChartItemSetting/GlobalSetting.vue        | 150 ++++++++++++++++++
 .../ChartItemSetting/SettingItem.vue          |  32 ++++
 .../ChartItemSetting/SettingItemBox.vue       |  38 +++++
 src/components/ChartItemSetting/index.ts      |   9 ++
 src/components/ConfigItemCom/ConfigItem.vue   |  26 ---
 .../ConfigItemCom/ConfigItemBox.vue           |  33 ----
 .../ConfigItemCom/GlobalSetting.vue           |  53 -------
 src/components/ConfigItemCom/index.ts         |   9 --
 .../chartConfiguration/echarts/axis.ts        |  20 +++
 .../chartConfiguration/echarts/index.ts       |   1 +
 src/settings/chartThemes/global.theme.json    |  12 +-
 .../components/ChartThemSetting/index.vue     |   2 +-
 13 files changed, 258 insertions(+), 129 deletions(-)
 rename src/components/{ConfigItemCom => ChartItemSetting}/CollapseItem.vue (90%)
 create mode 100644 src/components/ChartItemSetting/GlobalSetting.vue
 create mode 100644 src/components/ChartItemSetting/SettingItem.vue
 create mode 100644 src/components/ChartItemSetting/SettingItemBox.vue
 create mode 100644 src/components/ChartItemSetting/index.ts
 delete mode 100644 src/components/ConfigItemCom/ConfigItem.vue
 delete mode 100644 src/components/ConfigItemCom/ConfigItemBox.vue
 delete mode 100644 src/components/ConfigItemCom/GlobalSetting.vue
 delete mode 100644 src/components/ConfigItemCom/index.ts
 create mode 100644 src/packages/chartConfiguration/echarts/axis.ts
 create mode 100644 src/packages/chartConfiguration/echarts/index.ts

diff --git a/src/components/ConfigItemCom/CollapseItem.vue b/src/components/ChartItemSetting/CollapseItem.vue
similarity index 90%
rename from src/components/ConfigItemCom/CollapseItem.vue
rename to src/components/ChartItemSetting/CollapseItem.vue
index 08036b4d..e25b2884 100644
--- a/src/components/ConfigItemCom/CollapseItem.vue
+++ b/src/components/ChartItemSetting/CollapseItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <n-divider />
+  <n-divider style="margin: 10px 0" />
   <n-collapse arrow-placement="right" default-expanded-names="1">
     <!-- 右侧 -->
     <template #header-extra>
diff --git a/src/components/ChartItemSetting/GlobalSetting.vue b/src/components/ChartItemSetting/GlobalSetting.vue
new file mode 100644
index 00000000..843487a4
--- /dev/null
+++ b/src/components/ChartItemSetting/GlobalSetting.vue
@@ -0,0 +1,150 @@
+<template>
+  <div class="go-global-setting">
+    <CollapseItem name="标题">
+      <SettingItemBox name="标题">
+        <SettingItem width="200">
+          <n-color-picker v-model:value="title.textStyle.color" size="small" />
+        </SettingItem>
+      </SettingItemBox>
+      <SettingItemBox name="副标题">
+        <SettingItem width="200">
+          <n-color-picker
+            size="small"
+            v-model:value="title.subtextStyle.color"
+          />
+        </SettingItem>
+      </SettingItemBox>
+    </CollapseItem>
+
+    <CollapseItem name="X轴">
+      <SettingItemBox name="文本">
+        <SettingItem name="颜色">
+          <n-color-picker
+            size="small"
+            v-model:value="xAxis.nameTextStyle.color"
+          />
+        </SettingItem>
+      </SettingItemBox>
+      <SettingItemBox name="轴线">
+        <SettingItem name="颜色">
+          <n-color-picker
+            v-model:value="xAxis.axisLine.lineStyle.color"
+            size="small"
+          />
+        </SettingItem>
+        <SettingItem name="粗细">
+          <n-input-number
+            v-model:value="xAxis.axisLine.lineStyle.width"
+            :min="1"
+            size="small"
+          />
+        </SettingItem>
+        <SettingItem name="对齐零">
+          <n-space>
+            <n-switch v-model:value="xAxis.axisLine.onZero" size="small" />
+          </n-space>
+        </SettingItem>
+      </SettingItemBox>
+      <SettingItemBox name="分割线">
+        <SettingItem name="颜色">
+          <n-color-picker
+            v-model:value="xAxis.splitLine.lineStyle.color"
+            size="small"
+          />
+        </SettingItem>
+        <SettingItem name="粗细">
+          <n-input-number
+            v-model:value="xAxis.splitLine.lineStyle.width"
+            :min="1"
+            size="small"
+          />
+        </SettingItem>
+        <SettingItem name="类型">
+          <n-select v-model:value="xAxis.splitLine.lineStyle.type" size="small" :options="axisConf.splitLint.lineStyle.type" />
+        </SettingItem>
+      </SettingItemBox>
+    </CollapseItem>
+
+    <CollapseItem name="Y轴">
+      <SettingItemBox name="文本">
+        <SettingItem name="颜色">
+          <n-color-picker
+            size="small"
+            v-model:value="yAxis.nameTextStyle.color"
+          />
+        </SettingItem>
+      </SettingItemBox>
+      <SettingItemBox name="轴线">
+        <SettingItem name="颜色">
+          <n-color-picker
+            v-model:value="yAxis.axisLine.lineStyle.color"
+            size="small"
+          />
+        </SettingItem>
+        <SettingItem name="粗细">
+          <n-input-number
+            v-model:value="yAxis.axisLine.lineStyle.width"
+            :min="1"
+            size="small"
+          />
+        </SettingItem>
+        <SettingItem name="对齐零">
+          <n-space>
+            <n-switch v-model:value="yAxis.axisLine.onZero" size="small" />
+          </n-space>
+        </SettingItem>
+      </SettingItemBox>
+      <SettingItemBox name="分割线">
+        <SettingItem name="颜色">
+          <n-color-picker
+            v-model:value="yAxis.splitLine.lineStyle.color"
+            size="small"
+          />
+        </SettingItem>
+        <SettingItem name="粗细">
+          <n-input-number
+            v-model:value="yAxis.splitLine.lineStyle.width"
+            :min="1"
+            size="small"
+          />
+        </SettingItem>
+        <SettingItem name="类型">
+          <n-select v-model:value="yAxis.splitLine.lineStyle.type" size="small" :options="axisConf.splitLint.lineStyle.type" />
+        </SettingItem>
+      </SettingItemBox>
+    </CollapseItem>
+
+    <CollapseItem name="图例">
+      <SettingItemBox name="图例文字">
+        <SettingItem>
+          <n-color-picker size="small" v-model:value="legend.textStyle.color" />
+        </SettingItem>
+      </SettingItemBox>
+    </CollapseItem>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { toRefs, PropType } from 'vue'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
+import { axisConf } from '@/packages/chartConfiguration/echarts/index'
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem
+} from '@/components/ChartItemSetting/index'
+
+const props = defineProps({
+  data: {
+    type: Object as PropType<GlobalThemeJsonType>,
+    required: true
+  }
+})
+
+const { title, xAxis, yAxis, legend } = toRefs(props.data)
+</script>
+
+<style lang="scss" scoped>
+@include go(global-setting) {
+}
+</style>
diff --git a/src/components/ChartItemSetting/SettingItem.vue b/src/components/ChartItemSetting/SettingItem.vue
new file mode 100644
index 00000000..976d0faf
--- /dev/null
+++ b/src/components/ChartItemSetting/SettingItem.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="go-setting-item" :style="{ width: width + 'px' }">
+    <slot />
+    <n-text class="name" depth="3">{{ name }}</n-text>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  name: {
+    type: String,
+    required: false
+  },
+  width: {
+    type: Number,
+    required: false
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+@include go(setting-item) {
+  display: flex;
+  flex-direction: column;
+  min-width: 110px;
+  text-align: start;
+  margin-bottom: 5px;
+  .name {
+    margin-top: 2px;
+  }
+}
+</style>
diff --git a/src/components/ChartItemSetting/SettingItemBox.vue b/src/components/ChartItemSetting/SettingItemBox.vue
new file mode 100644
index 00000000..45cf4cae
--- /dev/null
+++ b/src/components/ChartItemSetting/SettingItemBox.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="go-config-item-box">
+    <n-text class="item-left" depth="2">{{ name }}</n-text>
+    <div class="item-right" justify="space-between">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  name: {
+    type: String,
+    required: true
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+$leftWidth: 80px;
+@include go('config-item-box') {
+  position: relative;
+  display: flex;
+  margin-top: 10px;
+  .item-left {
+    width: $leftWidth;
+    text-align: left;
+    margin-left: 10px;
+    font-size: 12px;
+  }
+  .item-right {
+    display: grid;
+    grid-column-gap: 10px;
+    grid-template-columns: 1fr 1fr;
+    width: calc(100% - #{$leftWidth});
+  }
+}
+</style>
diff --git a/src/components/ChartItemSetting/index.ts b/src/components/ChartItemSetting/index.ts
new file mode 100644
index 00000000..847867ae
--- /dev/null
+++ b/src/components/ChartItemSetting/index.ts
@@ -0,0 +1,9 @@
+// 设置项布局
+import SettingItem from './SettingItem.vue'
+import SettingItemBox from './SettingItemBox.vue'
+import CollapseItem from './CollapseItem.vue'
+
+// 全局配置属性通用模板
+import GlobalSetting from './GlobalSetting.vue'
+
+export { CollapseItem, SettingItemBox, SettingItem, GlobalSetting }
diff --git a/src/components/ConfigItemCom/ConfigItem.vue b/src/components/ConfigItemCom/ConfigItem.vue
deleted file mode 100644
index b5c44b72..00000000
--- a/src/components/ConfigItemCom/ConfigItem.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-  <div
-    v-if="type === 'number'"
-    :style="{ width: width ? width + 'px' : '100%' }"
-  >
-    <slot />
-  </div>
-  <div v-else :style="{ width: `${width}px` }">
-    <slot />
-  </div>
-</template>
-
-<script setup lang="ts">
-defineProps({
-  width: {
-    type: Number,
-    required: false
-  },
-  type: {
-    type: String,
-    required: false
-  }
-})
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/src/components/ConfigItemCom/ConfigItemBox.vue b/src/components/ConfigItemCom/ConfigItemBox.vue
deleted file mode 100644
index 4a3acfa0..00000000
--- a/src/components/ConfigItemCom/ConfigItemBox.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template>
-  <div class="go-config-item-box go-flex-items-center">
-    <n-text class="item-left">{{ name }}</n-text>
-    <n-space class="item-right" justify="space-between">
-      <slot />
-    </n-space>
-  </div>
-</template>
-
-<script setup lang="ts">
-defineProps({
-  name: {
-    type: String,
-    required: true
-  }
-})
-</script>
-
-<style lang="scss" scoped>
-$leftWidth: 100px;
-@include go('config-item-box') {
-  position: relative;
-  justify-content: flex-start;
-  .item-left {
-    width: $leftWidth;
-    text-align: left;
-    margin-left: 10px;
-  }
-  .item-right {
-    margin-left: 10px;
-  }
-}
-</style>
diff --git a/src/components/ConfigItemCom/GlobalSetting.vue b/src/components/ConfigItemCom/GlobalSetting.vue
deleted file mode 100644
index 4013c208..00000000
--- a/src/components/ConfigItemCom/GlobalSetting.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<template>
-  <div class="go-global-setting">
-    <CollapseItem name="标题">
-      <ConfigItemBox name="标题颜色">
-        <ConfigItem :width="200">
-          <n-color-picker
-            v-model:value="title.textStyle.color"
-          />
-        </ConfigItem>
-      </ConfigItemBox>
-      <ConfigItemBox name="副标题颜色">
-        <ConfigItem :width="200">
-          <n-color-picker
-            v-model:value="title.subtextStyle.color"
-          />
-        </ConfigItem>
-      </ConfigItemBox>
-    </CollapseItem>
-    <CollapseItem name="图例">
-      <ConfigItemBox name="图例文字颜色">
-        <ConfigItem :width="200">
-          <n-color-picker
-            v-model:value="legend.textStyle.color"
-          />
-        </ConfigItem>
-      </ConfigItemBox>
-    </CollapseItem>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { toRefs, PropType } from 'vue'
-import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
-import {
-  CollapseItem,
-  ConfigItemBox,
-  ConfigItem
-} from '@/components/ConfigItemCom/index'
-
-const props = defineProps({
-  data: {
-    type: Object as PropType<GlobalThemeJsonType>,
-    required: true
-  }
-})
-
-const { title, legend } = toRefs(props.data)
-</script>
-
-<style lang="scss" scoped>
-@include go(global-setting) {
-}
-</style>
diff --git a/src/components/ConfigItemCom/index.ts b/src/components/ConfigItemCom/index.ts
deleted file mode 100644
index ec9aab93..00000000
--- a/src/components/ConfigItemCom/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-// 设置项布局
-import ConfigItem from './ConfigItem.vue'
-import ConfigItemBox from './ConfigItemBox.vue'
-import CollapseItem from './CollapseItem.vue'
-
-// 全局配置属性通用模板
-import GlobalSetting from './GlobalSetting.vue'
-
-export { CollapseItem, ConfigItemBox, ConfigItem, GlobalSetting }
diff --git a/src/packages/chartConfiguration/echarts/axis.ts b/src/packages/chartConfiguration/echarts/axis.ts
new file mode 100644
index 00000000..e82ed868
--- /dev/null
+++ b/src/packages/chartConfiguration/echarts/axis.ts
@@ -0,0 +1,20 @@
+export const axisConf = {
+  splitLint: {
+    lineStyle: {
+      type: [
+        {
+          label: 'solid',
+          value: 'solid'
+        },
+        {
+          label: 'dashed',
+          value: 'dashed'
+        },
+        {
+          label: 'dotted',
+          value: 'dotted'
+        }
+      ]
+    }
+  }
+}
diff --git a/src/packages/chartConfiguration/echarts/index.ts b/src/packages/chartConfiguration/echarts/index.ts
new file mode 100644
index 00000000..d6144207
--- /dev/null
+++ b/src/packages/chartConfiguration/echarts/index.ts
@@ -0,0 +1 @@
+export * from './axis'
\ No newline at end of file
diff --git a/src/settings/chartThemes/global.theme.json b/src/settings/chartThemes/global.theme.json
index c3e11dce..ea3b6985 100644
--- a/src/settings/chartThemes/global.theme.json
+++ b/src/settings/chartThemes/global.theme.json
@@ -16,13 +16,13 @@
         "color": "#B9B8CE",
         "width": 1
       },
-      "onZero": true,
-      "onZeroAxisIndex": null
+      "onZero": true
     },
     "splitLine": {
       "lineStyle": {
         "color": "#484753",
-        "width": 1
+        "width": 1,
+        "type": "solid"
       }
     }
   },
@@ -35,13 +35,13 @@
         "color": "#B9B8CE",
         "width": 1
       },
-      "onZero": true,
-      "onZeroAxisIndex": null
+      "onZero": true
     },
     "splitLine": {
       "lineStyle": {
         "color": "#484753",
-        "width": 1
+        "width": 1,
+        "type": "solid"
       }
     }
   },
diff --git a/src/views/chart/ContentDetails/components/CanvasPage/components/ChartThemSetting/index.vue b/src/views/chart/ContentDetails/components/CanvasPage/components/ChartThemSetting/index.vue
index fe9bf8e2..720876a4 100644
--- a/src/views/chart/ContentDetails/components/CanvasPage/components/ChartThemSetting/index.vue
+++ b/src/views/chart/ContentDetails/components/CanvasPage/components/ChartThemSetting/index.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="ts">
 import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { GlobalSetting } from '@/components/ConfigItemCom/index'
+import { GlobalSetting } from '@/components/ChartItemSetting/index'
 
 const chartEditStoreStore = useChartEditStoreStore()
 const { chartThemeSetting } = chartEditStoreStore.getEditCanvasConfig