Merge pull request #143 from vueblocks/develop

Develop
vueblocks · Mar 19, 2021 · b6593c3 · b6593c3
2 parents 89bbaa1 + 94179ef
commit b6593c3
Show file tree

Hide file tree

Showing 15 changed files with 876 additions and 175 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/app/data/radar.js b/app/data/radar.js
@@ -13,6 +13,21 @@ const baseData = {
   ]
 }
 
+const polarData = {
+  dimensions: [
+    { name: '销售（sales）', max: 52000 },
+    { name: '管理（Administration）', max: 52000 },
+    { name: '信息技术（Information Techology）', max: 52000 },
+    { name: '客服（Customer Support）', max: 52000 },
+    { name: '研发（Development）', max: 52000 },
+    { name: '市场（Marketing）', max: 52000 }
+  ],
+  measures: [
+    { name: '预算分配（Allocated Budget）', data: [37000, 30000, 28000, 35000, 35000, 19000] },
+    { name: '实际开销（Actual Spending）', data: [23000, 24000, 28000, 31000, 42000, 21000] }
+  ]
+}
+
 export default {
   name: '雷达图',
   type: 'radar',
@@ -35,6 +50,39 @@ export default {
         }
       }
     },
+    {
+      title: '雷达图设置 - 数据标签',
+      data: baseData,
+      settings: {
+        radius: 120,
+        splitNumber: 4,
+        shape: 'circle',
+        label: {
+          show: true,
+          color: 'auto',
+          fontFamily: 'MicroSoft YaHei',
+          fontSize: '12',
+          fontWeight: 'bold',
+          formatDigits: 0,
+          formatType: 'currency',
+          position: 'top'
+        }
+      }
+    },
+    {
+      title: '雷达图(带刻度)',
+      data: polarData,
+      xprops: {
+        tickMarkVisible: true
+      },
+      settings: {
+        radius: 120,
+        splitNumber: 4,
+        fontSize: 14,
+        color: 'rgba(64, 177, 126, 1)',
+        shape: 'circle'
+      }
+    },
     {
       title: '自定义雷达图',
       data: baseData,

diff --git a/docs/change-log.md b/docs/change-log.md
@@ -1,5 +1,22 @@
 # 更新日志
 
+## v0.9.6
+
+* **新增** 柱状图/折线图新增维度轴分隔线设置
+* **新增** 柱状图/折线图新增维度坐标名称设置
+* **新增** 折线图新增坐标轴翻转
+* **新增** 柱状图支持双纵坐标分别翻转
+* **新增** 柱状图新增坐标轴刻度标签颜色设置
+* **新增** 折线图新增坐标轴刻度标签颜色设置
+* **新增** 折线图新增坐标轴刻度标签和轴线设置显隐
+* **新增** 柱状图新增坐标轴刻度标签和轴线可设置显隐
+* **新增** 雷达图新增刻度轴/指示器/标签设置
+
+### PRS
+
+* [#142](https://github.com/vueblocks/ve-charts/pull/142) by [liweina-fans](https://github.com/liweina-fans)
+* [#139](https://github.com/vueblocks/ve-charts/pull/139) by [liweina-fans](https://github.com/liweina-fans)
+
 ## v0.9.5
 
 * **更新** 极区图新增圆角配置项

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 |
+