From c55b7dfe018a214b0484f7754a4a57d233be5fbc Mon Sep 17 00:00:00 2001 From: junjie Date: Fri, 14 May 2021 18:21:03 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E8=A7=86=E5=9B=BE):=E5=9B=BE=E8=A1=A8?= =?UTF-8?q?=E7=B1=BB=E5=9E=8B=E6=96=B0=E5=A2=9E=EF=BC=9Agauge?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/icons/svg/gauge.svg | 1 + frontend/src/icons/svg/scatter.svg | 1 + frontend/src/icons/svg/text.svg | 1 + frontend/src/lang/zh.js | 4 +- frontend/src/views/chart/chart/chart.js | 45 +++++++++++++++- frontend/src/views/chart/chart/gauge/gauge.js | 54 +++++++++++++++++++ .../views/chart/components/ChartComponent.vue | 5 +- .../components/shape-attr/LabelSelector.vue | 24 ++++++++- .../components/shape-attr/SizeSelector.vue | 15 ++++++ frontend/src/views/chart/view/ChartEdit.vue | 15 +++--- 10 files changed, 153 insertions(+), 12 deletions(-) create mode 100644 frontend/src/icons/svg/gauge.svg create mode 100644 frontend/src/icons/svg/scatter.svg create mode 100644 frontend/src/icons/svg/text.svg create mode 100644 frontend/src/views/chart/chart/gauge/gauge.js diff --git a/frontend/src/icons/svg/gauge.svg b/frontend/src/icons/svg/gauge.svg new file mode 100644 index 0000000000..c21c854d1b --- /dev/null +++ b/frontend/src/icons/svg/gauge.svg @@ -0,0 +1 @@ + diff --git a/frontend/src/icons/svg/scatter.svg b/frontend/src/icons/svg/scatter.svg new file mode 100644 index 0000000000..a07462aac1 --- /dev/null +++ b/frontend/src/icons/svg/scatter.svg @@ -0,0 +1 @@ + diff --git a/frontend/src/icons/svg/text.svg b/frontend/src/icons/svg/text.svg new file mode 100644 index 0000000000..9c52a5a327 --- /dev/null +++ b/frontend/src/icons/svg/text.svg @@ -0,0 +1 @@ + diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js index c23e548dc0..347f79a62f 100644 --- a/frontend/src/lang/zh.js +++ b/frontend/src/lang/zh.js @@ -706,7 +706,9 @@ export default { table_header_bg: '表头背景', table_item_bg: '表格背景', table_item_font_color: '字体颜色', - stripe: '斑马纹' + stripe: '斑马纹', + start_angle: '起始角度', + end_angle: '结束角度' }, dataset: { datalist: '数据集', diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js index a9efd53629..b59fd21f7e 100644 --- a/frontend/src/views/chart/chart/chart.js +++ b/frontend/src/views/chart/chart/chart.js @@ -24,14 +24,19 @@ export const DEFAULT_SIZE = { funnelWidth: 80, radarShape: 'polygon', tableTitleFontSize: 12, - tableItemFontSize: 12 + tableItemFontSize: 12, + gaugeMin: 0, + gaugeMax: 100, + gaugeStartAngle: 225, + gaugeEndAngle: -45 } export const DEFAULT_LABEL = { show: false, position: 'top', color: '#909399', fontSize: '10', - formatter: '{c}' + formatter: '{c}', + gaugeFormatter: '{value}' } export const DEFAULT_TOOLTIP = { show: true, @@ -297,3 +302,39 @@ export const BASE_RADAR = { data: [] }] } + +export const BASE_GAUGE = { + title: { + text: '' + }, + // grid: { + // containLabel: true + // }, + tooltip: {}, + legend: { + show: true, + type: 'scroll', + itemWidth: 10, + itemHeight: 10, + icon: 'rect' + }, + series: [ + { + name: '', + type: 'gauge', + startAngle: 225, + endAngle: -45, + min: 0, + max: 100, + progress: { + show: true + }, + detail: { + show: true, + valueAnimation: true, + formatter: '{value}' + }, + data: [] + } + ] +} diff --git a/frontend/src/views/chart/chart/gauge/gauge.js b/frontend/src/views/chart/chart/gauge/gauge.js new file mode 100644 index 0000000000..fe188df4c0 --- /dev/null +++ b/frontend/src/views/chart/chart/gauge/gauge.js @@ -0,0 +1,54 @@ +import { componentStyle } from '../common/common' +import { hexColorToRGBA } from '@/views/chart/chart/util' + +export function baseGaugeOption(chart_option, chart) { + // 处理shape attr + let customAttr = {} + if (chart.customAttr) { + customAttr = JSON.parse(chart.customAttr) + if (customAttr.color) { + chart_option.color = customAttr.color.colors + } + // tooltip + if (customAttr.tooltip) { + const tooltip = JSON.parse(JSON.stringify(customAttr.tooltip)) + const reg = new RegExp('\n', 'g') + tooltip.formatter = tooltip.formatter.replace(reg, '
') + chart_option.tooltip = tooltip + } + } + // 处理data + if (chart.data) { + chart_option.title.text = chart.title + if (chart.data.series.length > 0) { + chart_option.series[0].name = chart.data.series[0].name + // size + if (customAttr.size) { + chart_option.series[0].min = customAttr.size.gaugeMin + chart_option.series[0].max = customAttr.size.gaugeMax + chart_option.series[0].startAngle = customAttr.size.gaugeStartAngle + chart_option.series[0].endAngle = customAttr.size.gaugeEndAngle + } + // 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].type = 'gauge' + // color + chart_option.series[0].itemStyle = { + color: hexColorToRGBA(customAttr.color.colors[0], customAttr.color.alpha) + } + // data只取第一个 + const y = { + name: chart.data.x[0], + value: chart.data.series[0].data[0] + } + chart_option.series[0].data.push(y) + } + } + // console.log(chart_option); + componentStyle(chart_option, chart) + return chart_option +} diff --git a/frontend/src/views/chart/components/ChartComponent.vue b/frontend/src/views/chart/components/ChartComponent.vue index f4d98672ed..50eb574f26 100644 --- a/frontend/src/views/chart/components/ChartComponent.vue +++ b/frontend/src/views/chart/components/ChartComponent.vue @@ -5,12 +5,13 @@