Merge pull request #142 from liweina-fans/feat-axis

柱状图、折线图丰富坐标轴配置项
vueblocks · Mar 18, 2021 · 0310750 · 0310750
2 parents c4c8d69 + f103cf5
commit 0310750
Show file tree

Hide file tree

Showing 6 changed files with 222 additions and 17 deletions.
diff --git a/app/data/bar.js b/app/data/bar.js
@@ -179,6 +179,22 @@ export default {
         direction: 'row'
       }
     },
+    {
+      title: '设置坐标轴刻度标签和轴线显隐',
+      data: groupData,
+      settings: {
+        direction: 'row',
+        label: {
+          show: true,
+          fontSize: '12',
+          fontWeight: 'bold'
+        },
+        xAxisLabelShow: false,
+        xAxisLineShow: false,
+        yAxisLabelShow: true,
+        yAxisLineShow: false
+      }
+    },
     {
       title: '堆叠条形图',
       data: groupData,
@@ -194,7 +210,9 @@ export default {
       data: mixinData,
       settings: {
         secondMeaAxis: 'Vue',
-        yAxisLabelType: ['en', 'zh']
+        yAxisLabelType: ['en', 'zh'],
+        yAxisLabelColor: ['rgba(209, 10, 220, 1)', 'rgba(247, 14, 6, 1)'],
+        xAxisLabelColor: 'rgba(14, 33, 237, 1)'
       }
     },
     {

diff --git a/app/data/line.js b/app/data/line.js
@@ -160,7 +160,32 @@ export default {
           fontSize: '12',
           fontWeight: 'bold'
         },
-        smooth: true
+        smooth: true,
+        yAxisLabelColor: 'rgba(209, 10, 220, 1)',
+        xAxisLabelColor: 'rgba(14, 33, 237, 1)'
+      }
+    },
+    {
+      title: '折线图设置 - 刻度标签、轴线显隐',
+      data: baseData,
+      settings: {
+        label: {
+          show: true,
+          fontSize: '12',
+          fontWeight: 'bold'
+        },
+        smooth: true,
+        yAxisLabelShow: false,
+        yAxisLineShow: false
+      }
+    },
+    {
+      title: '折线图设置 - 坐标轴翻转',
+      data: simpleData,
+      settings: {
+        smooth: true,
+        xAxisInverse: true,
+        yAxisInverse: false
       }
     },
     {

diff --git a/docs/chart-bar.md b/docs/chart-bar.md
@@ -214,6 +214,47 @@
   }
 </script>
 
+## 设置坐标轴刻度标签和轴线显隐
+
+<vuep template="#setAxisBar" :options="{ theme: 'vue', lineNumbers: false }"></vuep>
+
+<script v-pre type="text/x-template" id="setAxisBar" />
+<template>
+  <ve-bar-chart :data="chartData" :settings="chartSettings" />
+</template>
+
+<script>
+ module.exports = {
+    created () {
+      this.chartData = {
+        dimensions: {
+          name: '渠道',
+          data: ['APP', 'PC', 'M端', '微信', '手Q', '小程序'].reverse()
+        },
+        measures: [{
+          name: 'PV',
+          data: [36000, 28000, 24000, 20000, 12000, 6000].reverse()
+        }, {
+          name: 'UV',
+          data: [28000, 22000, 18000, 14000, 8000, 2000].reverse()
+        }]
+      }
+      this.chartSettings = {
+        direction: 'row',
+        label: {
+          show: true,
+          fontSize: '12',
+          fontWeight: 'bold'
+        },
+        xAxisLabelShow: false,
+        xAxisLineShow: false,
+        yAxisLabelShow: true,
+        yAxisLineShow: false
+      }
+    }
+  }
+</script>
+
 ## 对比条形图
 
 <vuep template="#rowGroupBarCop" :options="{ theme: 'vue', lineNumbers: false }"></vuep>
@@ -409,7 +450,9 @@
         }]
       }
       this.chartSettings = {
-        secondMeaAxis: 'Vue'
+        secondMeaAxis: 'Vue',
+        yAxisLabelColor: ['rgba(209, 10, 220, 1)', 'rgba(247, 14, 6, 1)'],
+        xAxisLabelColor: 'rgba(14, 33, 237, 1)'
       }
     }
   }
