占比图数据选择展示

core/core-frontend/src/models/chart/chart-attr.d.ts

@@ -384,6 +384,10 @@ declare interface ChartBasicStyle {
    * 占比图图形底色
    */
   proportionBackgroundColor: string
+  /**
+   * 占比图图形展示选择
+   */
+  proportionSelect:string
 }
 /**
  * 表头属性

core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue

@@ -96,6 +96,10 @@ const props = defineProps({
   allFields: {
     type: Array,
     required: true
+  },
+  allGraphcs:{
+    type: Array,
+    required: true
   }
 })
 
@@ -279,6 +283,7 @@ watch(
               :property-inner="propertyInnerAll['basic-style-selector']"
               :themes="themes"
               :chart="chart"
+              :allGraphcs = "props.allGraphcs"
               @onBasicStyleChange="onBasicStyleChange"
               @onMiscChange="onMiscChange"
             />

core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue

@@ -41,7 +41,10 @@ const props = defineProps({
   },
   propertyInner: {
     type: Array<string>
-  }
+  },
+  allGraphcs: {
+    type: Object
+  },
 })
 const showProperty = prop => {
   const has = props.propertyInner?.includes(prop)
@@ -369,6 +372,7 @@ onMounted(() => {
     }
   })
 })
+
 </script>
 <template>
   <el-form size="small" style="width: 100%">
@@ -1483,7 +1487,6 @@ onMounted(() => {
         </el-col>
       </el-row>
     </div>
-
     <div class="alpha-setting" v-if="showProperty('radius')">
       <label class="alpha-label" :class="{ dark: 'dark' === themes }">
         {{ t('chart.pie_outer_radius') }}
@@ -1520,6 +1523,23 @@ onMounted(() => {
         </el-col>
       </el-row>
     </div>
+    <!-- 占比图类别隐藏选择 -->
+    <div v-if="showProperty('proportionSelect')" 
+    style="margin-bottom:5px;color:#A6A6A6;font-size:12px;">展示数据切换</div>
+    <div class="alpha-setting" v-if="showProperty('proportionSelect')">
+      <el-select
+        :effect="themes"
+        v-model="state.basicStyleForm.proportionSelect"
+        @change="changeBasicStyle('proportionSelect')" clearable
+      >
+        <el-option
+          v-for="item in props.allGraphcs"
+          :key="item.name"
+          :label="item.name"
+          :value="item.name"
+        />
+      </el-select>
+    </div>
     <!-- pie/rose end -->
     <!-- circle-packing start -->
     <div v-if="showProperty('circleBorderStyle')">

core/core-frontend/src/views/chart/components/editor/index.vue

@@ -63,7 +63,7 @@ import chartViewManager from '@/views/chart/components/js/panel'
 import DatasetSelect from '@/views/chart/components/editor/dataset-select/DatasetSelect.vue'
 import { useDraggable } from '@vueuse/core'
 import { PluginComponent } from '@/components/plugin'
-import { Field, getFieldByDQ, copyChartField, deleteChartField } from '@/api/chart'
+import { Field, getFieldByDQ, copyChartField, deleteChartField, getData } from '@/api/chart'
 import ChartTemplateInfo from '@/views/chart/components/editor/common/ChartTemplateInfo.vue'
 import { XpackComponent } from '@/components/plugin'
 import { useEmbedded } from '@/store/modules/embedded'
@@ -983,7 +983,7 @@ const calcData = (view, resetDrill = false, updateQuery = '') => {
     })
   }
 }
-
+//更新图表数据
 const updateChartData = view => {
   curComponent.value['state'] = 'ready'
   useEmitt().emitter.emit('checkShowEmpty', { allFields: allFields.value, view: view })
@@ -2056,6 +2056,15 @@ const deleteChartFieldItem = id => {
       fieldLoading.value = false
     })
 }
+const allGraphcs:any = ref([])
+const tabchange = (val: any) => { 
+  if((val.props.label == '样式' ||  val.props.name == 'style') && view.value.type == 'pie-proportion'){
+    getData(view.value).then(res => {
+      console.log(res.data.data)
+      allGraphcs.value = res.data.data
+    })
+  }
+}
 </script>
 
 <template>
@@ -2141,7 +2150,7 @@ const deleteChartFieldItem = id => {
                   </div>
                 </div>
               </el-scrollbar>
-              <el-tabs v-else v-model="tabActive" class="tab-header" :class="{ dark: themes === 'dark' }">
+              <el-tabs v-else v-model="tabActive" class="tab-header" :class="{ dark: themes === 'dark' }" @tab-click="tabchange">
                 <el-tab-pane name="data" :label="t('chart.chart_data')" class="padding-tab">
                   <el-container direction="vertical">
                     <el-scrollbar class="has-footer drag_main_area attr-style theme-border-class">
@@ -2832,7 +2841,7 @@ const deleteChartFieldItem = id => {
                           :common-background-pop="curComponent?.commonBackground"
                           :common-border-pop="curComponent?.style" :event-info="curComponent?.events" :chart="view"
                           :themes="themes" :dimension-data="state.dimension" :quota-data="state.quota"
-                          :all-fields="allFields" @onColorChange="onColorChange" @onMiscChange="onMiscChange"
+                          :all-fields="allFields" :all-graphcs="allGraphcs" @onColorChange="onColorChange" @onMiscChange="onMiscChange"
                           @onLabelChange="onLabelChange" @onTooltipChange="onTooltipChange"
                           @onChangeXAxisForm="onChangeXAxisForm" @onChangeYAxisForm="onChangeYAxisForm"
                           @onChangeYAxisExtForm="onChangeYAxisExtForm" @onTextChange="onTextChange"

core/core-frontend/src/views/chart/components/editor/util/chart.ts

@@ -1778,7 +1778,8 @@ export const DEFAULT_BASIC_STYLE: ChartBasicStyle = {
   circlePadding: 0,
   quotaPosition: 'col',
   quotaColLabel: t('dataset.value'),
-  proportionBackgroundColor:'#ffffff'
+  proportionBackgroundColor:'#ffffff',
+  proportionSelect:''
 }
 
 export const BASE_VIEW_CONFIG = {

core/core-frontend/src/views/chart/components/js/panel/charts/others/DeTree.ts

@@ -18,7 +18,6 @@ export class RichTextChartView extends AbstractChartView {
     threshold: ['tableThreshold'],
     'function-cfg': ['emptyDataStrategy']
   }
-  debugger
   axis: AxisType[] = ['xAxis', 'yAxis', 'filter']
   axisConfig: AxisConfig = {
     xAxis: {

core/core-frontend/src/views/chart/components/js/panel/charts/pie/proportion.ts

@@ -10,7 +10,7 @@ import {
 } from '@/views/chart/components/js/util'
 import { getPadding } from '@/views/chart/components/js/panel/common/common_antv'
 import { valueFormatter } from '@/views/chart/components/js/formatter'
-import { cloneDeep } from 'lodash-es'
+import { cloneDeep,set } from 'lodash-es'
 import isEmpty from 'lodash-es/isEmpty'
 import {
   PIE_AXIS_CONFIG,
@@ -18,7 +18,6 @@ import {
   PIE_EDITOR_PROPERTY,
   PIE_EDITOR_PROPERTY_INNER
 } from "@/views/chart/components/js/panel/charts/pie/common";
-
 /**
  * G2 Chart 封装器，支持统一销毁和渲染
  */
