From e27baac6fd27a136d1c3c684d26d90ca778b81cb Mon Sep 17 00:00:00 2001 From: junjie Date: Mon, 17 May 2021 12:14:27 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E8=A7=86=E5=9B=BE):=E5=A2=9E=E5=8A=A0?= =?UTF-8?q?=E6=A0=87=E9=A2=98=E6=96=87=E5=AD=97=E5=9B=BE=E6=A0=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/icons/svg/text.svg | 2 +- frontend/src/lang/zh.js | 9 +- frontend/src/views/chart/chart/chart.js | 9 +- frontend/src/views/chart/chart/gauge/gauge.js | 6 +- .../chart/components/normal/LabelNormal.vue | 139 ++++++++++++++++++ .../components/shape-attr/ColorSelector.vue | 11 +- .../components/shape-attr/SizeSelector.vue | 16 ++ frontend/src/views/chart/view/ChartEdit.vue | 27 +++- 8 files changed, 205 insertions(+), 14 deletions(-) create mode 100644 frontend/src/views/chart/components/normal/LabelNormal.vue diff --git a/frontend/src/icons/svg/text.svg b/frontend/src/icons/svg/text.svg index 9c52a5a327..178eb0bf2c 100644 --- a/frontend/src/icons/svg/text.svg +++ b/frontend/src/icons/svg/text.svg @@ -1 +1 @@ - + diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js index df82df9fd2..3dc4940574 100644 --- a/frontend/src/lang/zh.js +++ b/frontend/src/lang/zh.js @@ -710,7 +710,14 @@ export default { start_angle: '起始角度', end_angle: '结束角度', style_priority: '样式优先级', - dashboard: '仪表盘' + dashboard: '仪表盘', + dimension_color: '维度颜色', + quota_color: '指标颜色', + dimension_font_size: '维度字体大小', + quota_font_size: '指标字体大小', + space_split: '维度/指标间隔', + only_one_quota: '仅支持1个指标', + only_one_result: '仅显示第1个计算结果' }, dataset: { datalist: '数据集', diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js index b59fd21f7e..e05cb07601 100644 --- a/frontend/src/views/chart/chart/chart.js +++ b/frontend/src/views/chart/chart/chart.js @@ -5,7 +5,9 @@ export const DEFAULT_COLOR_CASE = { tableHeaderBgColor: '#4e81bb', tableItemBgColor: '#c6d9f0', tableFontColor: '#000000', - tableStripe: true + tableStripe: true, + dimensionColor: '#000000', + quotaColor: '#000000' } export const DEFAULT_SIZE = { barDefault: true, @@ -28,7 +30,10 @@ export const DEFAULT_SIZE = { gaugeMin: 0, gaugeMax: 100, gaugeStartAngle: 225, - gaugeEndAngle: -45 + gaugeEndAngle: -45, + dimensionFontSize: 18, + quotaFontSize: 18, + spaceSplit: 10 } export const DEFAULT_LABEL = { show: false, diff --git a/frontend/src/views/chart/chart/gauge/gauge.js b/frontend/src/views/chart/chart/gauge/gauge.js index fe188df4c0..325288ec1e 100644 --- a/frontend/src/views/chart/chart/gauge/gauge.js +++ b/frontend/src/views/chart/chart/gauge/gauge.js @@ -32,8 +32,10 @@ export function baseGaugeOption(chart_option, chart) { // detail if (customAttr.label) { const label = JSON.parse(JSON.stringify(customAttr.label)) - label.formatter = label.gaugeFormatter - chart_option.series[0].detail = label + chart_option.series[0].detail.show = label.show + chart_option.series[0].detail.fontSize = label.fontSize + chart_option.series[0].detail.color = label.color + chart_option.series[0].detail.formatter = label.gaugeFormatter } chart_option.series[0].type = 'gauge' // color diff --git a/frontend/src/views/chart/components/normal/LabelNormal.vue b/frontend/src/views/chart/components/normal/LabelNormal.vue new file mode 100644 index 0000000000..5d86054ee7 --- /dev/null +++ b/frontend/src/views/chart/components/normal/LabelNormal.vue @@ -0,0 +1,139 @@ + + + + + diff --git a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue index ba29343078..33417a2d64 100644 --- a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue +++ b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue @@ -9,7 +9,7 @@
- +
@@ -19,6 +19,13 @@ + + + + + + +
@@ -35,7 +42,7 @@
- + diff --git a/frontend/src/views/chart/components/shape-attr/SizeSelector.vue b/frontend/src/views/chart/components/shape-attr/SizeSelector.vue index 6890005228..4a1115f356 100644 --- a/frontend/src/views/chart/components/shape-attr/SizeSelector.vue +++ b/frontend/src/views/chart/components/shape-attr/SizeSelector.vue @@ -113,6 +113,22 @@ + + + + + + + + + + + + + + + + {{ $t('chart.size') }} diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue index af4c3051bd..2068fc3c35 100644 --- a/frontend/src/views/chart/view/ChartEdit.vue +++ b/frontend/src/views/chart/view/ChartEdit.vue @@ -89,7 +89,7 @@
-
+
{{ $t('chart.chart_type') }}
@@ -125,6 +125,19 @@
+ + + + Tips: {{ $t('chart.only_one_quota') }} + + + Tips: {{ $t('chart.only_one_result') }} + + + Tips: {{ $t('chart.only_one_quota') }},{{ $t('chart.only_one_result') }} + + +
{{ $t('chart.style_priority') }} @@ -137,12 +150,12 @@ - - + + - + @@ -203,8 +216,9 @@
- + +
@@ -289,11 +303,12 @@ import BackgroundColorSelector from '../components/component-style/BackgroundCol import QuotaFilterEditor from '../components/filter/QuotaFilterEditor' import DimensionFilterEditor from '../components/filter/DimensionFilterEditor' import TableNormal from '../components/table/TableNormal' +import LabelNormal from '../components/normal/LabelNormal' import html2canvas from 'html2canvas' export default { name: 'ChartEdit', - components: { DimensionFilterEditor, TableNormal, DatasetChartDetail, QuotaFilterEditor, BackgroundColorSelector, FilterItem, XAxisSelector, YAxisSelector, TooltipSelector, LabelSelector, LegendSelector, TitleSelector, SizeSelector, ColorSelector, ChartComponent, QuotaItem, DimensionItem, draggable }, + components: { LabelNormal, DimensionFilterEditor, TableNormal, DatasetChartDetail, QuotaFilterEditor, BackgroundColorSelector, FilterItem, XAxisSelector, YAxisSelector, TooltipSelector, LabelSelector, LegendSelector, TitleSelector, SizeSelector, ColorSelector, ChartComponent, QuotaItem, DimensionItem, draggable }, props: { param: { type: Object,