Merge branch 'dev' into dev-commet

src/components/Pages/ChartItemSetting/GlobalSetting.vue

@@ -21,6 +21,23 @@
     </setting-item-box>
   </collapse-item>
 
+  <collapse-item v-if="grid" name="容器">
+    <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.right" size="small"></n-input>
+      </setting-item>
+      <setting-item name="上侧距离">
+        <n-input v-model:value="grid.top" size="small"></n-input>
+      </setting-item>
+      <setting-item name="下侧距离">
+        <n-input v-model:value="grid.bottom" size="small"></n-input>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+
   <collapse-item v-if="xAxis" name="X轴">
     <template #header>
       <n-switch v-model:value="xAxis.show" size="small"></n-switch>
@@ -51,6 +68,9 @@
       <setting-item name="大小">
         <n-input-number v-model:value="xAxis.axisLabel.fontSize" :min="8" size="small"></n-input-number>
       </setting-item>
+      <setting-item name="偏移量">
+        <n-input-number v-model:value="xAxis.axisLabel.rotate" :min="-90" :max="90" size="small"></n-input-number>
+      </setting-item>
     </setting-item-box>
     <setting-item-box name="轴线">
       <setting-item name="展示">
@@ -140,6 +160,9 @@
       <setting-item name="大小">
         <n-input-number v-model:value="yAxis.axisLabel.fontSize" :min="8" size="small"></n-input-number>
       </setting-item>
+      <setting-item name="偏移量">
+        <n-input-number v-model:value="yAxis.axisLabel.rotate" :min="-90" :max="90" size="small"></n-input-number>
+      </setting-item>
     </setting-item-box>
     <setting-item-box name="轴线">
       <setting-item name="展示">
@@ -289,6 +312,10 @@ const legend = computed(() => {
   return props.optionData.legend
 })
 
+const grid = computed(() => {
+  return props.optionData.grid
+})
+
 const visualMap = computed(() => {
   return props.optionData.visualMap
 })

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",
+    color: '#fff',
-    fontSize: 12,
+    fontSize: 12
   },
   itemStyle: {
     color: null,
@@ -28,10 +28,7 @@ export const option = {
       type: 'shadow'
     }
   },
-  legend: {
+xAxis: {
-    show: true
-  },
-  xAxis: {
     show: true,
     type: 'category'
   },

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,
@@ -28,9 +28,6 @@ export const option = {
       type: 'shadow'
     }
   },
-  legend: {
-    show: true
-  },
   xAxis: {
     show: true,
     type: 'value'

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
   }
 }
 
@@ -33,9 +33,6 @@ export const option = {
       type: 'line'
     }
   },
