!80 feat: 折线图和柱状图添加网格配置，xy轴标签偏移量

Merge pull request !80 from jiangcheng/dev
2022-10-15 02:09:47 +00:00 · 2022-10-15 02:09:47 +00:00 · 9c9bc98216
commit 9c9bc98216
parent 5a981109de 362456bdea
8 changed files with 99 additions and 22 deletions
--- a/src/components/Pages/ChartItemSetting/GlobalSetting.vue
+++ b/src/components/Pages/ChartItemSetting/GlobalSetting.vue
@ -51,6 +51,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 +143,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="展示">
@ -210,6 +216,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="visualMap" name="视觉映射">
    <template #header>
      <n-switch v-model:value="visualMap.show" size="small"></n-switch>
@ -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
 })
--- 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'
--- 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'
--- 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'
--- 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
  // 图表配置项
--- 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',
--- 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,
--- a/src/settings/chartThemes/global.theme.json
+++ b/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"
  }
 }