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

refactor(视图): 玫瑰图，饼图，环形图，玫瑰环形图优化

Browse Source 
优化默认样式，默认样式修改为：显示标签: 分类+占比，不显示图例，饼图和环形图可设置占比保留小数 https://www.tapd.cn/55578866/prong/stories/view/1155578866001009362
https://www.tapd.cn/55578866/prong/stories/view/1155578866001010169
This commit is contained in:
wisonic-s 2022-10-18 18:27:21 +08:00
parent cfd9df8389
commit 1054ca0299
11 changed files with 116 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/babel.config.js
View File

@ -2,5 +2,8 @@ module.exports = {
presets: [
'@vue/app'
],
plugins: ['@babel/plugin-proposal-optional-chaining']
plugins: [
'@babel/plugin-proposal-optional-chaining',
'@babel/plugin-proposal-nullish-coalescing-operator'
]
}

1
frontend/package.json
View File

@ -83,6 +83,7 @@
"devDependencies": {
"@babel/core": "^7.4.0-0",
"@babel/plugin-proposal-optional-chaining": "^7.18.6",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
"@babel/register": "7.0.0",
"@vue/cli-plugin-babel": "3.6.0",
"@vue/cli-plugin-eslint": "^5.0.4",

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

@ -1424,7 +1424,12 @@ export default {
aggregation: 'Aggregation',
filter_between: 'Between',
field_not_empty: 'Field can not be empty',
summary_not_empty: 'Summary can not be empty'
summary_not_empty: 'Summary can not be empty',
reserve_zero: '0',
reserve_one: '1',
reserve_two: '2',
proportion: 'Proportion',
label_content: 'Label Content'
},
dataset: {
parse_filed: 'Parse Field',

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

@ -1424,7 +1424,12 @@ export default {
aggregation: '聚合方式',
filter_between: '介於',
field_not_empty: '字段不能為空',
summary_not_empty: '聚合方式不能為空'
summary_not_empty: '聚合方式不能為空',
reserve_zero: '取整',
reserve_one: '一位',
reserve_two: '两位',
proportion: '佔比',
label_content: '標籤展示'
},
dataset: {
parse_filed: '解析字段',

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

@ -1423,7 +1423,12 @@ export default {
aggregation: '聚合方式',
filter_between: '介于',
field_not_empty: '字段不能为空',
summary_not_empty: '聚合方式不能为空'
summary_not_empty: '聚合方式不能为空',
reserve_zero: '取整',
reserve_one: '一位',
reserve_two: '两位',
proportion: '占比',
label_content: '标签展示'
},
dataset: {
parse_filed: '解析字段',

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

@ -132,7 +132,8 @@ export const DEFAULT_LABEL = {
decimalCount: 2, // 小数位数
thousandSeparator: true// 千分符
},
reserveDecimalCount: 2 // 百分比堆叠柱状图保留小数位数
reserveDecimalCount: 2, // 百分比堆叠柱状图,饼图，环形图保留小数位数
labelContent: ['dimension', 'proportion'] // 饼图，环形图指标展示项
}
export const DEFAULT_TOOLTIP = {
show: true,

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

@ -1,6 +1,7 @@
import { hexColorToRGBA } from '@/views/chart/chart/util'
import { formatterItem, valueFormatter } from '@/views/chart/chart/formatter'
import { DEFAULT_XAXIS_STYLE, DEFAULT_YAXIS_EXT_STYLE, DEFAULT_YAXIS_STYLE } from '@/views/chart/chart/chart'
import { equalsAny } from '@/utils/StringUtils'
export function getPadding(chart) {
if (chart.drill) {
@ -120,7 +121,7 @@ export function getLabel(chart) {
if (customAttr.label) {
const l = JSON.parse(JSON.stringify(customAttr.label))
if (l.show) {
if (chart.type === 'pie') {
if (equalsAny(chart.type, 'pie', 'pie-donut')) {
label = {
type: l.position,
autoRotate: false
@ -130,6 +131,13 @@ export function getLabel(chart) {
position: l.position,
offsetY: -8
}
} else if (equalsAny(chart.type, 'pie-rose', 'pie-donut-rose')) {
label = {
autoRotate: true
}
if (l.position === 'inner') {
label.offset = -10
}
} else {
label = {
position: l.position
@ -195,10 +203,32 @@ export function getLabel(chart) {
for (let i = 0; i < yAxis.length; i++) {
const f = yAxis[i]
if (f.name === param.category) {
let formatterCfg = formatterItem
if (f.formatterCfg) {
res = valueFormatter(param.value, f.formatterCfg)
formatterCfg = f.formatterCfg
}
// 饼图和环形图格式优化
if (equalsAny(chart.type, 'pie', 'pie-donut')) {
// 这边默认值取指标是为了兼容存量的视图
const labelContent = l.labelContent ?? ['quota']
const contentItems = []
if (labelContent.includes('dimension')) {
contentItems.push(param.field)
}
if (labelContent.includes('quota')) {
contentItems.push(valueFormatter(param.value, formatterCfg))
}
if (labelContent.includes('proportion')) {
const percentage = `${(Math.round(param.percent * 10000) / 100).toFixed(l.reserveDecimalCount)}%`
if (labelContent.length === 3) {
contentItems.push(`(${percentage})`)
} else {
contentItems.push(percentage)
}
}
res = contentItems.join(' ')
} else {
res = valueFormatter(param.value, formatterItem)
res = valueFormatter(param.value, formatterCfg)
}
break
}

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

@ -1083,7 +1083,9 @@ export const TYPE_CONFIGS = [
'show',
'fontSize',
'color',
'position-pie'
'position-pie',
'label-content',
'reserve-decimal-count'
],
'tooltip-selector-ant-v': [
'show',
@ -1141,7 +1143,9 @@ export const TYPE_CONFIGS = [
'show',
'fontSize',
'color',
'position-pie'
'position-pie',
'label-content',
'reserve-decimal-count'
],
'tooltip-selector-ant-v': [
'show',

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

@ -18,6 +18,25 @@
>{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<div v-show="labelForm.show">
<el-form-item
v-show="showProperty('label-content')"
:label="$t('chart.label_content')"
class="form-item"
>
<el-checkbox-group
v-model="labelForm.labelContent"
:label="$t('chart.label_content')"
:min="1"
:max="3"
@change="changeLabelAttr('labelContent')"
>
<el-checkbox
v-for="option in labelContentOptions"
:key="option.value"
:label="option.value"
>{{ option.name }}</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item
v-show="showProperty('fontSize')"
:label="$t('chart.text_fontsize')"
@ -104,7 +123,7 @@
</el-select>
</el-form-item>
<el-form-item
v-show="showProperty('reserve-decimal-count')"
v-show="showProperty('reserve-decimal-count') && (chart.type.includes('percentage') || labelForm.labelContent.includes('proportion'))"
:label="$t('chart.label_reserve_decimal_count')"
class="form-item"
>
@ -292,9 +311,14 @@ export default {
typeList: formatterType,
unitList: unitList,
reserveDecimalCountOptions: [
{ name: '取整', value: 0 },
{ name: '一位', value: 1 },
{ name: '两位', value: 2 }
{ name: this.$t('chart.reserve_zero'), value: 0 },
{ name: this.$t('chart.reserve_one'), value: 1 },
{ name: this.$t('chart.reserve_two'), value: 2 }
],
labelContentOptions: [
{ name: this.$t('chart.dimension'), value: 'dimension' },
{ name: this.$t('chart.quota'), value: 'quota' },
{ name: this.$t('chart.proportion'), value: 'proportion' }
]
}
},
@ -332,6 +356,12 @@ export default {
if (!this.labelForm.gaugeLabelFormatter) {
this.labelForm.gaugeLabelFormatter = JSON.parse(JSON.stringify(DEFAULT_LABEL.gaugeLabelFormatter))
}
if ((this.labelForm.reserveDecimalCount ?? '') === '') {
this.labelForm.reserveDecimalCount = 2
}
if (!this.labelForm.labelContent) {
this.labelForm.labelContent = ['quota']
}
}
}
},

6
frontend/src/views/chart/group/Group.vue
View File

@ -1036,7 +1036,11 @@ export default {
if (view.render === 'echarts') {
attr.label.position = 'inside'
} else {
attr.label.position = 'inner'
const customStyle = JSON.parse(view.customStyle)
customStyle.legend.show = false
view.customStyle = JSON.stringify(customStyle)
attr.label.show = true
attr.label.position = 'outer'
}
// 环形图默认内径，玫瑰图为 外径 * 0.5，饼图为 外径 * 0.7
if (type === 'pie-donut') {

15
frontend/src/views/chart/view/ChartEdit.vue
View File

@ -3078,11 +3078,22 @@ export default {
setChartDefaultOptions() {
const type = this.view.type
const customAttr = this.view.customAttr
const customStyle = this.view.customStyle
if (type.includes('pie')) {
if (this.view.render === 'echarts') {
this.view.customAttr.label.position = 'inside'
customAttr.label.position = 'inside'
} else {
this.view.customAttr.label.position = 'inner'
customStyle.legend.show = false
customAttr.label.show = true
customAttr.label.position = 'outer'
}
// 环形图默认内径，玫瑰图为 外径 * 0.5，饼图为 外径 * 0.7
if (type === 'pie-donut') {
customAttr.size.pieInnerRadius = Math.round(customAttr.size.pieOuterRadius * 0.7)
}
if (type === 'pie-donut-rose') {
customAttr.size.pieInnerRadius = Math.round(customAttr.size.pieOuterRadius * 0.5)
}
} else if (type.includes('line')) {
this.view.customAttr.label.position = 'top'