From 708e2098abc896b38828df850d6df331ff1b7a74 Mon Sep 17 00:00:00 2001 From: junjie Date: Mon, 8 Nov 2021 17:57:38 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E8=A7=86=E5=9B=BE=E6=A0=B9=E6=8D=AE?= =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E7=B1=BB=E5=9E=8B=E5=88=86=E7=B1=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/lang/en.js | 14 +- frontend/src/lang/tw.js | 14 +- frontend/src/lang/zh.js | 14 +- frontend/src/views/chart/group/Group.vue | 209 +++---- frontend/src/views/chart/view/ChartEdit.vue | 142 +++-- frontend/src/views/chart/view/ChartType.vue | 643 +++++++++++++------- 6 files changed, 671 insertions(+), 365 deletions(-) diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js index 406d7f9ac2..b2bda6876f 100644 --- a/frontend/src/lang/en.js +++ b/frontend/src/lang/en.js @@ -957,7 +957,19 @@ export default { chart_word_cloud: 'Word Cloud', drag_block_word_cloud_label: 'Word Label', drag_block_word_cloud_size: 'Word Size', - splitCount_less_100: 'Split Count Range 0-100' + splitCount_less_100: 'Split Count Range 0-100', + change_chart_type: 'Change Type', + chart_type_table: 'Table', + chart_type_quota: 'Quota', + chart_type_trend: 'Trend', + chart_type_compare: 'Compare', + chart_type_distribute: 'Distribute', + chart_type_relation: 'Relation', + chart_type_space: 'Space', + preview: 'Preview', + next: 'Next', + select_dataset: 'Select Dataset', + select_chart_type: 'Select Chart Type' }, dataset: { sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default', diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js index 6a4c6f15f6..b09d94b92f 100644 --- a/frontend/src/lang/tw.js +++ b/frontend/src/lang/tw.js @@ -958,7 +958,19 @@ export default { chart_word_cloud: '詞雲', drag_block_word_cloud_label: '詞標簽', drag_block_word_cloud_size: '詞大小', - splitCount_less_100: '刻度數範圍0-100' + splitCount_less_100: '刻度數範圍0-100', + change_chart_type: '更改類型', + chart_type_table: '表格', + chart_type_quota: '指標', + chart_type_trend: '趨勢', + chart_type_compare: '比較', + chart_type_distribute: '分布', + chart_type_relation: '關系', + chart_type_space: '空間位置', + preview: '上一步', + next: '下一步', + select_dataset: '選擇數據集', + select_chart_type: '選擇圖表類型' }, dataset: { sheet_warn: '有多個 Sheet 頁，默認抽取第一個', diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js index 852a800810..684515a3b6 100644 --- a/frontend/src/lang/zh.js +++ b/frontend/src/lang/zh.js @@ -961,7 +961,19 @@ export default { chart_word_cloud: '词云', drag_block_word_cloud_label: '词标签', drag_block_word_cloud_size: '词大小', - splitCount_less_100: '刻度数范围0-100' + splitCount_less_100: '刻度数范围0-100', + change_chart_type: '更改类型', + chart_type_table: '表格', + chart_type_quota: '指标', + chart_type_trend: '趋势', + chart_type_compare: '比较', + chart_type_distribute: '分布', + chart_type_relation: '关系', + chart_type_space: '空间位置', + preview: '上一步', + next: '下一步', + select_dataset: '选择数据集', + select_chart_type: '选择图表类型' }, dataset: { sheet_warn: '有多个 Sheet 页，默认抽取第一个', diff --git a/frontend/src/views/chart/group/Group.vue b/frontend/src/views/chart/group/Group.vue index 6a8645ba27..302ecef8e8 100644 --- a/frontend/src/views/chart/group/Group.vue +++ b/frontend/src/views/chart/group/Group.vue @@ -137,112 +137,6 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -263,7 +157,7 @@ :title="$t('chart.add_chart')" :visible="selectTableFlag" :show-close="false" - width="70%" + width="1000px" class="dialog-css" > @@ -285,10 +179,49 @@ - + + + + + + + + + + + {{ $t('chart.chart_type') }} + + + + + + + +
+ + + +
+ + + + + + +
{{ $t('chart.cancel') }} - {{ $t('chart.confirm') }} + {{ $t('chart.preview') }} + {{ $t('chart.next') }} + {{ $t('chart.confirm') }}
@@ -319,6 +252,7 @@ import { post, chartGroupTree } from '@/api/chart/chart' import TableSelector from '../view/TableSelector' import GroupMoveSelector from '../components/TreeSelector/GroupMoveSelector' import ChartMoveSelector from '../components/TreeSelector/ChartMoveSelector' +import ChartType from '@/views/chart/view/ChartType' import { DEFAULT_COLOR_CASE, DEFAULT_LABEL, @@ -335,7 +269,7 @@ import { export default { name: 'Group', - components: { TableSelector, GroupMoveSelector, ChartMoveSelector }, + components: { ChartType, TableSelector, GroupMoveSelector, ChartMoveSelector }, props: { saveStatus: { type: Object, @@ -416,7 +350,16 @@ export default { dsMoveConfirmDisabled: true, moveDialogTitle: '', isTreeSearch: false, - chartGroupTreeAvailable: [] + chartGroupTreeAvailable: [], + createActive: 1, + view: { + render: 'antv', + type: 'table-normal' + }, + renderOptions: [ + { name: 'AntV', value: 'antv' }, + { name: 'ECharts', value: 'echarts' } + ] } }, computed: { @@ -702,8 +645,13 @@ export default { }, closeCreateChart() { + this.createActive = 1 this.selectTableFlag = false this.table = {} + this.view = { + render: 'antv', + type: 'table-normal' + } }, createChart() { @@ -728,8 +676,8 @@ export default { view.title = this.chartName view.sceneId = this.currGroup.id view.tableId = this.table.id - view.type = 'bar' - view.render = 'antv' + view.type = this.view.type + view.render = this.view.render view.resultMode = 'custom' view.resultCount = 1000 view.customAttr = JSON.stringify({ @@ -977,6 +925,17 @@ export default { if (node.children === null || node.children === 'null') { delete node.children } + }, + + createPreview() { + if (this.createActive > 1) { + this.createActive-- + } + }, + createNext() { + if (this.createActive < 2) { + this.createActive++ + } } } } @@ -1080,4 +1039,28 @@ export default { color:#606266; line-height: 28px!important; } + + .render-select>>>.el-input__suffix{ + width: 20px; + } + .render-select>>>.el-input__inner{ + padding-right: 10px; + padding-left: 6px; + } + .dialog-css>>>.el-step__title{ + font-weight: 400; + font-size: 12px; + } + .chart-icon{ + width: 200px; + height: 200px; + } + .chart-box{ + box-sizing:border-box; + -moz-box-sizing:border-box; + -webkit-box-sizing:border-box; + width:50%; + float:left; + height: 380px; + } diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue index 448217a4ea..9ae0236e1c 100644 --- a/frontend/src/views/chart/view/ChartEdit.vue +++ b/frontend/src/views/chart/view/ChartEdit.vue @@ -96,46 +96,110 @@ -
- - {{ $t('chart.chart_type') }} - - - - - - - -
- - - -
- - - - - Tips: {{ $t('chart.only_one_quota') }} +
+ + {{ $t('chart.chart_type') }} + + + - - - - - - - - + + +
+ + {{ $t('chart.chart_type') }} + + + + + + + +
+ + + +
+ + + + + + + + + + + + + + +
+ + {{ $t('chart.change_chart_type') }} + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
@@ -1761,7 +1825,7 @@ export default { } .attr-style{ - height: calc(100vh - 56px - 25vh - 40px - 40px); + height: calc(100vh - 56px - 60px - 40px - 40px); } .blackTheme .attr-style{ diff --git a/frontend/src/views/chart/view/ChartType.vue b/frontend/src/views/chart/view/ChartType.vue index 136bcb155a..c5c1541017 100644 --- a/frontend/src/views/chart/view/ChartType.vue +++ b/frontend/src/views/chart/view/ChartType.vue @@ -1,221 +1,409 @@