From 6f68cc58d3fe68e136860ce4590478481010e71c Mon Sep 17 00:00:00 2001
From: MTrun <1262327911@qq.com>
Date: Wed, 23 Feb 2022 15:23:09 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E6=96=B0=E5=A2=9E=E5=85=A8?=
 =?UTF-8?q?=E5=B1=80=E5=B1=9E=E6=80=A7=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ChartItemSetting/GlobalSetting.vue        | 69 ++++++++++++++++++-
 .../ChartItemSetting/SettingItemBox.vue       |  2 +-
 .../chartConfiguration/echarts/axis.ts        | 20 ++++++
 src/settings/chartThemes/global.theme.json    | 20 ++++++
 4 files changed, 108 insertions(+), 3 deletions(-)

diff --git a/src/components/ChartItemSetting/GlobalSetting.vue b/src/components/ChartItemSetting/GlobalSetting.vue
index 843487a4..0cb56945 100644
--- a/src/components/ChartItemSetting/GlobalSetting.vue
+++ b/src/components/ChartItemSetting/GlobalSetting.vue
@@ -17,7 +17,7 @@
     </CollapseItem>
 
     <CollapseItem name="X轴">
-      <SettingItemBox name="文本">
+      <SettingItemBox name="名称">
         <SettingItem name="颜色">
           <n-color-picker
             size="small"
@@ -25,6 +25,19 @@
           />
         </SettingItem>
       </SettingItemBox>
+      <SettingItemBox name="标签">
+        <SettingItem name="展示">
+          <n-space>
+            <n-switch v-model:value="xAxis.axisLabel.show" size="small" />
+          </n-space>
+        </SettingItem>
+        <SettingItem name="颜色">
+          <n-color-picker
+            size="small"
+            v-model:value="xAxis.axisLabel.color"
+          />
+        </SettingItem>
+      </SettingItemBox>
       <SettingItemBox name="轴线">
         <SettingItem name="颜色">
           <n-color-picker
@@ -45,6 +58,20 @@
           </n-space>
         </SettingItem>
       </SettingItemBox>
+      <SettingItemBox name="刻度">
+        <SettingItem name="展示">
+          <n-space>
+            <n-switch v-model:value="xAxis.axisTick.show" size="small" />
+          </n-space>
+        </SettingItem>
+        <SettingItem name="长度">
+          <n-input-number
+            v-model:value="xAxis.axisTick.length"
+            :min="1"
+            size="small"
+          />
+        </SettingItem>
+      </SettingItemBox>
       <SettingItemBox name="分割线">
         <SettingItem name="颜色">
           <n-color-picker
@@ -62,19 +89,40 @@
         <SettingItem name="类型">
           <n-select v-model:value="xAxis.splitLine.lineStyle.type" size="small" :options="axisConf.splitLint.lineStyle.type" />
         </SettingItem>
+        <SettingItem name="位置">
+          <n-select v-model:value="xAxis.position" size="small" :options="axisConf.xposition" />
+        </SettingItem>
       </SettingItemBox>
     </CollapseItem>
 
     <CollapseItem name="Y轴">
-      <SettingItemBox name="文本">
+      <SettingItemBox name="名称">
         <SettingItem name="颜色">
           <n-color-picker
             size="small"
             v-model:value="yAxis.nameTextStyle.color"
           />
         </SettingItem>
+      </SettingItemBox>
+       <SettingItemBox name="标签">
+        <SettingItem name="展示">
+          <n-space>
+            <n-switch v-model:value="yAxis.axisLabel.show" size="small" />
+          </n-space>
+        </SettingItem>
+        <SettingItem name="颜色">
+          <n-color-picker
+            size="small"
+            v-model:value="yAxis.axisLabel.color"
+          />
+        </SettingItem>
       </SettingItemBox>
       <SettingItemBox name="轴线">
