From 3cb4dbb12bf6913c785836e790032c544a13dc81 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=92=8B=E6=89=BF?= <1141845963@qq.com>
Date: Fri, 14 Oct 2022 16:46:41 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9F=B1=E7=8A=B6=E5=9B=BE=E6=8A=98?=
 =?UTF-8?q?=E7=BA=BF=E5=9B=BE=E6=B7=BB=E5=8A=A0=E7=BD=91=E6=A0=BC=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Pages/ChartItemSetting/GlobalSetting.vue  | 24 +++++++++++++++++++
 .../Charts/Bars/BarCommon/config.ts           | 15 ++++++++----
 .../Charts/Bars/BarCrossrange/config.ts       |  9 ++++++-
 .../Charts/Lines/LineCommon/config.ts         | 13 +++++++---
 .../Charts/Lines/LineGradientSingle/config.ts | 22 ++++++++++-------
 .../Charts/Lines/LineGradients/config.ts      | 11 +++++++--
 .../Charts/Lines/LineLinearSingle/config.ts   | 11 +++++++--
 src/settings/chartThemes/global.theme.json    |  7 ++++++
 8 files changed, 92 insertions(+), 20 deletions(-)

diff --git a/src/components/Pages/ChartItemSetting/GlobalSetting.vue b/src/components/Pages/ChartItemSetting/GlobalSetting.vue
index f6941671..23be4316 100644
--- a/src/components/Pages/ChartItemSetting/GlobalSetting.vue
+++ b/src/components/Pages/ChartItemSetting/GlobalSetting.vue
@@ -210,6 +210,26 @@
     </setting-item-box>
   </collapse-item>
 
+  <collapse-item v-if="grid" name="网格">
+    <template #header>
+      <n-switch v-model:value="grid.show" size="small"></n-switch>
+    </template>
+    <setting-item-box name="容器距离">
+      <setting-item name="左侧距离">
+        <n-input v-model:value="grid.left" size="small"></n-input>
+      </setting-item>
+      <setting-item name="右侧距离">
+        <n-input v-model:value="grid.left" size="small"></n-input>
+      </setting-item>
+      <setting-item name="上侧距离">
+        <n-input v-model:value="grid.left" size="small"></n-input>
+      </setting-item>
+      <setting-item name="下侧距离">
+        <n-input v-model:value="grid.left" size="small"></n-input>
+      </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>
@@ -289,6 +309,10 @@ const legend = computed(() => {
   return props.optionData.legend
 })
 
+const grid = computed(() => {
+  return props.optionData.grid
+})
+
 const visualMap = computed(() => {
   return props.optionData.visualMap
 })
diff --git a/src/packages/components/Charts/Bars/BarCommon/config.ts b/src/packages/components/Charts/Bars/BarCommon/config.ts
index b9cd9513..8bf2c909 100644
--- a/src/packages/components/Charts/Bars/BarCommon/config.ts
+++ b/src/packages/components/Charts/Bars/BarCommon/config.ts
@@ -4,15 +4,15 @@ import { CreateComponentType } from '@/packages/index.d'
 import cloneDeep from 'lodash/cloneDeep'
 import dataJson from './data.json'
 
