Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

柱状图、折线图丰富坐标轴配置项 #142

Merged
merged 10 commits into from
Mar 18, 2021
Merged

柱状图、折线图丰富坐标轴配置项 #142

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
9d5418c
feat: 雷达图新增坐标轴/指示器/标签设置
Mar 11, 2021
8e9e850
feat: 柱状图新增坐标轴刻度标签和轴线可设置显隐
Mar 15, 2021
13f190f
feat: 折线图新增坐标轴刻度标签和轴线设置显隐
Mar 17, 2021
0567938
feat: 折线图新增坐标轴刻度标签颜色设置
Mar 17, 2021
f822ca6
feat: 柱状图新增坐标轴刻度标签颜色设置
Mar 17, 2021
722ff49
fix: 折线图文档
Mar 17, 2021
aae5dad
feat: 柱状图支持双纵坐标分别翻转
Mar 17, 2021
2d87fd6
feat: 折线图新增坐标轴翻转
Mar 17, 2021
3e48792
feat: 柱状图和折线图新增维度坐标名称设置
Mar 18, 2021
f103cf5
feat: 柱状图/折线图新增维度轴分隔线设置
Mar 18, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 19 additions & 1 deletion app/data/bar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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)'
}
},
{
Expand Down
27 changes: 26 additions & 1 deletion app/data/line.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
},
{
Expand Down
48 changes: 48 additions & 0 deletions app/data/radar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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,
Expand Down
55 changes: 53 additions & 2 deletions docs/chart-bar.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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)'
}
}
}
Expand Down Expand Up @@ -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 |
60 changes: 59 additions & 1 deletion docs/chart-line.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
}
}
Expand Down Expand Up @@ -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 |

Loading