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

feat(视图): 增加横向百分比柱状图

Browse Source 
视图类型增加横向百分比柱状图
https://www.tapd.cn/55578866/prong/stories/view/1155578866001004512
This commit is contained in:
wisonic-s 2022-11-24 17:11:05 +08:00
parent 31e4b316d7
commit a40a9b0759
8 changed files with 105 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/icons/svg/percentage-bar-stack-horizontal.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1663834987781" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1963" width="200" height="200"><path transform="rotate(90 319.99999999999994,513.6666870117189) " id="svg_1" d="m-64,641.66667l768,0l0,85.33333l-768,0l0,-85.33333zm21.33333,-341.33334l85.33334,0l0,298.66667l-85.33334,0l0,-298.66667zm640,256l85.33334,0l0,42.66667l-85.33334,0l0,-42.66667zm-533.33333,-213.33333l85.33333,0l0,256l-85.33333,0l0,-256zm106.66667,42.66667l85.33333,0l0,213.33333l-85.33333,0l0,-213.33333zm106.66666,42.66666l85.33334,0l0,170.66667l-85.33334,0l0,-170.66667zm106.66667,42.66667l85.33333,0l0,128l-85.33333,0l0,-128zm106.66667,42.66667l85.33333,0l0,85.33333l-85.33333,0l0,-85.33333z"/><path transform="rotate(90 551,513.3333129882814) " id="svg_2" opacity="0.6" d="m188.33333,278.66667l85.33334,0l0,213.33333l-85.33334,0l0,-213.33333zm640,256l85.33334,0l0,213.33333l-85.33334,0l0,-213.33333zm-533.33333,-213.33334l85.33333,0l0,213.33334l-85.33333,0l0,-213.33334zm106.66667,42.66667l85.33333,0l0,213.33333l-85.33333,0l0,-213.33333zm106.66666,42.66667l85.33334,0l0,213.33333l-85.33334,0l0,-213.33333zm106.66667,42.66666l85.33333,0l0,213.33334l-85.33333,0l0,-213.33334zm106.66667,42.66667l85.33333,0l0,213.33333l-85.33333,0l0,-213.33333z"/><path transform="rotate(90 739,513.6666870117189) " stroke="null" id="svg_3" d="m1016.33333,343l85.33334,0l0,341.33333l-85.33334,0l0,-341.33333zm-640,0l85.33334,0l0,85.33333l-85.33334,0l0,-85.33333zm533.33334,0l85.33333,0l0,298.66667l-85.33333,0l0,-298.66667zm-106.66667,0l85.33333,0l0,256l-85.33333,0l0,-256zm-106.66667,0l85.33334,0l0,213.33333l-85.33334,0l0,-213.33333zm-106.66666,0l85.33333,0l0,170.66667l-85.33333,0l0,-170.66667zm-106.66667,0l85.33333,0l0,128l-85.33333,0l0,-128z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

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

