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

feat(视图): 数值格式化

Browse Source
This commit is contained in:
junjun 2022-07-22 17:59:12 +08:00
parent f3c77fac2c
commit 9e69155606
6 changed files with 73 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/views/chart/chart/gauge/gauge_antv.js
View File

@ -29,6 +29,7 @@ export function baseGaugeOptionAntV(plot, container, chart, action, scale = 1) {
// label
if (customAttr.label) {
const label = JSON.parse(JSON.stringify(customAttr.label))
labelFormatter = label.gaugeLabelFormatter ? label.gaugeLabelFormatter : DEFAULT_LABEL.gaugeLabelFormatter
if (label.show) {
labelContent = {
style: ({ percent }) => ({
@ -48,7 +49,6 @@ export function baseGaugeOptionAntV(plot, container, chart, action, scale = 1) {
} else {
labelContent = false
}
labelFormatter = label.gaugeLabelFormatter ? label.gaugeLabelFormatter : DEFAULT_LABEL.gaugeLabelFormatter
}
const range = [0]

12
frontend/src/views/chart/chart/liquid/liquid.js
View File

@ -1,6 +1,9 @@
import { Liquid } from '@antv/g2plot'
import { hexColorToRGBA } from '@/views/chart/chart/util'
import { DEFAULT_SIZE } from '@/views/chart/chart/chart'
import { DEFAULT_LABEL, DEFAULT_SIZE } from '@/views/chart/chart/chart'
import { valueFormatter } from '@/views/chart/chart/formatter'
let labelFormatter = null
export function baseLiquid(plot, container, chart) {
let value = 0
@ -31,12 +34,17 @@ export function baseLiquid(plot, container, chart) {
// label
if (customAttr.label) {
const label = JSON.parse(JSON.stringify(customAttr.label))
labelFormatter = label.gaugeLabelFormatter ? label.gaugeLabelFormatter : DEFAULT_LABEL.gaugeLabelFormatter
if (label.show) {
labelContent = {
style: ({ percent }) => ({
fontSize: parseInt(label.fontSize),
color: label.color
})
}),
formatter: function(v) {
const value = v.percent
return valueFormatter(value, labelFormatter)
}
}
} else {
labelContent = false

83
frontend/src/views/chart/chart/util.js
View File

@ -1,3 +1,5 @@
import { DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
export function hexColorToRGBA(hex, alpha) {
const rgb = [] // 定义rgb数组
if (/^\#[0-9A-F]{3}$/i.test(hex)) { // 判断传入是否为#三位十六进制数
@ -63,7 +65,8 @@ export const TYPE_CONFIGS = [
'color',
'hPosition',
'isItalic',
'isBolder'
'isBolder',
'remarkShow'
]
}
},
@ -104,7 +107,8 @@ export const TYPE_CONFIGS = [
'color',
'hPosition',
'isItalic',
'isBolder'
'isBolder',
'remarkShow'
]
}
},
@ -148,7 +152,8 @@ export const TYPE_CONFIGS = [
'color',
'hPosition',
'isItalic',
'isBolder'
'isBolder',
'remarkShow'
]
}
},
@ -181,7 +186,8 @@ export const TYPE_CONFIGS = [
'color',
'hPosition',
'isItalic',
'isBolder'
'isBolder',
'remarkShow'
]
}
},
@ -214,7 +220,8 @@ export const TYPE_CONFIGS = [
'color',
'hPosition',
'isItalic',
'isBolder'
'isBolder',
'remarkShow'
]
}
},
@ -253,7 +260,8 @@ export const TYPE_CONFIGS = [
'color',
'hPosition',
'isItalic',
'isBolder'
'isBolder',
'remarkShow'
]
}
},
@ -281,9 +289,7 @@ export const TYPE_CONFIGS = [
'liquidSize'
],
'label-selector-ant-v': [
'show',
'fontSize',
'color'
'labelGauge'
],
'title-selector-ant-v': [
'show',
@ -292,7 +298,8 @@ export const TYPE_CONFIGS = [
'color',
'hPosition',
'isItalic',
'isBolder'
'isBolder',
'remarkShow'
]
}
},
@ -360,7 +367,8 @@ export const TYPE_CONFIGS = [
'color',
'hPosition',
'isItalic',
'isBolder'
'isBolder',
'remarkShow'
],
'legend-selector-ant-v': [
'show',
@ -436,7 +444,8 @@ export const TYPE_CONFIGS = [
'color',
'hPosition',
'isItalic',
'isBolder'
'isBolder',
'remarkShow'
],
'legend-selector-ant-v': [
'show',
@ -512,7 +521,8 @@ export const TYPE_CONFIGS = [
'color',
'hPosition',
'isItalic',
'isBolder'
'isBolder',
'remarkShow'
],
'legend-selector-ant-v': [
'show',
@ -587,7 +597,8 @@ export const TYPE_CONFIGS = [
'color',
'hPosition',
'isItalic',
'isBolder'
'isBolder',
'remarkShow'
],
'legend-selector-ant-v': [
'show',
@ -655,7 +666,8 @@ export const TYPE_CONFIGS = [
'color',
'hPosition',
'isItalic',
'isBolder'
'isBolder',
'remarkShow'
]
}
},
@ -722,7 +734,8 @@ export const TYPE_CONFIGS = [
'color',
'hPosition',
'isItalic',
'isBolder'
'isBolder',
'remarkShow'
],
'legend-selector-ant-v': [
'show',
@ -797,7 +810,8 @@ export const TYPE_CONFIGS = [
'color',
'hPosition',
'isItalic',
'isBolder'
'isBolder',
'remarkShow'
],
'legend-selector-ant-v': [
'show',
@ -851,7 +865,8 @@ export const TYPE_CONFIGS = [
'color',
'hPosition',
'isItalic',
'isBolder'
'isBolder',
'remarkShow'
],
'legend-selector-ant-v': [
'show',
@ -905,7 +920,8 @@ export const TYPE_CONFIGS = [
'color',
'hPosition',
'isItalic',
'isBolder'
'isBolder',
'remarkShow'
],
'legend-selector-ant-v': [
'show',
@ -960,7 +976,8 @@ export const TYPE_CONFIGS = [
'color',
'hPosition',
'isItalic',
'isBolder'
'isBolder',
'remarkShow'
],
'legend-selector-ant-v': [
'show',
@ -1012,7 +1029,8 @@ export const TYPE_CONFIGS = [
'color',
'hPosition',
'isItalic',
'isBolder'
'isBolder',
'remarkShow'
],
'legend-selector-ant-v': [
'show',
@ -1051,7 +1069,8 @@ export const TYPE_CONFIGS = [
'color',
'hPosition',
'isItalic',
'isBolder'
'isBolder',
'remarkShow'
]
}
},
@ -1118,7 +1137,8 @@ export const TYPE_CONFIGS = [
'color',
'hPosition',
'isItalic',
'isBolder'
'isBolder',
'remarkShow'
],
'legend-selector-ant-v': [
'show',
@ -1167,7 +1187,8 @@ export const TYPE_CONFIGS = [
'color',
'hPosition',
'isItalic',
'isBolder'
'isBolder',
'remarkShow'
],
'legend-selector-ant-v': [
'show',
@ -2494,3 +2515,17 @@ export function antVCustomColor(chart) {
}
return colors
}
export function getRemark(chart) {
const remark = {}
if (chart.customStyle) {
const customStyle = JSON.parse(chart.customStyle)
if (customStyle.text) {
const title = JSON.parse(JSON.stringify(customStyle.text))
remark.show = title.remarkShow ? title.remarkShow : DEFAULT_TITLE_STYLE.remarkShow
remark.content = title.remark ? title.remark : DEFAULT_TITLE_STYLE.remark
remark.bgFill = title.remarkBackgroundColor ? title.remarkBackgroundColor : DEFAULT_TITLE_STYLE.remarkBackgroundColor
}
}
return remark
}

2
frontend/src/views/chart/components/drag-item/QuotaExtItem.vue
View File

@ -100,7 +100,7 @@
<el-dropdown-item icon="el-icon-files" :command="beforeClickItem('filter')">
<span>{{ $t('chart.filter') }}...</span>
</el-dropdown-item>
<el-dropdown-item v-if="chart.render === 'antv'" icon="el-icon-notebook-2" divided :command="beforeClickItem('formatter')">
<el-dropdown-item v-if="chart.render === 'antv' && chart.type !== 'gauge' && chart.type !== 'liquid'" icon="el-icon-notebook-2" divided :command="beforeClickItem('formatter')">
<span>{{ $t('chart.value_formatter') }}...</span>
</el-dropdown-item>
<el-dropdown-item icon="el-icon-edit-outline" divided :command="beforeClickItem('rename')">

2
frontend/src/views/chart/components/drag-item/QuotaItem.vue
View File

@ -100,7 +100,7 @@
<el-dropdown-item icon="el-icon-files" :command="beforeClickItem('filter')">
<span>{{ $t('chart.filter') }}...</span>
</el-dropdown-item>
<el-dropdown-item v-if="chart.render === 'antv'" icon="el-icon-notebook-2" divided :command="beforeClickItem('formatter')">
<el-dropdown-item v-if="chart.render === 'antv' && chart.type !== 'gauge' && chart.type !== 'liquid'" icon="el-icon-notebook-2" divided :command="beforeClickItem('formatter')">
<span>{{ $t('chart.value_formatter') }}...</span>
</el-dropdown-item>
<el-dropdown-item icon="el-icon-edit-outline" divided :command="beforeClickItem('rename')">

2
frontend/src/views/chart/components/shape-attr/LabelSelectorAntV.vue
View File

@ -32,7 +32,7 @@
</div>
</el-form>
<el-form v-show="showProperty('labelGauge') && chart.type && chart.type.includes('gauge')" ref="labelForm" :model="labelForm" label-width="80px" size="mini">
<el-form v-show="showProperty('labelGauge') && chart.type && (chart.type.includes('gauge') || chart.type.includes('liquid'))" ref="labelForm" :model="labelForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="labelForm.show" @change="changeLabelAttr">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>