@@ -658,6 +701,14 @@
 | yAxisMin | 坐标轴刻度最小值 | Array | - | 参见[文档](https://www.echartsjs.com/option.html#yAxis.min) |
 | yAxisScale | 是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度 | Boolean | - | 参见[文档](https://www.echartsjs.com/option.html#yAxis.scale)  |
 | yAxisName | 坐标轴名称 | Array | - | 参见[文档](https://www.echartsjs.com/option.html#yAxis.name)  |
+| xAxisName | 坐标轴名称 | String | - | 参见[文档](https://echarts.apache.org/zh/option.html#xAxis.name)  |
 | percentage | 是否是百分比堆叠柱状图，通常结合 `yAxisLabelType` 一起使用 | Boolean | `true`/`false` | 默认 `false`  |
 | 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) |
+| yAxisInverse | Y轴方向反向| Boolean/Array | `true`/`false` | 默认 `false`   参见[文档](https://www.echartsjs.com/zh/option.html#yAxis.inverse) |
+| yAxisLabelShow | 纵坐标轴刻度标签显隐| Boolean/Array | `true`/`false`| 默认 `true` |
+| yAxisLabelColor | 横坐标轴刻度标签文字颜色| String | - | 默认 null |
+| yAxisLineShow | 纵坐标轴轴线显隐| Boolean/Array | `true`/`false`| 默认 `true` |
+| xAxisLabelShow | 横坐标轴刻度标签显隐| Boolean | `true`/`false`| 默认 `true` |
+| xAxisLabelColor | 横坐标轴刻度标签文字颜色| String | - | 默认 null |
+| 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
@@ -268,7 +268,54 @@
           fontSize: '12',
           fontWeight: 'bold'
         },
-        smooth: true
+        smooth: true,
+        yAxisLabelColor: 'rgba(209, 10, 220, 1)',
+        xAxisLabelColor: 'rgba(14, 33, 237, 1)'
+      }
+    }
+  }
+</script>
+
+## 折线图设置 - 刻度标签、轴线显隐
+
+<vuep template="#axisShow" :options="{ theme: 'vue', lineNumbers: false }"></vuep>
+
+<script v-pre type="text/x-template" id="axisShow">
+<template>
+  <ve-line-chart :data="chartData" :settings="chartSettings" />
+</template>
+
+<script>
+  module.exports = {
+    created () {
+      this.chartData = {
+        dimensions: {
+          name: 'Week',
+          data: ['Mon.', 'Tue.', 'Wed.', 'Thu.', 'Fir.', 'Sat.', 'Sun.']
+        },
+        measures: [{
+          name: 'Vue',
+          data: [3000, 3500, 3900, 3100, 3200, 3100, 3600, 3300, 3600, 3400, 3100, 3000]
+        },
+        {
+          name: 'React',
+          data: [2000, 2000, 2600, 2300, 2300, 2000, 2600, 2200, 2500, 2800, 2500, 2200]
+        },
+        {
+          name: 'Angular',
+          data: [827, 949, 1400, 1000, 884, 911, 983, 989, 925, 1100, 1200, 930]
+        }]
+      }
+      this.chartSettings = {
+        label: {
+          show: true,
+          fontSize: '12',
+          fontWeight: 'bold'
+        },
+        smooth: true,
+        yAxisLabelShow: false,
+        yAxisLineShow: false,
+        xAxisLineShow: false
       }
     }
   }
