Merge pull request #113 from vueblocks/develop

feat: 新增X轴和Y轴反向属性

Author: xiaoluoboding

app/data/bar.js

@@ -162,12 +162,14 @@ export default {
       }
     },
     {
-      title: '条形图',
+      title: '条形图-X轴Y轴翻转',
       data: simpleData,
       settings: {
         direction: 'row',
         xAxisLabelType: ['zh'],
-        xAxisLabelDigits: 0
+        xAxisLabelDigits: 0,
+        yAxisInverse: true,
+        xAxisInverse: true
       }
     },
     {

docs/chart-bar.md

@@ -658,3 +658,5 @@
 | yAxisScale | 是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度 | Boolean | - | 参见[文档](https://www.echartsjs.com/option.html#yAxis.scale)  |
 | yAxisName | 坐标轴名称 | Array | - | 参见[文档](https://www.echartsjs.com/option.html#yAxis.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) |

src/packages/bar/chart.js

@@ -209,6 +209,7 @@ class BarChart extends BaseChart {
     } = settings
 
     // 默认柱状图
+    // TODO 此处注意值与命名语义相反，true代表是条形图，false是柱图
     const isBar = direction !== 'column' && direction === 'row'
 
     const defaultMeaAxisType = secondMeaAxis !== null ? ['normal', 'normal'] : ['normal']
@@ -240,6 +241,11 @@ class BarChart extends BaseChart {
 
     const series = BarChart.getBarSeries(data, settings, isBar)
 
+    // 处理X轴和Y轴翻转
+    const { yAxisInverse, xAxisInverse } = settings
+    if (yAxisInverse !== undefined) yAxis.forEach(i => { i.inverse = yAxisInverse })
+    if (xAxisInverse !== undefined) xAxis.forEach(i => { i.inverse = xAxisInverse })
+
     // build echarts options
     const options = {
       grid,
@@ -251,7 +257,7 @@ class BarChart extends BaseChart {
       series
     }
 
-    console.log(options)
+    // console.log(options)
 
     return options
   }