feat: 柱状图/折线图新增维度轴分隔线设置

vueblocks · Mar 18, 2021 · f103cf5 · f103cf5
1 parent 3e48792
commit f103cf5
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 4 deletions.
diff --git a/docs/chart-bar.md b/docs/chart-bar.md
@@ -710,4 +710,5 @@
 | yAxisLineShow | 纵坐标轴轴线显隐| Boolean/Array | `true`/`false`| 默认 `true` |
 | xAxisLabelShow | 横坐标轴刻度标签显隐| Boolean | `true`/`false`| 默认 `true` |
 | xAxisLabelColor | 横坐标轴刻度标签文字颜色| String | - | 默认 null |
-| xAxisLineShow | 横坐标轴轴线显隐| Boolean | `true`/`false`| 默认 `true` |
+| xAxisLineShow | 横坐标轴轴线显隐| Boolean | `true`/`false`| 默认 `true` |
+| xAxisSplitLine | 坐标轴分隔线| Object | - | 默认不显示 | https://echarts.apache.org/zh/option.html#xAxis.splitLine |
diff --git a/docs/chart-line.md b/docs/chart-line.md
@@ -449,4 +449,5 @@
 | xAxisLineShow | 横坐标轴轴线显隐| Boolean | `true`/`false`| 默认 `true` |
 | xAxisInverse | X轴方向反向| Boolean | `true`/`false` | 默认 `false`  参见[文档](https://www.echartsjs.com/zh/option.html#xAxis.inverse) |
 | yAxisInverse | Y轴方向反向| Boolean | `true`/`false` | 默认 `false`   参见[文档](https://www.echartsjs.com/zh/option.html#yAxis.inverse) |
+| xAxisSplitLine | 坐标轴分隔线| Object | - | 默认不显示 | https://echarts.apache.org/zh/option.html#xAxis.splitLine |
 
diff --git a/src/packages/bar/chart.js b/src/packages/bar/chart.js
@@ -48,7 +48,7 @@ class BarChart extends BaseChart {
 
   // build dimension Axis
   static getBarDimAxis (settings) {
-    const { dimAxisType, dimAxisLineShow, dimAxisLabelShow, dimAxisLabelColor, xAxisName } = settings
+    const { dimAxisType, dimAxisLineShow, dimAxisLabelShow, dimAxisLabelColor, xAxisName, xAxisSplitLine } = settings
 
     const axisItem = {
       type: dimAxisType,
@@ -69,6 +69,10 @@ class BarChart extends BaseChart {
       axisItem.name = xAxisName
     }
 
+    if (xAxisSplitLine) {
+      axisItem.splitLine = xAxisSplitLine
+    }
+
     const disAxis = []
     disAxis.push(axisItem)
     return disAxis

diff --git a/src/packages/line/chart.js b/src/packages/line/chart.js
@@ -25,7 +25,7 @@ class LineChart extends BaseChart {
   }
 
   static getLineDimAxis ({ settings }) {
-    const { yAxisType, xAxisLabelShow = true, xAxisLineShow = true, xAxisLabelColor, xAxisInverse = false, xAxisName } = settings
+    const { yAxisType, xAxisLabelShow = true, xAxisLineShow = true, xAxisLabelColor, xAxisInverse = false, xAxisName, xAxisSplitLine } = settings
     const type = yAxisType || 'category'
     return {
       type,
@@ -43,7 +43,8 @@ class LineChart extends BaseChart {
         color: xAxisLabelColor || null
       },
       inverse: xAxisInverse,
-      name: xAxisName !== undefined ? xAxisName : null
+      name: xAxisName !== undefined ? xAxisName : null,
+      splitLine: xAxisSplitLine !== undefined ? xAxisSplitLine : null
     }
   }