feat：新增全局属性配置

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>
 

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;

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: [

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",