dongjunchuan/de
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 视图提示增加背景选项

Browse Source
This commit is contained in:
junjun 2022-06-22 21:06:04 +08:00
parent 2ffea5e26c
commit 499956a22c
13 changed files with 69 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/views/chart/chart/bar/bar.js
View File

@ -1,5 +1,6 @@
import { hexColorToRGBA } from '../util.js'
import { componentStyle, seniorCfg } from '../common/common'
import { DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
export function baseBarOption(chart_option, chart) {
// 处理shape attr
@ -15,6 +16,10 @@ export function baseBarOption(chart_option, chart) {
const reg = new RegExp('\n', 'g')
tooltip.formatter = tooltip.formatter.replace(reg, '<br/>')
chart_option.tooltip = tooltip
const bgColor = tooltip.backgroundColor ? tooltip.backgroundColor : DEFAULT_TOOLTIP.backgroundColor
chart_option.tooltip.backgroundColor = bgColor
chart_option.tooltip.borderColor = bgColor
}
}
// 处理data
@ -77,6 +82,10 @@ export function horizontalBarOption(chart_option, chart) {
const reg = new RegExp('\n', 'g')
tooltip.formatter = tooltip.formatter.replace(reg, '<br/>')
chart_option.tooltip = tooltip
const bgColor = tooltip.backgroundColor ? tooltip.backgroundColor : DEFAULT_TOOLTIP.backgroundColor
chart_option.tooltip.backgroundColor = bgColor
chart_option.tooltip.borderColor = bgColor
}
}
// 处理data

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

