From a84820ba1e285711263ab4362dff37960e85acab Mon Sep 17 00:00:00 2001 From: junjun Date: Mon, 7 Mar 2022 13:30:22 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E8=A7=86=E5=9B=BE=E9=AB=98=E7=BA=A7?= =?UTF-8?q?=E8=AE=BE=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/lang/en.js | 4 +- frontend/src/lang/tw.js | 4 +- frontend/src/lang/zh.js | 4 +- frontend/src/views/chart/chart/bar/bar.js | 4 +- .../src/views/chart/chart/bar/bar_antv.js | 16 +++- .../src/views/chart/chart/common/common.js | 76 +++++++++++++++++++ .../views/chart/chart/common/common_antv.js | 49 +++++++++++- frontend/src/views/chart/chart/line/line.js | 3 +- .../src/views/chart/chart/line/line_antv.js | 7 +- frontend/src/views/chart/chart/mix/mix.js | 3 +- .../src/views/chart/chart/scatter/scatter.js | 3 +- .../views/chart/chart/scatter/scatter_antv.js | 5 +- .../chart/components/senior/AssistLine.vue | 28 +++++++ frontend/src/views/chart/view/ChartEdit.vue | 5 +- 14 files changed, 199 insertions(+), 12 deletions(-) diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js index c5c1abbefa..906eedb303 100644 --- a/frontend/src/lang/en.js +++ b/frontend/src/lang/en.js @@ -1039,7 +1039,9 @@ export default { chart_no_senior: 'This chart type not support senior config,please look forward to.', assist_line: 'Assist Line', field_fixed: 'Fixed', - line_type_dotted: 'Dotted' + line_type_dotted: 'Dotted', + value_can_not_empty: 'Value can not be empty', + value_error: 'Value illegal' }, 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 ba3d1b8d64..372a8d3ec7 100644 --- a/frontend/src/lang/tw.js +++ b/frontend/src/lang/tw.js @@ -1039,7 +1039,9 @@ export default { chart_no_senior: '當前圖表類型暫無高級配置，敬請期待', assist_line: '輔助線', field_fixed: '固定值', - line_type_dotted: '點' + line_type_dotted: '點', + value_can_not_empty: '值不能為空', + value_error: '值必須為數值' }, dataset: { sheet_warn: '有多個 Sheet 頁，默認抽取第一個', diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js index d14d9aa389..c73b300abc 100644 --- a/frontend/src/lang/zh.js +++ b/frontend/src/lang/zh.js @@ -1042,7 +1042,9 @@ export default { chart_no_senior: '当前图表类型暂无高级配置，敬请期待', assist_line: '辅助线', field_fixed: '固定值', - line_type_dotted: '点' + line_type_dotted: '点', + value_can_not_empty: '值不能为空', + value_error: '值必须为数值' }, dataset: { sheet_warn: '有多个 Sheet 页，默认抽取第一个', diff --git a/frontend/src/views/chart/chart/bar/bar.js b/frontend/src/views/chart/chart/bar/bar.js index fdb3f08a07..b55d9a9ed3 100644 --- a/frontend/src/views/chart/chart/bar/bar.js +++ b/frontend/src/views/chart/chart/bar/bar.js @@ -1,5 +1,5 @@ import { hexColorToRGBA } from '../util.js' -import { componentStyle } from '../common/common' +import { componentStyle, seniorCfg } from '../common/common' export function baseBarOption(chart_option, chart) { // 处理shape attr @@ -48,6 +48,7 @@ export function baseBarOption(chart_option, chart) { } // console.log(chart_option); componentStyle(chart_option, chart) + seniorCfg(chart_option, chart) return chart_option } @@ -110,6 +111,7 @@ export function horizontalBarOption(chart_option, chart) { } // console.log(chart_option); componentStyle(chart_option, chart) + seniorCfg(chart_option, chart) return chart_option } diff --git a/frontend/src/views/chart/chart/bar/bar_antv.js b/frontend/src/views/chart/chart/bar/bar_antv.js index 6d0c33e91a..d84248628c 100644 --- a/frontend/src/views/chart/chart/bar/bar_antv.js +++ b/frontend/src/views/chart/chart/bar/bar_antv.js @@ -1,5 +1,15 @@ import { Column, Bar } from '@antv/g2plot' -import { getTheme, getLabel, getTooltip, getLegend, getXAxis, getYAxis, getPadding, getSlider } from '@/views/chart/chart/common/common_antv' +import { + getTheme, + getLabel, + getTooltip, + getLegend, + getXAxis, + getYAxis, + getPadding, + getSlider, + getAnalyse +} from '@/views/chart/chart/common/common_antv' export function baseBarOptionAntV(plot, container, chart, action, isGroup, isStack) { // theme @@ -15,6 +25,7 @@ export function baseBarOptionAntV(plot, container, chart, action, isGroup, isSta const data = chart.data.datas // config const slider = getSlider(chart) + const analyse = getAnalyse(chart) // options const options = { theme: theme, @@ -29,6 +40,7 @@ export function baseBarOptionAntV(plot, container, chart, action, isGroup, isSta xAxis: xAxis, yAxis: yAxis, slider: slider, + annotations: analyse, interactions: [ { type: 'element-active', cfg: { @@ -113,6 +125,7 @@ export function hBaseBarOptionAntV(plot, container, chart, action, isGroup, isSt const data = chart.data.datas // config const slider = getSlider(chart) + const analyse = getAnalyse(chart) // options const options = { theme: theme, @@ -127,6 +140,7 @@ export function hBaseBarOptionAntV(plot, container, chart, action, isGroup, isSt xAxis: xAxis, yAxis: yAxis, slider: slider, + annotations: analyse, interactions: [ { type: 'element-active', cfg: { diff --git a/frontend/src/views/chart/chart/common/common.js b/frontend/src/views/chart/chart/common/common.js index 3945d4f4bf..632f6aeff4 100644 --- a/frontend/src/views/chart/chart/common/common.js +++ b/frontend/src/views/chart/chart/common/common.js @@ -178,3 +178,79 @@ export function componentStyle(chart_option, chart) { } } } + +export function seniorCfg(chart_option, chart) { + if (chart.senior && chart.type && (chart.type.includes('bar') || chart.type.includes('line') || chart.type.includes('mix'))) { + const senior = JSON.parse(chart.senior) + if (senior.functionCfg) { + if (senior.functionCfg.sliderShow) { + chart_option.dataZoom = [ + { + type: 'inside', + start: parseInt(senior.functionCfg.sliderRange[0]), + end: parseInt(senior.functionCfg.sliderRange[1]) + }, + { + type: 'slider', + start: parseInt(senior.functionCfg.sliderRange[0]), + end: parseInt(senior.functionCfg.sliderRange[1]) + } + ] + if (chart.type.includes('horizontal')) { + chart_option.dataZoom[0].yAxisIndex = [0] + chart_option.dataZoom[1].yAxisIndex = [0] + chart_option.dataZoom[1].left = '10px' + } + } + } + if (senior.assistLine && senior.assistLine.length > 0) { + if (chart_option.series && chart_option.series.length > 0) { + chart_option.series[0].markLine = { + symbol: 'none', + data: [] + } + senior.assistLine.forEach(ele => { + if (chart.type.includes('horizontal')) { + chart_option.series[0].markLine.data.push({ + symbol: 'none', + xAxis: parseFloat(ele.value), + name: ele.name, + lineStyle: { + color: ele.color, + type: ele.lineType + }, + label: { + show: true, + color: ele.color, + fontSize: 10, + position: 'insideStartTop' + }, + tooltip: { + show: false + } + }) + } else { + chart_option.series[0].markLine.data.push({ + symbol: 'none', + yAxis: parseFloat(ele.value), + name: ele.name, + lineStyle: { + color: ele.color, + type: ele.lineType + }, + label: { + show: true, + color: ele.color, + fontSize: 10, + position: 'insideStartTop' + }, + tooltip: { + show: false + } + }) + } + }) + } + } + } +} diff --git a/frontend/src/views/chart/chart/common/common_antv.js b/frontend/src/views/chart/chart/common/common_antv.js index 86a5d6c3e3..d23b76fdb1 100644 --- a/frontend/src/views/chart/chart/common/common_antv.js +++ b/frontend/src/views/chart/chart/common/common_antv.js @@ -439,7 +439,7 @@ function transAxisPosition(chart, axis) { export function getSlider(chart) { let senior = {} let cfg = false - if (chart.senior) { + if (chart.senior && chart.type && (chart.type.includes('bar') || chart.type.includes('line') || chart.type.includes('mix'))) { senior = JSON.parse(chart.senior) if (senior.functionCfg) { if (senior.functionCfg.sliderShow) { @@ -452,3 +452,50 @@ export function getSlider(chart) { } return cfg } + +export function getAnalyse(chart) { + let senior = {} + const assistLine = [] + if (chart.senior && chart.type && (chart.type.includes('bar') || chart.type.includes('line') || chart.type.includes('mix'))) { + senior = JSON.parse(chart.senior) + if (senior.assistLine && senior.assistLine.length > 0) { + senior.assistLine.forEach(ele => { + assistLine.push({ + type: 'line', + start: ['start', parseFloat(ele.value)], + end: ['end', parseFloat(ele.value)], + style: { + stroke: ele.color, + lineDash: getLineDash(ele.lineType) + } + }) + assistLine.push({ + type: 'text', + position: ['start', parseFloat(ele.value)], + content: parseFloat(ele.value), + offsetY: -2, + offsetX: 2, + style: { + textBaseline: 'bottom', + fill: ele.color, + fontSize: 10 + } + }) + }) + } + } + return assistLine +} + +function getLineDash(type) { + switch (type) { + case 'solid': + return [0, 0] + case 'dashed': + return [10, 8] + case 'dotted': + return [2, 2] + default: + return [0, 0] + } +} diff --git a/frontend/src/views/chart/chart/line/line.js b/frontend/src/views/chart/chart/line/line.js index d8439617b8..2ef2ea59ba 100644 --- a/frontend/src/views/chart/chart/line/line.js +++ b/frontend/src/views/chart/chart/line/line.js @@ -1,5 +1,5 @@ import { hexColorToRGBA } from '@/views/chart/chart/util' -import { componentStyle } from '../common/common' +import { componentStyle, seniorCfg } from '../common/common' export function baseLineOption(chart_option, chart) { // 处理shape attr @@ -55,6 +55,7 @@ export function baseLineOption(chart_option, chart) { } // console.log(chart_option); componentStyle(chart_option, chart) + seniorCfg(chart_option, chart) return chart_option } diff --git a/frontend/src/views/chart/chart/line/line_antv.js b/frontend/src/views/chart/chart/line/line_antv.js index d3fde91e1f..eb7d0eacc0 100644 --- a/frontend/src/views/chart/chart/line/line_antv.js +++ b/frontend/src/views/chart/chart/line/line_antv.js @@ -7,7 +7,8 @@ import { getXAxis, getYAxis, getPadding, - getSlider + getSlider, + getAnalyse } from '@/views/chart/chart/common/common_antv' export function baseLineOptionAntV(plot, container, chart, action) { @@ -24,6 +25,7 @@ export function baseLineOptionAntV(plot, container, chart, action) { const data = chart.data.datas // config const slider = getSlider(chart) + const analyse = getAnalyse(chart) // options const options = { point: {}, @@ -39,6 +41,7 @@ export function baseLineOptionAntV(plot, container, chart, action) { xAxis: xAxis, yAxis: yAxis, slider: slider, + annotations: analyse, interactions: [ { type: 'element-active', cfg: { @@ -114,6 +117,7 @@ export function baseAreaOptionAntV(plot, container, chart, action) { const data = chart.data.datas // config const slider = getSlider(chart) + const analyse = getAnalyse(chart) // options const options = { point: {}, @@ -129,6 +133,7 @@ export function baseAreaOptionAntV(plot, container, chart, action) { xAxis: xAxis, yAxis: yAxis, slider: slider, + annotations: analyse, interactions: [ { type: 'element-active', cfg: { diff --git a/frontend/src/views/chart/chart/mix/mix.js b/frontend/src/views/chart/chart/mix/mix.js index 7e1935738e..bad33d3181 100644 --- a/frontend/src/views/chart/chart/mix/mix.js +++ b/frontend/src/views/chart/chart/mix/mix.js @@ -1,5 +1,5 @@ import { hexColorToRGBA } from '@/views/chart/chart/util' -import { componentStyle } from '../common/common' +import { componentStyle, seniorCfg } from '../common/common' export function baseMixOption(chart_option, chart) { // 处理shape attr @@ -68,5 +68,6 @@ export function baseMixOption(chart_option, chart) { } // console.log(chart_option); componentStyle(chart_option, chart) + seniorCfg(chart_option, chart) return chart_option } diff --git a/frontend/src/views/chart/chart/scatter/scatter.js b/frontend/src/views/chart/chart/scatter/scatter.js index e1883f3855..9e2924368a 100644 --- a/frontend/src/views/chart/chart/scatter/scatter.js +++ b/frontend/src/views/chart/chart/scatter/scatter.js @@ -1,5 +1,5 @@ import { hexColorToRGBA } from '@/views/chart/chart/util' -import { componentStyle } from '../common/common' +import { componentStyle, seniorCfg } from '../common/common' let bubbleArray = [] let terminalType = 'pc' @@ -57,6 +57,7 @@ export function baseScatterOption(chart_option, chart, terminal = 'pc') { } // console.log(chart_option); componentStyle(chart_option, chart) + seniorCfg(chart_option, chart) return chart_option } diff --git a/frontend/src/views/chart/chart/scatter/scatter_antv.js b/frontend/src/views/chart/chart/scatter/scatter_antv.js index 274c4497d0..77fd43d137 100644 --- a/frontend/src/views/chart/chart/scatter/scatter_antv.js +++ b/frontend/src/views/chart/chart/scatter/scatter_antv.js @@ -6,7 +6,8 @@ import { getXAxis, getYAxis, getPadding, - getSlider + getSlider, + getAnalyse } from '@/views/chart/chart/common/common_antv' import { Scatter } from '@antv/g2plot' @@ -25,6 +26,7 @@ export function baseScatterOptionAntV(plot, container, chart, action) { const data = chart.data.datas // config const slider = getSlider(chart) + const analyse = getAnalyse(chart) // options const options = { theme: theme, @@ -39,6 +41,7 @@ export function baseScatterOptionAntV(plot, container, chart, action) { xAxis: xAxis, yAxis: yAxis, slider: slider, + annotations: analyse, pieStyle: { lineWidth: 0 }, diff --git a/frontend/src/views/chart/components/senior/AssistLine.vue b/frontend/src/views/chart/components/senior/AssistLine.vue index 13d523bbbb..9e8a33ceda 100644 --- a/frontend/src/views/chart/components/senior/AssistLine.vue +++ b/frontend/src/views/chart/components/senior/AssistLine.vue @@ -102,6 +102,34 @@ export default { this.editLineDialog = false }, changeLine() { + // check line config + for (let i = 0; i < this.lineArr.length; i++) { + const ele = this.lineArr[i] + if (!ele.name || ele.name === '') { + this.$message({ + message: this.$t('chart.name_can_not_empty'), + type: 'error', + showClose: true + }) + return + } + if (!ele.value) { + this.$message({ + message: this.$t('chart.value_can_not_empty'), + type: 'error', + showClose: true + }) + return + } + if (parseFloat(ele.value).toString() === 'NaN') { + this.$message({ + message: this.$t('chart.value_error'), + type: 'error', + showClose: true + }) + return + } + } this.assistLine = JSON.parse(JSON.stringify(this.lineArr)) this.changeAssistLine() this.closeEditLine() diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue index 1dcc6b0841..146713344b 100644 --- a/frontend/src/views/chart/view/ChartEdit.vue +++ b/frontend/src/views/chart/view/ChartEdit.vue @@ -2633,7 +2633,10 @@ export default { width: 100%; text-align: center; font-size: 12px; - margin-top: 40px; + padding-top: 40px; + overflow:auto; + border-right: 1px solid #e6e6e6; + height: 100%; }