-  legend: {
-    show: true
-  },
   xAxis: {
     show: true,
     type: 'category'

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: {
@@ -15,12 +15,9 @@ const options = {
       type: 'line'
     }
   },
-  legend: {
-    show: true
-  },
   xAxis: {
     show: true,
-    type: 'category',
+    type: 'category'
   },
   yAxis: {
     show: true,
@@ -31,12 +28,12 @@ const options = {
     {
       type: 'line',
       smooth: false,
-      symbolSize: 5,   //设定实心点的大小
+      symbolSize: 5, //设定实心点的大小
-      label:{
+      label: {
         show: true,
         position: 'top',
-        color: "#fff",
+        color: '#fff',
-        fontSize: 12,
+        fontSize: 12
       },
       lineStyle: {
         type: 'solid',
@@ -59,8 +56,7 @@ const options = {
   ]
 }
 
-export default class Config extends PublicConfigClass
+export default class Config extends PublicConfigClass implements CreateComponentType {
-  implements CreateComponentType {
   public key: string = LineGradientSingleConfig.key
   public chartConfig = LineGradientSingleConfig
   // 图表配置项

src/packages/components/Charts/Lines/LineGradients/config.ts

@@ -5,12 +5,9 @@ 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
-  },
   tooltip: {
     show: true,
     trigger: 'axis',
@@ -31,7 +28,7 @@ const option = {
     {
       type: 'line',
       smooth: false,
-      symbolSize: 5,   //设定实心点的大小
+      symbolSize: 5, //设定实心点的大小
       label: {
         show: true,
         position: 'top',

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: {
@@ -14,9 +14,6 @@ export const option = {
       type: 'line'
     }
   },
-  legend: {
-    show: true
-  },
   xAxis: {
     show: true,
     type: 'category'
@@ -29,7 +26,7 @@ export const option = {
   series: [
     {
       type: 'line',
-      symbolSize: 5,   //设定实心点的大小
+      symbolSize: 5, //设定实心点的大小
       lineStyle: {
         type: 'solid',
         width: 3,

src/packages/components/Charts/Mores/Heatmap/config.ts

@@ -4,7 +4,7 @@ import { CreateComponentType } from '@/packages/index.d'
 import { cloneDeep } from 'lodash'
 import dataJson from './data.json'
 
-export const includes = ['xAxis', 'yAxis']
+export const includes = ['xAxis', 'yAxis', 'grid']
 
 export const option = {
   dataset: { ...dataJson },

src/packages/components/Charts/Scatters/ScatterCommon/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: 'scatter',

src/packages/components/Charts/Scatters/ScatterLogarithmicRegression/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 option = {
   dataset: dataJson,

src/settings/chartThemes/global.theme.json

@@ -22,7 +22,8 @@
     "axisLabel": {
       "show": true,
       "fontSize": 12,
-      "color": "#B9B8CE"
+      "color": "#B9B8CE",
+      "rotate": 0
     },
     "position": "bottom",
     "axisLine": {
@@ -58,7 +59,8 @@
     "axisLabel": {
       "show": true,
       "fontSize": 12,
-      "color": "#B9B8CE"
+      "color": "#B9B8CE",
+      "rotate": 0
     },
     "position": "left",
     "axisLine": {
@@ -88,5 +90,12 @@
     "textStyle": {
       "color": "#B9B8CE"
     }
+  },
+  "grid": {
+    "show": false,
+    "left": "10%",
+    "top": "60",
+    "right": "10%",
+    "bottom": "60"
   }
 }

src/views/chart/hooks/useSync.hook.ts

@@ -18,7 +18,7 @@ const componentMerge = (object: any, sources: any, notComponent = false) => {
   if (notComponent) return merge(object, sources)
   // 组件排除 options
   const option = sources.option
-  if(!option) return merge(object, sources)
+  if (!option) return merge(object, sources)
 
   // 为 undefined 的 sources 来源对象属性将被跳过详见 https://www.lodashjs.com/docs/lodash.merge
   sources.option = undefined
@@ -66,37 +66,38 @@ export const useSync = () => {
         intComponent(e as CreateComponentType)
       }
     })
+
+    // 创建函数-重新创建是为了处理类种方法消失的问题
+    const create = async (
+      _componentInstance: CreateComponentType,
+      callBack?: (componentInstance: CreateComponentType) => void
+    ) => {
+      // 补充 class 上的方法
+      let newComponent: CreateComponentType = await createComponent(_componentInstance.chartConfig)
+      if (callBack) {
+        if (changeId) {
+          callBack(componentMerge(newComponent, { ..._componentInstance, id: getUUID() }))
+        } else {
+          callBack(componentMerge(newComponent, _componentInstance))
+        }
+      } else {
+        if (changeId) {
+          chartEditStore.addComponentList(
+            componentMerge(newComponent, { ..._componentInstance, id: getUUID() }),
+            false,
+            true
+          )
+        } else {
+          chartEditStore.addComponentList(componentMerge(newComponent, _componentInstance), false, true)
+        }
+      }
+    }
+
     // 数据赋值
     for (const key in projectData) {
       // 组件
       if (key === ChartEditStoreEnum.COMPONENT_LIST) {
         for (const comItem of projectData[key]) {
-          // 重新创建是为了处理类种方法消失的问题
-          const create = async (
-            _componentInstance: CreateComponentType,
-            callBack?: (componentInstance: CreateComponentType) => void
-          ) => {
-            // 补充 class 上的方法
-            let newComponent: CreateComponentType = await createComponent(_componentInstance.chartConfig)
-            if (callBack) {
-              if (changeId) {
-                callBack(componentMerge(newComponent, { ..._componentInstance, id: getUUID() }))
-              } else {
-                callBack(componentMerge(newComponent, _componentInstance))
-              }
-            } else {
-              if (changeId) {
-                chartEditStore.addComponentList(
-                  componentMerge(newComponent, { ..._componentInstance, id: getUUID() }),
-                  false,
-                  true
-                )
-              } else {
-                chartEditStore.addComponentList(componentMerge(newComponent, _componentInstance), false, true)
-              }
-            }
-          }
-
           if (comItem.isGroup) {
             // 创建分组
             let groupClass = new PublicGroupConfigClass()
@@ -106,19 +107,19 @@ export const useSync = () => {
               groupClass = componentMerge(groupClass, comItem)
             }
 
-            // 注册子应用
+            // 异步注册子应用
             const targetList: CreateComponentType[] = []
-            ;(comItem as CreateComponentGroupType).groupList.forEach(groupItem => {
+            for (const groupItem of (comItem as CreateComponentGroupType).groupList) {
-              create(groupItem, e => {
+              await create(groupItem, e => {
                 targetList.push(e)
               })
-            })
+            }
             groupClass.groupList = targetList
 
             // 分组插入到列表
             chartEditStore.addComponentList(groupClass, false, true)
           } else {
-            create(comItem as CreateComponentType)
+            await  create(comItem as CreateComponentType)
           }
         }
       } else {