diff --git a/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts b/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts
index 510086322b..f563b01184 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts
@@ -24,9 +24,10 @@ import {
import substitute from '@antv/util/esm/substitute'
import type { Plot as L7Plot, PlotOptions } from '@antv/l7plot/dist/esm'
import { Zoom } from '@antv/l7'
-import { createL7Icon } from '@antv/l7-component/es/utils/icon'
import { DOM } from '@antv/l7-utils'
import { Scene } from '@antv/l7-scene'
+import { type IZoomControlOption } from '@antv/l7-component'
+import { PositionType } from '@antv/l7-core'
export function getPadding(chart: Chart): number[] {
if (chart.drill) {
@@ -828,7 +829,8 @@ export function configL7Label(chart: Chart): false | LabelOptions {
visible: label.show,
style: {
fill: label.color,
- fontSize: label.fontSize
+ fontSize: label.fontSize,
+ fontWeight: 'bold'
}
}
}
@@ -970,7 +972,13 @@ export function configL7Legend(chart: Chart): LegendOptions | false {
}
}
}
-class CustomZoom extends Zoom {
+const ZOOM_IN_BTN =
+ ''
+const RESET_BTN =
+ ''
+const ZOOM_OUT_BTN =
+ ''
+export class CustomZoom extends Zoom {
resetButtonGroup(container) {
DOM.clearChildren(container)
this['zoomInButton'] = this['createButton'](
@@ -980,9 +988,8 @@ class CustomZoom extends Zoom {
container,
this.zoomIn
)
- const resetBtnIconText = createL7Icon('l7-icon-round')
this['zoomResetButton'] = this['createButton'](
- resetBtnIconText,
+ this.controlOption['resetText'],
'Reset',
'l7-button-control',
container,
@@ -1008,15 +1015,7 @@ class CustomZoom extends Zoom {
container,
this.zoomOut
)
- const { buttonColor, buttonBackground } = this.controlOption as any
- if (buttonColor) {
- const elements = [
- this.controlOption.zoomInText,
- this.controlOption.zoomOutText,
- resetBtnIconText
- ] as HTMLElement[]
- setStyle(elements, 'fill', buttonColor)
- }
+ const { buttonBackground } = this.controlOption as any
const elements = [this['zoomResetButton'], this['zoomInButton'], this['zoomOutButton']]
if (buttonBackground) {
setStyle(elements, 'background', buttonBackground)
@@ -1024,6 +1023,28 @@ class CustomZoom extends Zoom {
setStyle(elements, 'border-bottom', 'none')
this['updateDisabled']()
}
+ public getDefault(option: Partial) {
+ const { buttonColor } = option as any
+ let zoomInText = ZOOM_IN_BTN
+ let zoomOutText = ZOOM_OUT_BTN
+ let resetText = RESET_BTN
+ if (buttonColor) {
+ zoomInText = zoomInText.replace('${fill}', buttonColor)
+ zoomOutText = zoomOutText.replace('${fill}', buttonColor)
+ resetText = resetText.replace('${fill}', buttonColor)
+ }
+ return {
+ ...option,
+ position: PositionType.BOTTOMRIGHT,
+ name: 'zoom',
+ zoomInText,
+ zoomInTitle: 'Zoom in',
+ zoomOutText,
+ zoomOutTitle: 'Zoom out',
+ resetText,
+ showZoom: false
+ } as IZoomControlOption
+ }
}
export function configL7Zoom(chart: Chart, plot: L7Plot | Scene) {
const { basicStyle } = parseJson(chart.customAttr)
@@ -1034,7 +1055,7 @@ export function configL7Zoom(chart: Chart, plot: L7Plot | Scene) {
return
}
const plotScene = plot instanceof Scene ? plot : plot.scene
- plotScene.once('loaded', () => {
+ plot.once('loaded', () => {
const zoomOptions = {
initZoom: plotScene.getZoom(),
center: plotScene.getCenter(),