diff --git a/core/core-frontend/src/views/chart/components/editor/util/chart.ts b/core/core-frontend/src/views/chart/components/editor/util/chart.ts index cb68a08..e62be3f 100644 --- a/core/core-frontend/src/views/chart/components/editor/util/chart.ts +++ b/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, diff --git 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 index f49842d..60d2ca5 100644 --- 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 @@ -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({ - showMarkers: false, - showContent: (datum) => { - return !datum.some(item => item?.name === '其他'); - }, - }) + if(customAttr.tooltip.show == true){ + g2.tooltip({ + showMarkers: false, + 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)