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

视图类型增加横向百分比柱状图
https://www.tapd.cn/55578866/prong/stories/view/1155578866001004512

frontend/src/icons/svg/percentage-bar-stack-horizontal.svg

@@ -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>

frontend/src/lang/en.js

@@ -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',

frontend/src/lang/tw.js

@@ -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: '餅圖',

frontend/src/lang/zh.js

@@ -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: '饼图',

frontend/src/views/chart/chart/bar/bar_antv.js

@@ -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) {

frontend/src/views/chart/chart/common/common_antv.js

@@ -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' ||
+            if (equalsAny(chart.type, 'bar-stack', 'line-stack',
-              chart.type === 'line-stack' ||
+              'bar-stack-horizontal', 'percentage-bar-stack', 'percentage-bar-stack-horizontal')) {
-              chart.type === 'bar-stack-horizontal' ||
-              chart.type === 'percentage-bar-stack'
-            ) {
               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' ||
+            if (equalsAny(chart.type, 'bar-stack', 'line-stack',
-              chart.type === 'line-stack' ||
+              'bar-stack-horizontal', 'percentage-bar-stack', 'percentage-bar-stack-horizontal')) {
-              chart.type === 'bar-stack-horizontal' ||
-              chart.type === 'percentage-bar-stack') {
               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]

frontend/src/views/chart/chart/util.js

@@ -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',

frontend/src/views/chart/components/ChartComponentG2.vue

@@ -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)