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

Merge pull request #8529 from dataease/pr@dev@feat_pie_top_n

Browse Source 
feat(视图): 饼图/环形图支持显示 TopN #5620 #7620
This commit is contained in:
wisonic-s 2024-03-14 21:11:53 +08:00 committed by GitHub
commit c3f8ee4182
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 115 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1051,6 +1051,9 @@ export default {
color_technology: 'Technology',
color_simple: 'Simple',
not_alpha: 'Opacity',
top_n_desc: 'Merge data into other',
top_n_input_1: 'Show Top',
top_n_input_2: ',the rest merged to other',
area_border_color: 'Map border',
area_base_color: 'Base map',
size: 'Size',

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

@ -1051,6 +1051,9 @@ export default {
color_technology: '科技',
color_simple: '簡潔',
not_alpha: '不透明度',
top_n_desc: '合併數據',
top_n_input_1: '顯示 Top',
top_n_input_2: ', 其餘合併至其他',
area_border_color: '地圖邊線',
area_base_color: '底圖',
size: '大小',

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

@ -1050,6 +1050,9 @@ export default {
color_technology: '科技',
color_simple: '简洁',
not_alpha: '不透明度',
top_n_desc: '合并数据',
top_n_input_1: '显示 Top',
top_n_input_2: ', 其余合并至其他',
area_border_color: '地图边线',
area_base_color: '底图',
size: '大小',

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

@ -40,7 +40,9 @@ export const DEFAULT_COLOR_CASE = {
mapLineGradient: false,
mapLineSourceColor: '#146C94',
mapLineTargetColor: '#576CBC',
quotaSuffixColor: '#5470c6'
quotaSuffixColor: '#5470c6',
calcTopN: false,
topN: 5,
}
export const DEFAULT_COLOR_CASE_DARK = {
@ -65,7 +67,9 @@ export const DEFAULT_COLOR_CASE_DARK = {
mapLineGradient: false,
mapLineSourceColor: '#2F58CD',
mapLineTargetColor: '#3795BD',
quotaSuffixColor: '#5470c6'
quotaSuffixColor: '#5470c6',
calcTopN: false,
topN: 5,
}
export const DEFAULT_SIZE = {
barDefault: true,

27
core/frontend/src/views/chart/chart/common/common.js
View File

@ -3,6 +3,7 @@ import { DEFAULT_XAXIS_STYLE, DEFAULT_YAXIS_EXT_STYLE, DEFAULT_YAXIS_STYLE } fro
import { formatterItem, valueFormatter } from '@/views/chart/chart/formatter'
import { $success } from '@/utils/message'
import i18n from '@/lang'
import { cloneDeep } from 'lodash'
export function componentStyle(chart_option, chart) {
let xAxisLabelFormatter = null
@ -423,3 +424,29 @@ export const copyString = (content, notify) => {
}
})
}
export const configTopN = (data, chart) => {
if (!data?.length) {
return
}
const color = JSON.parse(chart.customAttr).color
if (!color.calcTopN || data.length <= color.topN) {
return
}
data.sort((a, b) => b.value - a.value)
const otherItems = data.splice(color.topN)
const initOtherItem = {
...cloneDeep(data[0]),
name: i18n.t('datasource.other'),
value: 0,
}
otherItems.reduce((p, n) => {
p.value += n.value ?? 0
return p
}, initOtherItem)
data.push(initOtherItem)
data.forEach((item, i) => {
const curColor = color.colors[i % color.colors.length]
item.itemStyle.color = hexColorToRGBA(curColor, color.alpha)
})
}

23
core/frontend/src/views/chart/chart/common/common_antv.js
View File

@ -2,6 +2,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, includesAny } from '@/utils/StringUtils'
import i18n from '@/lang'
export function getPadding(chart) {
if (chart.drill) {
@ -1235,3 +1236,25 @@ export const TOOLTIP_TPL = '<li class="g2-tooltip-list-item" data-index={index}>
'<span class="g2-tooltip-name">{name}</span>:' +
'<span class="g2-tooltip-value">{value}</span>' +
'</li>'
export const configTopN = (data, chart) => {
if (!data?.length) {
return
}
const color = JSON.parse(chart.customAttr).color
if (!color.calcTopN || data.length <= color.topN) {
return
}
data.sort((a, b) => b.value - a.value)
const otherItems = data.splice(color.topN)
const initOtherItem = {
...data[0],
field: i18n.t('datasource.other'),
name: i18n.t('datasource.other'),
value: 0,
}
otherItems.reduce((p, n) => {
p.value += n.value ?? 0
return p
}, initOtherItem)
data.push(initOtherItem)
}

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

@ -1,5 +1,5 @@
import { hexColorToRGBA } from '@/views/chart/chart/util'
import { componentStyle } from '../common/common'
import { componentStyle, configTopN } from '../common/common'
import { BASE_ECHARTS_SELECT, DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
export function basePieOption(chart_option, chart) {
@ -50,6 +50,7 @@ export function basePieOption(chart_option, chart) {
y.type = 'pie'
chart_option.series[0].data.push(y)
}
configTopN(chart_option.series[0].data, chart)
}
}
componentStyle(chart_option, chart)

4
core/frontend/src/views/chart/chart/pie/pie_antv.js
View File

@ -9,6 +9,7 @@ import {
import { Pie, Rose } from '@antv/g2plot'
import { antVCustomColor } from '@/views/chart/chart/util'
import { configTopN } from '@/views/chart/chart/common/common_antv'
export function basePieOptionAntV(plot, container, chart, action) {
// theme
@ -82,7 +83,8 @@ export function basePieOptionAntV(plot, container, chart, action) {
}
// custom color
options.color = antVCustomColor(chart)
// topN
configTopN(data, chart)
// 开始渲染
if (plot) {
plot.destroy()

12
core/frontend/src/views/chart/chart/util.js
View File

@ -1359,7 +1359,8 @@ export const TYPE_CONFIGS = [
'value',
'colorPanel',
'customColor',
'alpha'
'alpha',
'topN'
],
'size-selector-ant-v': [
'pieOuterRadius'
@ -1418,7 +1419,8 @@ export const TYPE_CONFIGS = [
'value',
'colorPanel',
'customColor',
'alpha'
'alpha',
'topN'
],
'size-selector-ant-v': [
'pieInnerRadius',
@ -2937,7 +2939,8 @@ export const TYPE_CONFIGS = [
'color-selector': [
'value',
'custom',
'alpha'
'alpha',
'topN'
],
'size-selector': [
'pieOuterRadius'
@ -2995,7 +2998,8 @@ export const TYPE_CONFIGS = [
'color-selector': [
'value',
'custom',
'alpha'
'alpha',
'topN'
],
'size-selector': [
'pieInnerRadius',

39
core/frontend/src/views/chart/components/shapeAttr/ColorSelector.vue
View File

@ -327,6 +327,31 @@
@change="changeColorCase('alpha')"
/>
</el-form-item>
<el-form-item
v-show="showProperty('topN')"
:label="$t('chart.top_n_desc')"
class="form-item"
>
<el-checkbox
v-model="colorForm.calcTopN"
@change="changeColorCase('calcTopN')"
/>
</el-form-item>
<el-form-item
v-show="showProperty('topN') && colorForm.calcTopN"
class="form-item top-n-item"
>
<span>{{ $t('chart.top_n_input_1') }}</span>
<el-input-number
v-model="colorForm.topN"
controls-position="right"
size="mini"
:min="1"
:step-strictly="true"
@change="changeColorCase('topN')"
/>
<span>{{ $t('chart.top_n_input_2') }}</span>
</el-form-item>
<el-form-item
v-show="showProperty('mapLineGradient')"
:label="$t('chart.gradient')"
@ -612,7 +637,8 @@ export default {
this.colorForm.mapLineGradient = this.colorForm.mapLineGradient ? this.colorForm.mapLineGradient : DEFAULT_COLOR_CASE.mapLineGradient
this.colorForm.mapLineSourceColor = this.colorForm.mapLineSourceColor ? this.colorForm.mapLineSourceColor : DEFAULT_COLOR_CASE.mapLineSourceColor
this.colorForm.mapLineTargetColor = this.colorForm.mapLineTargetColor ? this.colorForm.mapLineTargetColor : DEFAULT_COLOR_CASE.mapLineTargetColor
this.colorForm.calcTopN = this.colorForm.calcTopN === undefined ? false : this.colorForm.calcTopN
this.colorForm.topN = this.colorForm.topN ?? DEFAULT_COLOR_CASE.topN
this.initCustomColor()
}
}
@ -672,7 +698,7 @@ export default {
}
</script>
<style scoped>
<style scoped lang="scss">
.shape-item {
padding: 6px;
border: none;
@ -752,4 +778,13 @@ span {
padding: 4px 12px;
border: 1px solid #e6e6e6;
}
.top-n-item {
::v-deep .el-input-number {
width: 90px !important;
margin: 0 4px;
}
span {
font-size: 12px;
}
}
</style>