center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

Merge pull request #3138 from dataease/pr@dev@feat_view_slider_style

Browse Source 
feat(视图): 缩略图增加样式配置
This commit is contained in:
Junjun 2022-09-21 17:17:46 +08:00 committed by GitHub
commit 1db2cf03e7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 80 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/lang/en.js
View File

@ -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',

3
frontend/src/lang/tw.js
View File

@ -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: '輔助線',

3
frontend/src/lang/zh.js
View File

@ -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: '辅助线',

5
frontend/src/views/chart/chart/chart.js
View File

@ -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: '',

30
frontend/src/views/chart/chart/common/common.js
View File

@ -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]

25
frontend/src/views/chart/chart/common/common_antv.js
View File

@ -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
}
}
}
}
}

14
frontend/src/views/chart/components/senior/FunctionCfg.vue
View File

@ -8,13 +8,22 @@
<el-form-item v-show="functionForm.sliderShow" :label="$t('chart.slider_range')+'(%)'" class="form-item form-item-slider">
<el-slider v-model="functionForm.sliderRange" style="width: 90%" :min="0" :max="100" input-size="mini" range @change="changeFunctionCfg" />
</el-form-item>
<el-form-item v-show="functionForm.sliderShow" :label="$t('chart.slider_bg')" class="form-item">
<el-color-picker v-model="functionForm.sliderBg" class="color-picker-style" :predefine="predefineColors" @change="changeFunctionCfg" />
</el-form-item>
<el-form-item v-show="functionForm.sliderShow" :label="$t('chart.slider_fill_bg')" class="form-item">
<el-color-picker v-model="functionForm.sliderFillBg" class="color-picker-style" :predefine="predefineColors" @change="changeFunctionCfg" />
</el-form-item>
<el-form-item v-show="functionForm.sliderShow" :label="$t('chart.slider_text_color')" class="form-item">
<el-color-picker v-model="functionForm.sliderTextClolor" class="color-picker-style" :predefine="predefineColors" @change="changeFunctionCfg" />
</el-form-item>
</el-form>
</el-col>
</div>
</template>
<script>
import { DEFAULT_FUNCTION_CFG } from '../../chart/chart'
import { DEFAULT_FUNCTION_CFG, COLOR_PANEL } from '../../chart/chart'
export default {
name: 'FunctionCfg',
@ -26,7 +35,8 @@ export default {
},
data() {
return {
functionForm: JSON.parse(JSON.stringify(DEFAULT_FUNCTION_CFG))
functionForm: JSON.parse(JSON.stringify(DEFAULT_FUNCTION_CFG)),
predefineColors: COLOR_PANEL
}
},
watch: {