占比图数据选择展示

2025-07-29 16:10:43 +08:00 · 2025-07-29 16:10:43 +08:00 · 3d9c54c38a
commit 3d9c54c38a
parent 02b9b2f9a1
7 changed files with 95 additions and 18 deletions
--- a/core/core-frontend/src/models/chart/chart-attr.d.ts
+++ b/core/core-frontend/src/models/chart/chart-attr.d.ts
@ -384,6 +384,10 @@ declare interface ChartBasicStyle {
   * 占比图图形底色
   */
  proportionBackgroundColor: string
+  /**
+   * 占比图图形展示选择
+   */
+  proportionSelect:string
 }
 /**
 * 表头属性
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue
+++ b/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"
            />
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue
+++ b/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')">
--- a/core/core-frontend/src/views/chart/components/editor/index.vue
+++ b/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"
--- a/core/core-frontend/src/views/chart/components/editor/util/chart.ts
+++ b/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 = {
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/others/DeTree.ts
+++ b/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: {
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/pie/proportion.ts
+++ b/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
    })
-
-    g2.data(data)
+    let resdata = templatedata
+    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})`;
+  }
 }