Commit efe28dcf953e44ce00eb44cc5abedf4c97ab6d27
1 parent
6d12467b
feat(chart): add Radar Chart; !#zh: 雷达图
Showing
2 changed files
with
22 additions
and
2 deletions
front-end/h5/src/components/plugins/charts/line.js
| 1 | 1 | import VeLine from 'v-charts/lib/line.common' |
| 2 | +import VeRadar from 'v-charts/lib/radar.common' | |
| 2 | 3 | import VePie from 'v-charts/lib/pie.common' |
| 3 | 4 | import VeHistogram from 'v-charts/lib/histogram.common' |
| 4 | 5 | import VeFunnel from 'v-charts/lib/funnel.common' |
| ... | ... | @@ -9,6 +10,8 @@ import 'echarts/lib/component/markPoint' |
| 9 | 10 | import 'echarts/lib/component/markArea' |
| 10 | 11 | import Parser from '../../../utils/excel-parser' |
| 11 | 12 | |
| 13 | +// const title = str => str.slice(0, 1).toUpperCase() + str.slice(1) | |
| 14 | + | |
| 12 | 15 | export default { |
| 13 | 16 | extra: { |
| 14 | 17 | defaultStyle: { |
| ... | ... | @@ -56,12 +59,15 @@ export default { |
| 56 | 59 | const chartData = Parser.csv2VChartJson(this.dataset) |
| 57 | 60 | switch (this.type) { |
| 58 | 61 | case 'line': |
| 62 | + return <VeLine data={chartData} colors={this.colors} /> | |
| 59 | 63 | case 'histogram': |
| 60 | 64 | return <VeHistogram data={chartData} colors={this.colors} /> |
| 61 | 65 | case 'pie': |
| 62 | - return <VePie data={chartData} /> | |
| 66 | + return <VePie data={chartData} colors={this.colors} /> | |
| 63 | 67 | case 'funnel': |
| 64 | - return <VeFunnel data={chartData} /> | |
| 68 | + return <VeFunnel data={chartData} colors={this.colors} /> | |
| 69 | + case 'radar': | |
| 70 | + return <VeRadar data={chartData} colors={this.colors} /> | |
| 65 | 71 | default: |
| 66 | 72 | return null |
| 67 | 73 | } | ... | ... |
front-end/h5/src/mixins/load-plugins.js
| ... | ... | @@ -22,6 +22,20 @@ import LbpNewsList from '../components/plugins/lbp-news-list' |
| 22 | 22 | export const pluginsList = [ |
| 23 | 23 | { |
| 24 | 24 | i18nTitle: { |
| 25 | + 'en-US': 'RadarChart', | |
| 26 | + 'zh-CN': '雷达图' | |
| 27 | + }, | |
| 28 | + title: '雷达图', | |
| 29 | + icon: 'line-chart', | |
| 30 | + component: LbpLineChart, | |
| 31 | + visible: true, | |
| 32 | + name: LbpLineChart.name, | |
| 33 | + shortcutProps: { | |
| 34 | + type: 'radar' | |
| 35 | + } | |
| 36 | + }, | |
| 37 | + { | |
| 38 | + i18nTitle: { | |
| 25 | 39 | 'en-US': 'LineChart', |
| 26 | 40 | 'zh-CN': '折线图' |
| 27 | 41 | }, | ... | ... |