@@ -390,6 +437,17 @@
 | yAxisMin | 坐标轴刻度最小值 | Number | - | 参见[文档](https://www.echartsjs.com/option.html#yAxis.min) |
 | yAxisScale | 是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度 | Boolean | - | 参见[文档](https://www.echartsjs.com/option.html#yAxis.scale)  |
 | yAxisName | 坐标轴名称 | String | - | 参见[文档](https://www.echartsjs.com/option.html#yAxis.name)  |
+| xAxisName | 坐标轴名称 | String | - | 参见[文档](https://echarts.apache.org/zh/option.html#xAxis.name)  |
 | percentage | 是否是百分比堆叠面积图，通常结合 `yAxisLabelType` 一起使用 | Boolean | `true`/`false` | 默认 `false`  |
 | tooltipOptions | 配置tooltip提示框组件 | Object | - | 参见[文档](https://echarts.apache.org/zh/option.html#tooltip)  |
 | legendOptions | 配置图例组件 | Object | - | 参见[文档](https://echarts.apache.org/zh/option.html#legend)  |
+| yAxisLabelShow | 纵坐标轴刻度标签显隐| Boolean | `true`/`false`| 默认 `true` |
+| yAxisLabelColor | 纵坐标轴刻度标签文字颜色| String | - | 默认 null |
+| yAxisLineShow | 纵坐标轴轴线显隐| Boolean | `true`/`false`| 默认 `true` |
+| xAxisLabelShow | 横坐标轴刻度标签显隐| Boolean | `true`/`false`| 默认 `true` |
+| xAxisLabelColor | 横坐标轴刻度标签文字颜色| String | - | 默认 null |
+| 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,18 +48,31 @@ class BarChart extends BaseChart {
 
   // build dimension Axis
   static getBarDimAxis (settings) {
-    const { dimAxisType } = settings
+    const { dimAxisType, dimAxisLineShow, dimAxisLabelShow, dimAxisLabelColor, xAxisName, xAxisSplitLine } = settings
 
     const axisItem = {
       type: dimAxisType,
+      axisLine: {
+        show: Array.isArray(dimAxisLineShow) ? dimAxisLineShow[0] : dimAxisLineShow
+      },
       axisTick: {
         show: false
       },
       axisLabel: {
+        show: Array.isArray(dimAxisLabelShow) ? dimAxisLabelShow[0] : dimAxisLabelShow,
         margin: 10,
-        fontWeight: 400
+        fontWeight: 400,
+        color: Array.isArray(dimAxisLabelColor) ? dimAxisLabelColor[0] : dimAxisLabelColor
       }
     }
+    if (xAxisName) {
+      axisItem.name = xAxisName
+    }
+
+    if (xAxisSplitLine) {
+      axisItem.splitLine = xAxisSplitLine
+    }
+
     const disAxis = []
     disAxis.push(axisItem)
     return disAxis
@@ -70,6 +83,9 @@ class BarChart extends BaseChart {
     const {
       meaAxisType,
       meaAxisDigits,
+      meaAxisLineShow,
+      meaAxisLabelShow,
+      meaAxisLabelColor,
       yAxisScale = false,
       percentage = false,
       yAxisName,
@@ -91,8 +107,10 @@ class BarChart extends BaseChart {
     const meaAxis = []
     meaAxisType.forEach((type, i) => {
       const axisLabel = {
+        show: Array.isArray(meaAxisLabelShow) ? meaAxisLabelShow[i] : meaAxisLabelShow,
         margin: 10,
-        fontWeight: 400
+        fontWeight: 400,
+        color: Array.isArray(meaAxisLabelColor) ? meaAxisLabelColor[i] : meaAxisLabelColor
       }
       if (type !== 'normal') {
         // Y轴标签格式化后保留几位小数兼容之前版本类型
@@ -103,9 +121,14 @@ class BarChart extends BaseChart {
           axisLabel.formatter = value => formatMeasure(type, value, meaAxisDigits)
         }
       }
+      const axisLine = {
+        show: Array.isArray(meaAxisLineShow) ? meaAxisLineShow[i] : meaAxisLineShow
+      }
+
       const axisItem = {
         ...meaAxisBase,
-        axisLabel
+        axisLabel,
+        axisLine
       }
       if (yAxisName && yAxisName.length) {
         axisItem['name'] = yAxisName[i]
@@ -204,9 +227,15 @@ class BarChart extends BaseChart {
       yAxisLabelType,
       yAxisLabelDigits = 0,
       yAxisName,
+      yAxisLabelShow = [true, true],
+      yAxisLineShow = [true, true],
+      yAxisLabelColor = [null, null],
       xAxisLabelType,
       xAxisLabelDigits = 0,
-      xAxisName
+      xAxisName,
+      xAxisLabelShow = true,
+      xAxisLineShow = true,
+      xAxisLabelColor = null
     } = settings
 
     // 默认柱状图
@@ -218,9 +247,15 @@ class BarChart extends BaseChart {
     settings.meaAxisType = (isBar ? xAxisLabelType : yAxisLabelType) || defaultMeaAxisType
     settings.meaAxisDigits = isBar ? xAxisLabelDigits : yAxisLabelDigits
     settings.meaAxisName = (isBar ? xAxisName : yAxisName) || []
+    settings.meaAxisLabelShow = (isBar ? xAxisLabelShow : yAxisLabelShow)
+    settings.meaAxisLineShow = (isBar ? xAxisLineShow : yAxisLineShow)
+    settings.meaAxisLabelColor = (isBar ? xAxisLabelColor : yAxisLabelColor)
     settings.dimAxisType = (isBar ? yAxisLabelType : xAxisLabelType) || 'category'
     settings.dimAxisDigits = isBar ? yAxisLabelDigits : xAxisLabelDigits
     settings.dimAxisName = (isBar ? yAxisName : xAxisName) || ''
+    settings.dimAxisLabelShow = (isBar ? yAxisLabelShow : xAxisLabelShow)
+    settings.dimAxisLineShow = (isBar ? yAxisLineShow : xAxisLineShow)
+    settings.dimAxisLabelColor = (isBar ? yAxisLabelColor : xAxisLabelColor)
 
     // 如果设置了双Y轴，将双Y轴统一设置 meaAxisType
     if (defaultMeaAxisType.length > settings.meaAxisType.length) {
@@ -244,7 +279,7 @@ class BarChart extends BaseChart {
 
     // 处理X轴和Y轴翻转
     const { yAxisInverse, xAxisInverse } = settings
-    if (yAxisInverse !== undefined) yAxis.forEach(i => { i.inverse = yAxisInverse })
+    if (yAxisInverse !== undefined) yAxis.forEach((i, index) => { i.inverse = Array.isArray(yAxisInverse) ? yAxisInverse[index] : yAxisInverse })
     if (xAxisInverse !== undefined) xAxis.forEach(i => { i.inverse = xAxisInverse })
 
     // build echarts options