@@ -63,7 +62,7 @@ export class G2Pie extends G2ChartView {
   ] as any
   propertyInner: EditorPropertyInner = {
     ...PIE_EDITOR_PROPERTY_INNER,
-    'basic-style-selector': ['colors', 'alpha', 'radius','innerRadius', 'seriesColor','proportionBackgroundColor'],
+    'basic-style-selector': ['colors', 'alpha', 'radius','innerRadius', 'seriesColor','proportionBackgroundColor','proportionSelect'],
     'tooltip-selector': [...PIE_EDITOR_PROPERTY_INNER['tooltip-selector']],
     
   }
@@ -78,10 +77,20 @@ export class G2Pie extends G2ChartView {
     const customAttr = parseJson(chart.customAttr)
     const customStyle = parseJson(chart.customStyle)
     const innerRadius = customAttr.basicStyle.innerRadius ?? 60
-    const data = cloneDeep(chart.data?.data || [])
+    const initdata = cloneDeep(chart.data?.data || [])
     const colorList = customAttr.basicStyle.colors.map(i =>
       hexColorToRGBA(i, customAttr.basicStyle.alpha)
     )
+    let templatedata = []
+    if(customAttr.basicStyle.proportionSelect !== ''){
+      initdata.forEach(item=>{
+        if(item.name == customAttr.basicStyle.proportionSelect){
+          templatedata.push(item)
+        }
+      })
+    }else{
+      templatedata = initdata
+    }
     const g2 = new Chart({
       container,
       autoFit: true
@@ -90,8 +99,15 @@ export class G2Pie extends G2ChartView {
       radius: customAttr.basicStyle.radius / 100,
       innerRadius: innerRadius / 100
     })
-
+    let resdata = templatedata
-    g2.data(data)
+    let numbertype = 'number'
+    if(chart.yAxis[0].formatterCfg.type == 'percent'){
+      numbertype = 'percent'
+      resdata.forEach(item => { 
+        item.value = parseFloat((item.value * 100).toFixed(2));
+      })
+    }
+    g2.data(resdata)
     g2.legend(false)
     const formatterMap = customAttr.tooltip.seriesTooltipFormatter
       ?.filter(i => i.show)
@@ -100,7 +116,7 @@ export class G2Pie extends G2ChartView {
         return pre
       }, {}) as Record<string, SeriesFormatter>
     if(customAttr.tooltip.show == true){
-      this.configTooltip(g2, customAttr, formatterMap);
+      this.configTooltip(g2, customAttr, formatterMap,numbertype);
     }else{
       g2.tooltip(false)
     }
@@ -141,6 +157,19 @@ export class G2Pie extends G2ChartView {
             }else{
               colorval = colorList[0]
             }
+            if (colorval.startsWith('#')) {
+              colorval = hexColorToRGBA(colorval, customAttr.basicStyle.alpha)
+            }
+            if(customAttr.basicStyle.proportionBackgroundColor.startsWith('#')){
+              customAttr.basicStyle.proportionBackgroundColor = hexColorToRGBA(customAttr.basicStyle.proportionBackgroundColor, customAttr.basicStyle.alpha)
+            }
+
+            if(customAttr.basicStyle.proportionBackgroundColor.startsWith('rgb')){
+              customAttr.basicStyle.proportionBackgroundColor = this.rgbToRgba(customAttr.basicStyle.proportionBackgroundColor,customAttr.basicStyle.alpha)
+            }
+            if(colorval.startsWith('rgb')){
+              colorval = this.rgbToRgba(colorval,customAttr.basicStyle.alpha)
+            }
             return name === '其他' ? customAttr.basicStyle.proportionBackgroundColor : colorval;
         })
           .style({
@@ -168,7 +197,7 @@ export class G2Pie extends G2ChartView {
              }else if(item.type == '值' && item.show == true){
               view.annotation().text({
                 position: positionarr,
-                content: data[0].value,
+                content: chart.yAxis[0].formatterCfg.type == 'percent' ? data[0].value + '%' :data[0].value,
                 style: {
                   fontSize: item.fontSize,
                   fill: item.fill,
@@ -196,7 +225,7 @@ export class G2Pie extends G2ChartView {
   public setupSeriesColor(chart: ChartObj, data?: any[]): ChartBasicStyle['seriesColor'] {
     return setUpSingleDimensionSeriesColor(chart, data)
   }
-  protected configTooltip(g2: Chart, customAttr: CustomAttr, formatterMap: Record<string, SeriesFormatter>){
+  protected configTooltip(g2: Chart, customAttr: CustomAttr, formatterMap: Record<string, SeriesFormatter>,numbertype:any){
     // 类型断言，确保customAttr是ChartAttr类型
     const attr = customAttr as ChartAttr;
     
@@ -235,7 +264,10 @@ export class G2Pie extends G2ChartView {
         tooltipItems.forEach(item => {
           const formatter = formatterMap[item.data.quotaList[0].id] ?? (data[0]?.data?.quotaList?.[0] || {})
           const originValue = parseFloat(item.value as string)
-          const value = valueFormatter(originValue, formatter.formatterCfg)
+          let value = valueFormatter(originValue, formatter.formatterCfg)
+          if(numbertype == 'percent'){
+            value = value + '%'
+          }
           const name = isEmpty(formatter.chartShowName) ? formatter.name : formatter.chartShowName
           tooltipContent += `
               <div style="display: flex; align-items: center;font-size:${attr.tooltip.fontSize + 'px'};">
@@ -269,4 +301,11 @@ export class G2Pie extends G2ChartView {
       }
     })
   }
+  protected rgbToRgba(rgb, alpha) {
+    // 提取 RGB 数值
+    const [r, g, b] = rgb.match(/\d+/g).map(Number);
+    
+    // 返回 RGBA 格式
+    return `rgba(${r}, ${g}, ${b}, ${Number(alpha)/100})`;
+  }
 }