@ -88,7 +88,8 @@ export const DEFAULT_TOOLTIP = {
fontSize: '10',
color: '#909399'
},
formatter: ''
formatter: '',
backgroundColor: '#ffffff'
}
export const DEFAULT_TOTAL = {
row: {

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

@ -11,7 +11,7 @@ export function getPadding(chart) {
// color,label,tooltip,axis,legend,background
export function getTheme(chart) {
const colors = []
let bgColor, labelFontsize, labelColor, tooltipColor, tooltipFontsize, legendColor, legendFontsize
let bgColor, labelFontsize, labelColor, tooltipColor, tooltipFontsize, tooltipBackgroundColor, legendColor, legendFontsize
let customAttr = {}
if (chart.customAttr) {
customAttr = JSON.parse(chart.customAttr)
@ -33,6 +33,7 @@ export function getTheme(chart) {
const t = JSON.parse(JSON.stringify(customAttr.tooltip))
tooltipColor = t.textStyle.color
tooltipFontsize = t.textStyle.fontSize
tooltipBackgroundColor = t.backgroundColor
}
}
@ -84,7 +85,8 @@ export function getTheme(chart) {
domStyles: {
'g2-tooltip': {
color: tooltipColor,
fontSize: tooltipFontsize + 'px'
fontSize: tooltipFontsize + 'px',
background: tooltipBackgroundColor
}
}
},

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

@ -1,5 +1,6 @@
import { hexColorToRGBA } from '@/views/chart/chart/util'
import { componentStyle } from '../common/common'
import { DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
export function baseFunnelOption(chart_option, chart) {
// 处理shape attr
@ -15,6 +16,10 @@ export function baseFunnelOption(chart_option, chart) {
const reg = new RegExp('\n', 'g')
tooltip.formatter = tooltip.formatter.replace(reg, '<br/>')
chart_option.tooltip = tooltip
const bgColor = tooltip.backgroundColor ? tooltip.backgroundColor : DEFAULT_TOOLTIP.backgroundColor
chart_option.tooltip.backgroundColor = bgColor
chart_option.tooltip.borderColor = bgColor
}
}
// 处理data

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

@ -1,5 +1,6 @@
import { hexColorToRGBA } from '@/views/chart/chart/util'
import { componentStyle, seniorCfg } from '../common/common'
import { DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
export function baseLineOption(chart_option, chart) {
// 处理shape attr
@ -15,6 +16,10 @@ export function baseLineOption(chart_option, chart) {
const reg = new RegExp('\n', 'g')
tooltip.formatter = tooltip.formatter.replace(reg, '<br/>')
chart_option.tooltip = tooltip
const bgColor = tooltip.backgroundColor ? tooltip.backgroundColor : DEFAULT_TOOLTIP.backgroundColor
chart_option.tooltip.backgroundColor = bgColor
chart_option.tooltip.borderColor = bgColor
}
}
// 处理data

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

@ -1,5 +1,6 @@
// import { hexColorToRGBA } from '@/views/chart/chart/util'
import { componentStyle } from '../common/common'
import { DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
export function baseMapOption(chart_option, chart) {
// 处理shape attr
@ -21,6 +22,10 @@ export function baseMapOption(chart_option, chart) {
return text.replace(new RegExp('{a}', 'g'), a).replace(new RegExp('{b}', 'g'), b).replace(new RegExp('{c}', 'g'), c)
}
chart_option.tooltip = tooltip
const bgColor = tooltip.backgroundColor ? tooltip.backgroundColor : DEFAULT_TOOLTIP.backgroundColor
chart_option.tooltip.backgroundColor = bgColor
chart_option.tooltip.borderColor = bgColor
}
}
// 处理data

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

@ -1,5 +1,6 @@
import { hexColorToRGBA } from '@/views/chart/chart/util'
import { componentStyle, seniorCfg } from '../common/common'
import { DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
export function baseMixOption(chart_option, chart) {
// 处理shape attr
@ -16,6 +17,10 @@ export function baseMixOption(chart_option, chart) {
const reg = new RegExp('\n', 'g')
tooltip.formatter = tooltip.formatter.replace(reg, '<br/>')
chart_option.tooltip = tooltip
const bgColor = tooltip.backgroundColor ? tooltip.backgroundColor : DEFAULT_TOOLTIP.backgroundColor
chart_option.tooltip.backgroundColor = bgColor
chart_option.tooltip.borderColor = bgColor
}
}
// 处理data

9
frontend/src/views/chart/chart/pie/pie.js
View File

@ -1,5 +1,6 @@
import { hexColorToRGBA } from '@/views/chart/chart/util'
import { componentStyle } from '../common/common'
import { DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
export function basePieOption(chart_option, chart) {
// 处理shape attr
@ -15,6 +16,10 @@ export function basePieOption(chart_option, chart) {
const reg = new RegExp('\n', 'g')
tooltip.formatter = tooltip.formatter.replace(reg, '<br/>')
chart_option.tooltip = tooltip
const bgColor = tooltip.backgroundColor ? tooltip.backgroundColor : DEFAULT_TOOLTIP.backgroundColor
chart_option.tooltip.backgroundColor = bgColor
chart_option.tooltip.borderColor = bgColor
}
}
// 处理data
@ -63,6 +68,10 @@ export function rosePieOption(chart_option, chart) {
const reg = new RegExp('\n', 'g')
tooltip.formatter = tooltip.formatter.replace(reg, '<br/>')
chart_option.tooltip = tooltip
const bgColor = tooltip.backgroundColor ? tooltip.backgroundColor : DEFAULT_TOOLTIP.backgroundColor
chart_option.tooltip.backgroundColor = bgColor
chart_option.tooltip.borderColor = bgColor
}
}
// 处理data

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

@ -1,5 +1,6 @@
import { hexColorToRGBA } from '@/views/chart/chart/util'
import { componentStyle } from '../common/common'
import { DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
export function baseRadarOption(chart_option, chart) {
// 处理shape attr
@ -20,6 +21,10 @@ export function baseRadarOption(chart_option, chart) {
const reg = new RegExp('\n', 'g')
tooltip.formatter = tooltip.formatter.replace(reg, '<br/>')
chart_option.tooltip = tooltip
const bgColor = tooltip.backgroundColor ? tooltip.backgroundColor : DEFAULT_TOOLTIP.backgroundColor
chart_option.tooltip.backgroundColor = bgColor
chart_option.tooltip.borderColor = bgColor
}
}
// 处理data

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

@ -1,5 +1,6 @@
import { hexColorToRGBA } from '@/views/chart/chart/util'
import { componentStyle, seniorCfg } from '../common/common'
import { DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
let bubbleArray = []
let terminalType = 'pc'
@ -19,6 +20,10 @@ export function baseScatterOption(chart_option, chart, terminal = 'pc') {
const reg = new RegExp('\n', 'g')
tooltip.formatter = tooltip.formatter.replace(reg, '<br/>')
chart_option.tooltip = tooltip
const bgColor = tooltip.backgroundColor ? tooltip.backgroundColor : DEFAULT_TOOLTIP.backgroundColor
chart_option.tooltip.backgroundColor = bgColor
chart_option.tooltip.borderColor = bgColor
}
}
// 处理data

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

@ -1,5 +1,6 @@
import { hexColorToRGBA } from '@/views/chart/chart/util'
import { componentStyle } from '../common/common'
import { DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
export function baseTreemapOption(chart_option, chart) {
// 处理shape attr
@ -15,6 +16,10 @@ export function baseTreemapOption(chart_option, chart) {
const reg = new RegExp('\n', 'g')
tooltip.formatter = tooltip.formatter.replace(reg, '<br/>')
chart_option.tooltip = tooltip
const bgColor = tooltip.backgroundColor ? tooltip.backgroundColor : DEFAULT_TOOLTIP.backgroundColor
chart_option.tooltip.backgroundColor = bgColor
chart_option.tooltip.borderColor = bgColor
}
}
// 处理data

5
frontend/src/views/chart/components/shape-attr/TooltipSelector.vue
View File

@ -20,6 +20,9 @@
<el-form-item v-show="showProperty('textStyle')" :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="tooltipForm.textStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeTooltipAttr('textStyle')" />
</el-form-item>
<el-form-item v-show="showProperty('textStyle')" :label="$t('chart.background')" class="form-item">
<el-color-picker v-model="tooltipForm.backgroundColor" class="color-picker-style" :predefine="predefineColors" @change="changeTooltipAttr('textStyle')" />
</el-form-item>
<el-form-item v-show="showProperty('formatter')" class="form-item">
<span slot="label">
<span class="span-box">
@ -101,6 +104,8 @@ export default {
}
if (customAttr.tooltip) {
this.tooltipForm = customAttr.tooltip
this.tooltipForm.backgroundColor = this.tooltipForm.backgroundColor ? this.tooltipForm.backgroundColor : DEFAULT_TOOLTIP.backgroundColor
}
}
},

5
frontend/src/views/chart/components/shape-attr/TooltipSelectorAntV.vue
View File

@ -14,6 +14,9 @@
<el-form-item v-show="showProperty('textStyle')" :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="tooltipForm.textStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeTooltipAttr('textStyle')" />
</el-form-item>
<el-form-item v-show="showProperty('textStyle')" :label="$t('chart.background')" class="form-item">
<el-color-picker v-model="tooltipForm.backgroundColor" class="color-picker-style" :predefine="predefineColors" @change="changeTooltipAttr('textStyle')" />
</el-form-item>
</div>
</el-form>
</el-col>
@ -73,6 +76,8 @@ export default {
}
if (customAttr.tooltip) {
this.tooltipForm = customAttr.tooltip
this.tooltipForm.backgroundColor = this.tooltipForm.backgroundColor ? this.tooltipForm.backgroundColor : DEFAULT_TOOLTIP.backgroundColor
}
}
},