From f773a3109f9ffed0e43237f8a8683b266da93878 Mon Sep 17 00:00:00 2001 From: fit2cloud-chenyw Date: Wed, 21 Sep 2022 17:09:16 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E8=A7=86=E5=9B=BE):=20=E7=BC=A9=E7=95=A5?= =?UTF-8?q?=E5=9B=BE=E5=A2=9E=E5=8A=A0=E6=A0=B7=E5=BC=8F=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/lang/en.js | 3 ++ frontend/src/lang/tw.js | 3 ++ frontend/src/lang/zh.js | 3 ++ frontend/src/views/chart/chart/chart.js | 5 +++- .../src/views/chart/chart/common/common.js | 30 +++++++++++++++++++ .../views/chart/chart/common/common_antv.js | 25 ++++++++++++++++ .../chart/components/senior/FunctionCfg.vue | 14 +++++++-- 7 files changed, 80 insertions(+), 3 deletions(-) diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js index ea90af461c..48ce97f7a1 100644 --- a/frontend/src/lang/en.js +++ b/frontend/src/lang/en.js @@ -1314,6 +1314,9 @@ export default { analyse_cfg: 'Analyse', slider: 'Slider', slider_range: 'Range', + slider_bg: 'Background', + slider_fill_bg: 'Selected Background', + slider_text_color: 'Font Color', chart_no_senior: 'This chart type not support senior config,please look forward to.', chart_no_properties: 'This chart type not support properties config.', assist_line: 'Assist Line', diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js index cb6c2df8eb..5df944cb3b 100644 --- a/frontend/src/lang/tw.js +++ b/frontend/src/lang/tw.js @@ -1314,6 +1314,9 @@ export default { analyse_cfg: '分析預警', slider: '縮略軸', slider_range: '默認範圍', + slider_bg: '背景', + slider_fill_bg: '選中背景', + slider_text_color: '字體顏色', chart_no_senior: '當前圖表類型暫無高級配置，敬請期待', chart_no_properties: '當前圖表類型暫無样式配置.', assist_line: '輔助線', diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js index 511dba8785..5a2bf46a75 100644 --- a/frontend/src/lang/zh.js +++ b/frontend/src/lang/zh.js @@ -1313,6 +1313,9 @@ export default { analyse_cfg: '分析预警', slider: '缩略轴', slider_range: '默认范围', + slider_bg: '背景', + slider_fill_bg: '选中背景', + slider_text_color: '字体颜色', chart_no_senior: '当前图表类型暂无高级配置，敬请期待', chart_no_properties: '当前图表类型暂无样式配置', assist_line: '辅助线', diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js index 65eea85321..43548d3e71 100644 --- a/frontend/src/views/chart/chart/chart.js +++ b/frontend/src/views/chart/chart/chart.js @@ -382,7 +382,10 @@ export const DEFAULT_SPLIT = { } export const DEFAULT_FUNCTION_CFG = { sliderShow: false, - sliderRange: [0, 10] + sliderRange: [0, 10], + sliderBg: '#FFFFFF', + sliderFillBg: '#BCD6F1', + sliderTextClolor: '#999999' } export const DEFAULT_THRESHOLD = { gaugeThreshold: '', diff --git a/frontend/src/views/chart/chart/common/common.js b/frontend/src/views/chart/chart/common/common.js index ccb98c70d6..38a601ce2a 100644 --- a/frontend/src/views/chart/chart/common/common.js +++ b/frontend/src/views/chart/chart/common/common.js @@ -192,6 +192,16 @@ export function componentStyle(chart_option, chart) { } } +const hexToRgba = (hex, opacity) => { + let rgbaColor = '' + const reg = /^#[\da-f]{6}$/i + if (reg.test(hex)) { + rgbaColor = `rgba(${parseInt('0x' + hex.slice(1, 3))},${parseInt( + '0x' + hex.slice(3, 5) + )},${parseInt('0x' + hex.slice(5, 7))},${opacity})` + } + return rgbaColor +} 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) @@ -209,6 +219,26 @@ export function seniorCfg(chart_option, chart) { end: parseInt(senior.functionCfg.sliderRange[1]) } ] + if (senior.functionCfg.sliderBg) { + chart_option.dataZoom[1].dataBackground = { + lineStyle: { color: reverseColor(senior.functionCfg.sliderBg), opacity: 0.3 }, + areaStyle: { color: reverseColor(senior.functionCfg.sliderBg), opacity: 0.1 } + } + } + if (senior.functionCfg.sliderFillBg) { + chart_option.dataZoom[1].selectedDataBackground = { + lineStyle: { color: senior.functionCfg.sliderFillBg }, + areaStyle: { color: senior.functionCfg.sliderFillBg } + } + const rgba = hexToRgba(senior.functionCfg.sliderFillBg, 0.5) + chart_option.dataZoom[1].fillerColor = rgba + } + if (senior.functionCfg.sliderTextClolor) { + chart_option.dataZoom[1].textStyle = { color: senior.functionCfg.sliderTextClolor } + const rgba = hexToRgba(senior.functionCfg.sliderTextClolor, 0.5) + chart_option.dataZoom[1].handleStyle = { color: rgba } + } + if (chart.type.includes('horizontal')) { chart_option.dataZoom[0].yAxisIndex = [0] chart_option.dataZoom[1].yAxisIndex = [0] diff --git a/frontend/src/views/chart/chart/common/common_antv.js b/frontend/src/views/chart/chart/common/common_antv.js index 9c736d0d8e..d67c066803 100644 --- a/frontend/src/views/chart/chart/common/common_antv.js +++ b/frontend/src/views/chart/chart/common/common_antv.js @@ -636,6 +636,31 @@ export function getSlider(chart) { start: parseInt(senior.functionCfg.sliderRange[0]) / 100, end: parseInt(senior.functionCfg.sliderRange[1]) / 100 } + + if (senior.functionCfg.sliderBg) { + cfg.backgroundStyle = { + fill: senior.functionCfg.sliderBg, + stroke: senior.functionCfg.sliderBg, + lineWidth: 1, + strokeOpacity: 0.5 + } + } + if (senior.functionCfg.sliderFillBg) { + cfg.foregroundStyle = { + 'fill': senior.functionCfg.sliderFillBg, + 'fillOpacity': 0.5 + } + } + if (senior.functionCfg.sliderTextClolor) { + cfg.textStyle = { + 'fill': senior.functionCfg.sliderTextClolor + } + cfg.handlerStyle = { + 'fill': senior.functionCfg.sliderTextClolor, + 'fillOpacity': 0.5, + 'highLightFill': senior.functionCfg.sliderTextClolor + } + } } } } diff --git a/frontend/src/views/chart/components/senior/FunctionCfg.vue b/frontend/src/views/chart/components/senior/FunctionCfg.vue index 1ed5249cf0..b3f4920542 100644 --- a/frontend/src/views/chart/components/senior/FunctionCfg.vue +++ b/frontend/src/views/chart/components/senior/FunctionCfg.vue @@ -8,13 +8,22 @@ + + + + + + + + +