-export const includes = ['legend', 'xAxis', 'yAxis']
+export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
 export const seriesItem = {
   type: 'bar',
   barWidth: 15,
-  label:{
+  label: {
     show: true,
     position: 'top',
-    color: "#fff",
-    fontSize: 12,
+    color: '#fff',
+    fontSize: 12
   },
   itemStyle: {
     color: null,
@@ -31,6 +31,13 @@ export const option = {
   legend: {
     show: true
   },
+  grid: {
+    show: false,
+    left: '10%',
+    top: '60',
+    right: '10%',
+    bottom: '60'
+  },
   xAxis: {
     show: true,
     type: 'category'
diff --git a/src/packages/components/Charts/Bars/BarCrossrange/config.ts b/src/packages/components/Charts/Bars/BarCrossrange/config.ts
index f2a7214c..39314420 100644
--- a/src/packages/components/Charts/Bars/BarCrossrange/config.ts
+++ b/src/packages/components/Charts/Bars/BarCrossrange/config.ts
@@ -4,7 +4,7 @@ import { CreateComponentType } from '@/packages/index.d'
 import cloneDeep from 'lodash/cloneDeep'
 import dataJson from './data.json'
 
-export const includes = ['legend', 'xAxis', 'yAxis']
+export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
 export const seriesItem = {
   type: 'bar',
   barWidth: null,
@@ -31,6 +31,13 @@ export const option = {
   legend: {
     show: true
   },
+  grid: {
+    show: false,
+    left: '10%',
+    top: '60',
+    right: '10%',
+    bottom: '60'
+  },
   xAxis: {
     show: true,
     type: 'value'
diff --git a/src/packages/components/Charts/Lines/LineCommon/config.ts b/src/packages/components/Charts/Lines/LineCommon/config.ts
index 22a22ed4..b069f522 100644
--- a/src/packages/components/Charts/Lines/LineCommon/config.ts
+++ b/src/packages/components/Charts/Lines/LineCommon/config.ts
@@ -4,7 +4,7 @@ import { CreateComponentType } from '@/packages/index.d'
 import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
 import dataJson from './data.json'
 
-export const includes = ['legend', 'xAxis', 'yAxis']
+export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
 export const seriesItem = {
   type: 'line',
   label: {
@@ -13,7 +13,7 @@ export const seriesItem = {
     color: '#fff',
     fontSize: 12
   },
-  symbolSize: 5,   //设定实心点的大小
+  symbolSize: 5, //设定实心点的大小
   itemStyle: {
     color: null,
     borderRadius: 0
@@ -21,7 +21,7 @@ export const seriesItem = {
   lineStyle: {
     type: 'solid',
     width: 3,
-    color: null,
+    color: null
   }
 }
 
@@ -36,6 +36,13 @@ export const option = {
   legend: {
     show: true
   },
+  grid: {
+    show: false,
+    left: '10%',
+    top: '60',
+    right: '10%',
+    bottom: '60'
+  },
   xAxis: {
     show: true,
     type: 'category'
diff --git a/src/packages/components/Charts/Lines/LineGradientSingle/config.ts b/src/packages/components/Charts/Lines/LineGradientSingle/config.ts
index 021cdd00..534592a7 100644
--- a/src/packages/components/Charts/Lines/LineGradientSingle/config.ts
+++ b/src/packages/components/Charts/Lines/LineGradientSingle/config.ts
@@ -5,7 +5,7 @@ import { graphic } from 'echarts/core'
 import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
 import dataJson from './data.json'
 
-export const includes = ['legend', 'xAxis', 'yAxis']
+export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
 
 const options = {
   tooltip: {
@@ -18,9 +18,16 @@ const options = {
   legend: {
     show: true
   },
+  grid: {
+    show: false,
+    left: '10%',
+    top: '60',
+    right: '10%',
+    bottom: '60'
+  },
   xAxis: {
     show: true,
-    type: 'category',
+    type: 'category'
   },
   yAxis: {
     show: true,
@@ -31,12 +38,12 @@ const options = {
     {
       type: 'line',
       smooth: false,
-      symbolSize: 5,   //设定实心点的大小
-      label:{
+      symbolSize: 5, //设定实心点的大小
+      label: {
         show: true,
         position: 'top',
-        color: "#fff",
-        fontSize: 12,
+        color: '#fff',
+        fontSize: 12
       },
       lineStyle: {
         type: 'solid',
@@ -59,8 +66,7 @@ const options = {
   ]
 }
 
-export default class Config extends PublicConfigClass
-  implements CreateComponentType {
+export default class Config extends PublicConfigClass implements CreateComponentType {
   public key: string = LineGradientSingleConfig.key
   public chartConfig = LineGradientSingleConfig
   // 图表配置项
diff --git a/src/packages/components/Charts/Lines/LineGradients/config.ts b/src/packages/components/Charts/Lines/LineGradients/config.ts
index 838b841f..a3e35ccc 100644
--- a/src/packages/components/Charts/Lines/LineGradients/config.ts
+++ b/src/packages/components/Charts/Lines/LineGradients/config.ts
@@ -5,12 +5,19 @@ import { graphic } from 'echarts/core'
 import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
 import dataJson from './data.json'
 
-export const includes = ['legend', 'xAxis', 'yAxis']
+export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
 
 const option = {
   legend: {
     show: true
   },
+  grid: {
+    show: false,
+    left: '10%',
+    top: '60',
+    right: '10%',
+    bottom: '60'
+  },
   tooltip: {
     show: true,
     trigger: 'axis',
@@ -31,7 +38,7 @@ const option = {
     {
       type: 'line',
       smooth: false,
-      symbolSize: 5,   //设定实心点的大小
+      symbolSize: 5, //设定实心点的大小
       label: {
         show: true,
         position: 'top',
diff --git a/src/packages/components/Charts/Lines/LineLinearSingle/config.ts b/src/packages/components/Charts/Lines/LineLinearSingle/config.ts
index 4a5be6c4..efe0d0ca 100644
--- a/src/packages/components/Charts/Lines/LineLinearSingle/config.ts
+++ b/src/packages/components/Charts/Lines/LineLinearSingle/config.ts
@@ -4,7 +4,7 @@ import { CreateComponentType } from '@/packages/index.d'
 import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
 import dataJson from './data.json'
 
-export const includes = ['legend', 'xAxis', 'yAxis']
+export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
 
 export const option = {
   tooltip: {
@@ -17,6 +17,13 @@ export const option = {
   legend: {
     show: true
   },
+  grid: {
+    show: false,
+    left: '10%',
+    top: '60',
+    right: '10%',
+    bottom: '60'
+  },
   xAxis: {
     show: true,
     type: 'category'
@@ -29,7 +36,7 @@ export const option = {
   series: [
     {
       type: 'line',
-      symbolSize: 5,   //设定实心点的大小
+      symbolSize: 5, //设定实心点的大小
       lineStyle: {
         type: 'solid',
         width: 3,
diff --git a/src/settings/chartThemes/global.theme.json b/src/settings/chartThemes/global.theme.json
index 9991b72f..491b3e4a 100644
--- a/src/settings/chartThemes/global.theme.json
+++ b/src/settings/chartThemes/global.theme.json
@@ -88,5 +88,12 @@
     "textStyle": {
       "color": "#B9B8CE"
     }
+  },
+  "grid": {
+    "show": false,
+    "left": "10%",
+    "top": "60",
+    "right": "10%",
+    "bottom": "60"
   }
 }
\ No newline at end of file