+        <SettingItem name="展示">
+          <n-space>
+            <n-switch v-model:value="yAxis.axisLine.show" size="small" />
+          </n-space>
+        </SettingItem>
         <SettingItem name="颜色">
           <n-color-picker
             v-model:value="yAxis.axisLine.lineStyle.color"
@@ -94,6 +142,20 @@
           </n-space>
         </SettingItem>
       </SettingItemBox>
+      <SettingItemBox name="刻度">
+        <SettingItem name="展示">
+          <n-space>
+            <n-switch v-model:value="yAxis.axisTick.show" size="small" />
+          </n-space>
+        </SettingItem>
+        <SettingItem name="长度">
+          <n-input-number
+            v-model:value="yAxis.axisTick.length"
+            :min="1"
+            size="small"
+          />
+        </SettingItem>
+      </SettingItemBox>
       <SettingItemBox name="分割线">
         <SettingItem name="颜色">
           <n-color-picker
@@ -111,6 +173,9 @@
         <SettingItem name="类型">
           <n-select v-model:value="yAxis.splitLine.lineStyle.type" size="small" :options="axisConf.splitLint.lineStyle.type" />
         </SettingItem>
+        <SettingItem name="位置">
+          <n-select v-model:value="yAxis.position" size="small" :options="axisConf.yposition" />
+        </SettingItem>
       </SettingItemBox>
     </CollapseItem>
 
diff --git a/src/components/ChartItemSetting/SettingItemBox.vue b/src/components/ChartItemSetting/SettingItemBox.vue
index 45cf4cae..78e37672 100644
--- a/src/components/ChartItemSetting/SettingItemBox.vue
+++ b/src/components/ChartItemSetting/SettingItemBox.vue
@@ -17,7 +17,7 @@ defineProps({
 </script>
 
 <style lang="scss" scoped>
-$leftWidth: 80px;
+$leftWidth: 60px;
 @include go('config-item-box') {
   position: relative;
   display: flex;
diff --git a/src/packages/chartConfiguration/echarts/axis.ts b/src/packages/chartConfiguration/echarts/axis.ts
index e82ed868..23dc253d 100644
--- a/src/packages/chartConfiguration/echarts/axis.ts
+++ b/src/packages/chartConfiguration/echarts/axis.ts
@@ -1,4 +1,24 @@
 export const axisConf = {
+  xposition: [
+    {
+      label: 'top',
+      value: 'top'
+    },
+    {
+      label: 'bottom',
+      value: 'bottom'
+    }
+  ],
+  yposition: [
+    {
+      label: 'left',
+      value: 'left'
+    },
+    {
+      label: 'right',
+      value: 'right'
+    }
+  ],
   splitLint: {
     lineStyle: {
       type: [
diff --git a/src/settings/chartThemes/global.theme.json b/src/settings/chartThemes/global.theme.json
index ea3b6985..758b2376 100644
--- a/src/settings/chartThemes/global.theme.json
+++ b/src/settings/chartThemes/global.theme.json
@@ -11,13 +11,23 @@
     "nameTextStyle": {
       "color": "#B9B8CE"
     },
+    "axisLabel": {
+      "show": true,
+      "color": "#B9B8CE"
+    },
+    "position": "bottom",
     "axisLine": {
+      "show": true,
       "lineStyle": {
         "color": "#B9B8CE",
         "width": 1
       },
       "onZero": true
     },
+    "axisTick": {
+      "show": true,
+      "length": 5
+    },
     "splitLine": {
       "lineStyle": {
         "color": "#484753",
@@ -30,13 +40,23 @@
     "nameTextStyle": {
       "color": "#B9B8CE"
     },
+    "axisLabel": {
+      "show": true,
+      "color": "#B9B8CE"
+    },
+    "position": "left",
     "axisLine": {
+      "show": true,
       "lineStyle": {
         "color": "#B9B8CE",
         "width": 1
       },
       "onZero": true
     },
+    "axisTick": {
+      "show": true,
+      "length": 5
+    },
     "splitLine": {
       "lineStyle": {
         "color": "#484753",