@ -1135,6 +1135,7 @@ export default {
chart_percentage_bar_stack: 'Percentage Stack Bar',
chart_bar_horizontal: 'Horizontal Bar',
chart_bar_stack_horizontal: 'Stack Horizontal Bar',
chart_percentage_bar_stack_horizontal: 'Horizontal Percentage Stack Bar',
chart_line: 'Base Line',
chart_line_stack: 'Stack Line',
chart_pie: 'Pie',

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

@ -1135,6 +1135,7 @@ export default {
chart_percentage_bar_stack: '百分比柱狀圖',
chart_bar_horizontal: '橫嚮柱狀圖',
chart_bar_stack_horizontal: '橫嚮堆疊柱狀圖',
chart_percentage_bar_stack_horizontal: '橫嚮百分比柱狀圖',
chart_line: '基礎摺線圖',
chart_line_stack: '堆疊摺線圖',
chart_pie: '餅圖',

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

@ -1134,6 +1134,7 @@ export default {
chart_percentage_bar_stack: '百分比柱状图',
chart_bar_horizontal: '横向柱状图',
chart_bar_stack_horizontal: '横向堆叠柱状图',
chart_percentage_bar_stack_horizontal: '横向百分比柱状图',
chart_line: '基础折线图',
chart_line_stack: '堆叠折线图',
chart_pie: '饼图',

1
frontend/src/views/chart/chart/bar/bar_antv.js
View File

@ -202,6 +202,7 @@ export function hBaseBarOptionAntV(plot, container, chart, action, isGroup, isSt
} else {
delete options.isStack
}
options.isPercent = chart.type.includes('percentage')
// custom color
options.color = antVCustomColor(chart)
if (customAttr.color.gradient) {

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

@ -1,7 +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'
import { equalsAny, includesAny } from '@/utils/StringUtils'
export function getPadding(chart) {
if (chart.drill) {
@ -166,11 +166,8 @@ export function getLabel(chart) {
extStack = JSON.parse(JSON.stringify(chart.extStack))
}
if (chart.type === 'bar-stack' ||
chart.type === 'line-stack' ||
chart.type === 'bar-stack-horizontal' ||
chart.type === 'percentage-bar-stack'
) {
if (equalsAny(chart.type, 'bar-stack', 'line-stack',
'bar-stack-horizontal', 'percentage-bar-stack', 'percentage-bar-stack-horizontal')) {
let f
if (extStack && extStack.length > 0) {
f = yAxis[0]
@ -189,7 +186,10 @@ export function getLabel(chart) {
f.formatterCfg = formatterItem
}
// 百分比堆叠柱状图保留小数处理
if (chart.type === 'percentage-bar-stack') {
if (chart.type.includes('percentage')) {
if (!param.value) {
return
}
f.formatterCfg.type = 'percent'
f.formatterCfg.decimalCount = l.reserveDecimalCount
f.formatterCfg.thousandSeparator = false
@ -278,10 +278,8 @@ export function getTooltip(chart) {
}
let obj
if (chart.type === 'bar-stack' ||
chart.type === 'line-stack' ||
chart.type === 'bar-stack-horizontal' ||
chart.type === 'percentage-bar-stack') {
if (equalsAny(chart.type, 'bar-stack', 'line-stack',
'bar-stack-horizontal', 'percentage-bar-stack', 'percentage-bar-stack-horizontal')) {
let f
if (extStack && extStack.length > 0) {
obj = { name: param.category, value: param.value }
@ -301,7 +299,11 @@ export function getTooltip(chart) {
if (!f.formatterCfg) {
f.formatterCfg = formatterItem
}
if (chart.type === 'percentage-bar-stack') {
if (chart.type.includes('percentage')) {
if (!param.value) {
obj.value = 0
return obj
}
// 保留小数位数和标签保持一致，这边拿一下标签的配置
const l = JSON.parse(JSON.stringify(customAttr.label))
f.formatterCfg.type = 'percent'
@ -329,7 +331,7 @@ export function getTooltip(chart) {
res = valueFormatter(param.value, formatterItem)
}
}
} else if (chart.type.includes('pie') || chart.type.includes('funnel')) {
} else if (includesAny(chart.type, 'pie', 'funnel')) {
obj = { name: param.field, value: param.value }
for (let i = 0; i < yAxis.length; i++) {
const f = yAxis[i]
@ -339,7 +341,7 @@ export function getTooltip(chart) {
res = valueFormatter(param.value, formatterItem)
}
}
} else if ((chart.type.includes('bar') || chart.type.includes('line') || chart.type.includes('scatter') || chart.type.includes('radar') || chart.type.includes('area')) && !chart.type.includes('group')) {
} else if (includesAny(chart.type, 'bar', 'line', 'scatter', 'radar', 'area') && !chart.type.includes('group')) {
obj = { name: param.category, value: param.value }
for (let i = 0; i < yAxis.length; i++) {
const f = yAxis[i]

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

@ -1149,6 +1149,87 @@ export const TYPE_CONFIGS = [
]
}
},
{
render: 'antv',
category: 'chart.chart_type_compare',
value: 'percentage-bar-stack-horizontal',
title: 'chart.chart_percentage_bar_stack_horizontal',
icon: 'percentage-bar-stack-horizontal',
properties: [
'color-selector',
'size-selector-ant-v',
'label-selector-ant-v',
'tooltip-selector-ant-v',
'x-axis-selector-ant-v',
'y-axis-selector-ant-v',
'title-selector-ant-v',
'legend-selector-ant-v'
],
propertyInner: {
'color-selector': [
'value',
'colorPanel',
'customColor',
'gradient',
'alpha'
],
'size-selector-ant-v': [
'barDefault',
'barGap'
],
'label-selector-ant-v': [
'show',
'fontSize',
'color',
'position-h',
'reserveDecimalCount'
],
'tooltip-selector-ant-v': [
'show',
'textStyle'
],
'x-axis-selector-ant-v': [
'show',
'position',
'name',
'nameTextStyle',
'axisValue',
'splitLine',
'axisForm',
'axisLabel'
],
'y-axis-selector-ant-v': [
'show',
'position',
'name',
'nameTextStyle',
'splitLine',
'axisForm',
'axisLabel'
],
'title-selector-ant-v': [
'show',
'title',
'fontSize',
'color',
'hPosition',
'isItalic',
'isBolder',
'remarkShow',
'fontFamily',
'letterSpace',
'fontShadow'
],
'legend-selector-ant-v': [
'show',
'icon',
'orient',
'textStyle',
'hPosition',
'vPosition'
]
}
},
{
render: 'antv',
category: 'chart.chart_type_distribute',

5
frontend/src/views/chart/components/ChartComponentG2.vue
View File

@ -57,6 +57,7 @@ import TitleRemark from '@/views/chart/view/TitleRemark'
import { DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
import { baseMixOptionAntV } from '@/views/chart/chart/mix/mix_antv'
import ChartTitleUpdate from './ChartTitleUpdate.vue'
import { equalsAny } from '@/utils/StringUtils'
export default {
name: 'ChartComponentG2',
@ -233,13 +234,13 @@ export default {
this.myChart = baseBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction, true, false)
} else if (chart.type === 'bar-group') {
this.myChart = baseBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction, true, false)
} else if (chart.type === 'bar-stack' || chart.type === 'percentage-bar-stack') {
} else if (equalsAny(chart.type, 'bar-stack', 'percentage-bar-stack')) {
this.myChart = baseBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction, false, true)
} else if (chart.type === 'bar-group-stack') {
this.myChart = baseBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction, true, true)
} else if (chart.type === 'bar-horizontal') {
this.myChart = hBaseBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction, true, false)
} else if (chart.type === 'bar-stack-horizontal') {
} else if (equalsAny(chart.type, 'bar-stack-horizontal', 'percentage-bar-stack-horizontal')) {
this.myChart = hBaseBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction, false, true)
} else if (chart.type === 'line') {
this.myChart = baseLineOptionAntV(this.myChart, this.chartId, chart, this.antVAction)