占比图监听尺寸大小

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

@@ -539,7 +539,7 @@ export const DEFAULT_GRAPHIC_TEXT_STYLE: ChartGraphicTextStyle = {
       positionX:'50',
       positionY:'50',
       fontSize: 18,
-      fill: '#000000',
+      fill: '#ffffff',
       fontWeight: 500,
       textAlign: 'center',
       offsetX:0,

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

@@ -22,20 +22,30 @@ import {
  */
 class ChartWrapper {
   chartInstance: Chart
+  private resizeObserver?: ResizeObserver
 
-  constructor(chartInstance: Chart) {
+  constructor(chartInstance: Chart, resizeObserver?: ResizeObserver) {
     this.chartInstance = chartInstance
+    this.resizeObserver = resizeObserver
   }
 
   destroy() {
     this.chartInstance?.destroy?.()
+
+    // 清理 ResizeObserver
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect()
+      this.resizeObserver = null
+    }
   }
+
   render() {
     this.chartInstance?.render?.()
   }
 }
 
 export class G2Pie extends G2ChartView {
+  private resizeObserver: ResizeObserver | null = null
 
   axis: AxisType[] = PIE_AXIS_TYPE
   // properties = PIE_EDITOR_PROPERTY
@@ -44,7 +54,6 @@ export class G2Pie extends G2ChartView {
     'border-style',
     'basic-style-selector',
     'title-selector',
-    'label-selector',
     'tooltip-selector',
     'jump-set',
     'linkage',
@@ -53,7 +62,7 @@ export class G2Pie extends G2ChartView {
   propertyInner: EditorPropertyInner = {
     ...PIE_EDITOR_PROPERTY_INNER,
     'basic-style-selector': ['colors', 'alpha', 'radius','innerRadius', 'seriesColor','proportionBackgroundColor'],
-    'tooltip-selector': [...PIE_EDITOR_PROPERTY_INNER['tooltip-selector'], 'carousel'],
+    'tooltip-selector': [...PIE_EDITOR_PROPERTY_INNER['tooltip-selector']],
     
   }
   axisConfig = PIE_AXIS_CONFIG
@@ -64,13 +73,12 @@ export class G2Pie extends G2ChartView {
   }
 
   async drawChart({ container, chart }: { container: HTMLElement; chart: ChartObj }) {
-   
+    const element = document.getElementById(container)
     const customAttr = parseJson(chart.customAttr)
     const customStyle = parseJson(chart.customStyle)
+    console.log(chart,96564)
     const innerRadius = customAttr.basicStyle.innerRadius ?? 60
     const data = cloneDeep(chart.data?.data || [])
-    const { radius = 0.75, alpha = 1, colors = [] } = customAttr.basicStyle
-
     const colorList = customAttr.basicStyle.colors.map(i =>
       hexColorToRGBA(i, customAttr.basicStyle.alpha)
     )
@@ -85,21 +93,43 @@ export class G2Pie extends G2ChartView {
     })
 
     g2.data(data)
-
     g2.legend(false)
-    g2.tooltip({
+    if(customAttr.tooltip.show == true){
-      showMarkers: false,
+      g2.tooltip({
-      showContent: (datum) => {
+        showMarkers: false,
-        return !datum.some(item => item?.name === '其他');
+        enterable:true,
-      },
+        showContent: (datum) => {
-    })
+          console.log(datum)
+          return !datum.some(item => item?.name === '其他');
+        },
+        
+        domStyles: {
+          'g2-tooltip': {
+            backgroundColor: customAttr.tooltip.backgroundColor,  // 背景色
+            color: customAttr.tooltip.color,               // 文字颜色
+            boxShadow: '0 2px 2px rgba(0,0,0,0.15)', // 阴影
+            // borderRadius: '4px',         // 圆角
+            // padding: '8px 12px'          // 内边距
+          },
+          'g2-tooltip-title': {
+            fontSize: customAttr.tooltip.fontSize + 'px',
+            // fontWeight: 'bold',
+            // marginBottom: '4px'
+          },
+          'g2-tooltip-list-item': {
+            fontSize: customAttr.tooltip.fontSize + 'px'
+          }
+        }
+      })
+    }else{
+      g2.tooltip(false)
+    }
     g2.facet('rect', {
       fields: ['name'],
       padding: 20,
       showTitle: false,
       eachView: (view, facet) => {
         const data:any = facet.data
-        console.log(customAttr,999)
         let color
         customAttr.basicStyle.seriesColor.forEach((item) => {
           if(data.name == item.name){
@@ -133,7 +163,6 @@ export class G2Pie extends G2ChartView {
             const positionarr:any = []
             positionarr.push(item.positionX + '%')
             positionarr.push(item.positionY + '%')
-            console.log(positionarr)
             if(item.type == '名称' && item.show == true){
               view.annotation().text({
                 position: positionarr,
@@ -164,36 +193,17 @@ export class G2Pie extends G2ChartView {
              }
           })
          }  
-        // view.annotation().text({
-        //   position: [ '50%', '50%' ],
-        //   content: data[0].name,
-        //   style: {
-        //     fontSize: 12,
-        //     fill: '#8c8c8c',
-        //     fontWeight: 300,
-        //     textBaseline: 'bottom',
-        //     textAlign: 'center'
-        //   },
-        //   offsetY: -12,
-        // })
-
-        // view.annotation().text({
-        //   position: ['50%', '50%'],
-        //   content: data[0].value,
-        //   style: {
-        //     fontSize: 18,
-        //     fill: '#fff',
-        //     fontWeight: 500,
-        //     textAlign: 'center'
-        //   },
-        //   offsetY: 10,
-        // })
-
       }
     })
-
     g2.render()
-    return new ChartWrapper(g2)
+    this.resizeObserver = new ResizeObserver(() => {
+      g2.changeSize(element.offsetWidth, element.offsetHeight)
+      // g2.render()
+    })
+
+    this.resizeObserver.observe(element)
+    
+    return new ChartWrapper(g2, this.resizeObserver)
   }
   public setupSeriesColor(chart: ChartObj, data?: any[]): ChartBasicStyle['seriesColor'] {
     return setUpSingleDimensionSeriesColor(chart, data)