dongjunchuan/de
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #11408 from dataease/pr@dev-v2@perf_chart_js_load

Browse Source 
perf(图表): AntV 图表加载优化 #11098
This commit is contained in:
wisonic-s 2024-08-07 14:59:41 +08:00 committed by GitHub
commit 81aba75575
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
27 changed files with 110 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
core/core-frontend/src/views/chart/components/js/panel/charts/bar/bar.ts
View File

@ -1,4 +1,4 @@
import { Column, ColumnOptions } from '@antv/g2plot/esm/plots/column'
import type { Column, ColumnOptions } from '@antv/g2plot/esm/plots/column'
import { cloneDeep, isEmpty } from 'lodash-es'
import {
G2PlotChartView,
@ -11,7 +11,7 @@ import {
setUpGroupSeriesColor,
setUpStackSeriesColor
} from '@/views/chart/components/js/util'
import { Datum } from '@antv/g2plot'
import type { Datum } from '@antv/g2plot'
import { valueFormatter } from '@/views/chart/components/js/formatter'
import {
BAR_AXIS_TYPE,
@ -22,6 +22,7 @@ import { getPadding, setGradientColor } from '@/views/chart/components/js/panel/
import { useI18n } from '@/hooks/web/useI18n'
import { DEFAULT_LABEL } from '@/views/chart/components/editor/util/chart'
import { clearExtremum, extremumEvt } from '@/views/chart/components/js/extremumUitl'
import { Group } from '@antv/g-canvas'
const { t } = useI18n()
const DEFAULT_DATA: any[] = []
@ -93,7 +94,7 @@ export class Bar extends G2PlotChartView<ColumnOptions, Column> {
}
}
drawChart(drawOptions: G2PlotDrawOptions<Column>): Column {
async drawChart(drawOptions: G2PlotDrawOptions<Column>): Promise<Column> {
const { chart, container, action } = drawOptions
if (!chart?.data?.data?.length) {
clearExtremum(chart)
@ -106,8 +107,9 @@ export class Bar extends G2PlotChartView<ColumnOptions, Column> {
data
}
const options: ColumnOptions = this.setupOptions(chart, initOptions)
const newChart = new Column(container, options)
let newChart = null
const { Column: ColumnClass } = await import('@antv/g2plot/esm/plots/column')
newChart = new ColumnClass(container, options)
newChart.on('interval:click', action)
extremumEvt(newChart, chart, options, container)
return newChart
@ -146,7 +148,7 @@ export class Bar extends G2PlotChartView<ColumnOptions, Column> {
return
}
const value = valueFormatter(data.value, labelCfg.formatterCfg)
const group = new G2PlotChartView.engine.Group({})
const group = new Group({})
group.addShape({
type: 'text',
attrs: {

15
core/core-frontend/src/views/chart/components/js/panel/charts/bar/bidirectional-bar.ts
View File

@ -9,14 +9,16 @@ import {
getYAxisExt,
setGradientColor
} from '@/views/chart/components/js/panel/common/common_antv'
import {
import type {
BidirectionalBar as G2BidirectionalBar,
BidirectionalBarOptions
} from '@antv/g2plot/esm/plots/bidirectional-bar'
import { flow, hexColorToRGBA, parseJson } from '@/views/chart/components/js/util'
import { useI18n } from '@/hooks/web/useI18n'
import { valueFormatter } from '@/views/chart/components/js/formatter'
import { Options } from '@antv/g2plot/esm'
import type { Options } from '@antv/g2plot/esm'
import { Group } from '@antv/g-canvas'
const { t } = useI18n()
/**
* 对称柱状图
@ -101,7 +103,7 @@ export class BidirectionalHorizontalBar extends G2PlotChartView<
}
}
drawChart(drawOptions: G2PlotDrawOptions<G2BidirectionalBar>): G2BidirectionalBar {
async drawChart(drawOptions: G2PlotDrawOptions<G2BidirectionalBar>): Promise<G2BidirectionalBar> {
const { chart, container, action } = drawOptions
if (!chart.data?.data?.length) {
return
@ -150,8 +152,11 @@ export class BidirectionalHorizontalBar extends G2PlotChartView<
}
}
}
const { BidirectionalBar: BidirectionalBarClass } = await import(
'@antv/g2plot/esm/plots/bidirectional-bar'
)
// 开始渲染
const newChart = new G2BidirectionalBar(container, options)
const newChart = new BidirectionalBarClass(container, options)
newChart.on('interval:click', action)
newChart.on('element:click', ev => {
@ -451,7 +456,7 @@ export class BidirectionalHorizontalBar extends G2PlotChartView<
} else {
res = valueFormatter(value, l.labelFormatter)
}
const group = new G2PlotChartView.engine.Group({})
const group = new Group({})
const isValue = param['series-field-key'] === 'value'
const textAlign = isValue && layoutHorizontal ? 'end' : 'start'
const isMiddle = label.position === 'middle'

10
core/core-frontend/src/views/chart/components/js/panel/charts/bar/horizontal-bar.ts
View File

@ -2,7 +2,7 @@ import {
G2PlotChartView,
G2PlotDrawOptions
} from '@/views/chart/components/js/panel/types/impl/g2plot'
import { Bar, BarOptions } from '@antv/g2plot/esm/plots/bar'
import type { Bar, BarOptions } from '@antv/g2plot/esm/plots/bar'
import { getPadding, setGradientColor } from '@/views/chart/components/js/panel/common/common_antv'
import { cloneDeep } from 'lodash-es'
import {
@ -17,9 +17,10 @@ import {
BAR_EDITOR_PROPERTY,
BAR_EDITOR_PROPERTY_INNER
} from '@/views/chart/components/js/panel/charts/bar/common'
import { Datum } from '@antv/g2plot/esm/types/common'
import type { Datum } from '@antv/g2plot/esm/types/common'
import { useI18n } from '@/hooks/web/useI18n'
import { DEFAULT_LABEL } from '@/views/chart/components/editor/util/chart'
import { Group } from '@antv/g-canvas'
const { t } = useI18n()
const DEFAULT_DATA = []
@ -105,7 +106,7 @@ export class HorizontalBar extends G2PlotChartView<BarOptions, Bar> {
]
}
drawChart(drawOptions: G2PlotDrawOptions<Bar>): Bar {
async drawChart(drawOptions: G2PlotDrawOptions<Bar>): Promise<Bar> {
const { chart, container, action } = drawOptions
if (!chart.data?.data?.length) {
return
@ -122,6 +123,7 @@ export class HorizontalBar extends G2PlotChartView<BarOptions, Bar> {
const options = this.setupOptions(chart, initOptions)
const { Bar } = await import('@antv/g2plot/esm/plots/bar')
// 开始渲染
const newChart = new Bar(container, options)
@ -238,7 +240,7 @@ export class HorizontalBar extends G2PlotChartView<BarOptions, Bar> {
return
}
const value = valueFormatter(data.value, labelCfg.formatterCfg)
const group = new G2PlotChartView.engine.Group({})
const group = new Group({})
group.addShape({
type: 'text',
attrs: {

5
core/core-frontend/src/views/chart/components/js/panel/charts/bar/progress-bar.ts
View File

@ -2,7 +2,7 @@ import { G2PlotChartView, G2PlotDrawOptions } from '../../types/impl/g2plot'
import { flow, hexColorToRGBA, parseJson } from '../../../util'
import { setGradientColor } from '../../common/common_antv'
import { useI18n } from '@/hooks/web/useI18n'
import { Bar as G2Progress, BarOptions } from '@antv/g2plot/esm/plots/bar'
import type { Bar as G2Progress, BarOptions } from '@antv/g2plot/esm/plots/bar'
import {
BAR_AXIS_TYPE,
BAR_EDITOR_PROPERTY_INNER
@ -66,7 +66,7 @@ export class ProgressBar extends G2PlotChartView<BarOptions, G2Progress> {
appendPadding: [0, 0, 10, 0]
}
drawChart(drawOptions: G2PlotDrawOptions<G2Progress>): G2Progress {
async drawChart(drawOptions: G2PlotDrawOptions<G2Progress>): Promise<G2Progress> {
const { chart, container, action } = drawOptions
if (!chart.data?.data?.length) {
return
@ -128,6 +128,7 @@ export class ProgressBar extends G2PlotChartView<BarOptions, G2Progress> {
}
const options = this.setupOptions(chart, initOptions)
const { Bar: G2Progress } = await import('@antv/g2plot/esm/plots/bar')
// 开始渲染
const newChart = new G2Progress(container, options)

7
core/core-frontend/src/views/chart/components/js/panel/charts/bar/range-bar.ts
View File

@ -2,7 +2,7 @@ import {
G2PlotChartView,
G2PlotDrawOptions
} from '@/views/chart/components/js/panel/types/impl/g2plot'
import { Bar, BarOptions } from '@antv/g2plot/esm/plots/bar'
import type { Bar, BarOptions } from '@antv/g2plot/esm/plots/bar'
import { getPadding, setGradientColor } from '@/views/chart/components/js/panel/common/common_antv'
import { cloneDeep, find } from 'lodash-es'
import { flow, hexColorToRGBA, parseJson } from '@/views/chart/components/js/util'
@ -107,7 +107,7 @@ export class RangeBar extends G2PlotChartView<BarOptions, Bar> {
]
}
drawChart(drawOptions: G2PlotDrawOptions<Bar>): Bar {
async drawChart(drawOptions: G2PlotDrawOptions<Bar>): Promise<Bar> {
const { chart, container, action } = drawOptions
if (!chart.data?.data?.length) {
return
@ -163,8 +163,9 @@ export class RangeBar extends G2PlotChartView<BarOptions, Bar> {
const options = this.setupOptions(chart, initOptions)
const { Bar: BarClass } = await import('@antv/g2plot/esm/plots/bar')
// 开始渲染
const newChart = new Bar(container, options)
const newChart = new BarClass(container, options)
newChart.on('interval:click', action)

5
core/core-frontend/src/views/chart/components/js/panel/charts/bar/waterfall.ts
View File

@ -1,4 +1,4 @@
import { WaterfallOptions, Waterfall as G2Waterfall } from '@antv/g2plot/esm/plots/waterfall'
import type { WaterfallOptions, Waterfall as G2Waterfall } from '@antv/g2plot/esm/plots/waterfall'
import { G2PlotChartView, G2PlotDrawOptions } from '../../types/impl/g2plot'
import { flow, hexColorToRGBA, parseJson } from '../../../util'
import { valueFormatter } from '../../../formatter'
@ -60,7 +60,7 @@ export class Waterfall extends G2PlotChartView<WaterfallOptions, G2Waterfall> {
]
}
axis: AxisType[] = ['xAxis', 'yAxis', 'filter', 'drill', 'extLabel', 'extTooltip']
public drawChart(drawOptions: G2PlotDrawOptions<G2Waterfall>): G2Waterfall {
async drawChart(drawOptions: G2PlotDrawOptions<G2Waterfall>): Promise<G2Waterfall> {
const { chart, container, action } = drawOptions
if (!chart.data?.data) {
return
@ -83,6 +83,7 @@ export class Waterfall extends G2PlotChartView<WaterfallOptions, G2Waterfall> {
]
}
const options = this.setupOptions(chart, baseOptions)
const { Waterfall: G2Waterfall } = await import('@antv/g2plot/esm/plots/waterfall')
const newChart = new G2Waterfall(container, options)
newChart.on('interval:click', action)
return newChart

8
core/core-frontend/src/views/chart/components/js/panel/charts/line/area.ts
View File

@ -2,7 +2,7 @@ import {
G2PlotChartView,
G2PlotDrawOptions
} from '@/views/chart/components/js/panel/types/impl/g2plot'
import { Area as G2Area, AreaOptions } from '@antv/g2plot/esm/plots/area'
import type { Area as G2Area, AreaOptions } from '@antv/g2plot/esm/plots/area'
import { getPadding, setGradientColor } from '@/views/chart/components/js/panel/common/common_antv'
import { cloneDeep } from 'lodash-es'
import {
@ -22,6 +22,7 @@ import { Datum } from '@antv/g2plot/esm/types/common'
import { useI18n } from '@/hooks/web/useI18n'
import { DEFAULT_LABEL } from '@/views/chart/components/editor/util/chart'
import { clearExtremum, extremumEvt } from '@/views/chart/components/js/extremumUitl'
import { Group } from '@antv/g-canvas'
const { t } = useI18n()
const DEFAULT_DATA = []
@ -94,7 +95,7 @@ export class Area extends G2PlotChartView<AreaOptions, G2Area> {
]
}
drawChart(drawOptions: G2PlotDrawOptions<G2Area>): G2Area {
async drawChart(drawOptions: G2PlotDrawOptions<G2Area>): Promise<G2Area> {
const { chart, container, action } = drawOptions
if (!chart.data.data?.length) {
clearExtremum(chart)
@ -110,6 +111,7 @@ export class Area extends G2PlotChartView<AreaOptions, G2Area> {
}
// options
const options = this.setupOptions(chart, initOptions)
const { Area: G2Area } = await import('@antv/g2plot/esm/plots/area')
// 开始渲染
const newChart = new G2Area(container, options)
@ -150,7 +152,7 @@ export class Area extends G2PlotChartView<AreaOptions, G2Area> {
return
}
const value = valueFormatter(data.value, labelCfg.formatterCfg)
const group = new G2PlotChartView.engine.Group({})
const group = new Group({})
group.addShape({
type: 'text',
attrs: {

10
core/core-frontend/src/views/chart/components/js/panel/charts/line/line.ts
View File

@ -2,7 +2,7 @@ import {
G2PlotChartView,
G2PlotDrawOptions
} from '@/views/chart/components/js/panel/types/impl/g2plot'
import { Line as G2Line, LineOptions } from '@antv/g2plot/esm/plots/line'
import type { Line as G2Line, LineOptions } from '@antv/g2plot/esm/plots/line'
import { getPadding } from '../../common/common_antv'
import {
flow,
@ -17,10 +17,11 @@ import {
LINE_EDITOR_PROPERTY,
LINE_EDITOR_PROPERTY_INNER
} from '@/views/chart/components/js/panel/charts/line/common'
import { Datum } from '@antv/g2plot/esm/types/common'
import type { Datum } from '@antv/g2plot/esm/types/common'
import { useI18n } from '@/hooks/web/useI18n'
import { DEFAULT_LABEL } from '@/views/chart/components/editor/util/chart'
import { clearExtremum, extremumEvt } from '@/views/chart/components/js/extremumUitl'
import { Group } from '@antv/g-canvas'
const { t } = useI18n()
const DEFAULT_DATA = []
@ -46,7 +47,7 @@ export class Line extends G2PlotChartView<LineOptions, G2Line> {
type: 'q'
}
}
drawChart(drawOptions: G2PlotDrawOptions<G2Line>): G2Line {
async drawChart(drawOptions: G2PlotDrawOptions<G2Line>): Promise<G2Line> {
const { chart, action, container } = drawOptions
if (!chart.data.data?.length) {
clearExtremum(chart)
@ -105,6 +106,7 @@ export class Line extends G2PlotChartView<LineOptions, G2Line> {
]
}
const options = this.setupOptions(chart, initOptions)
const { Line: G2Line } = await import('@antv/g2plot/esm/plots/line')
// 开始渲染
const newChart = new G2Line(container, options)
@ -147,7 +149,7 @@ export class Line extends G2PlotChartView<LineOptions, G2Line> {
return
}
const value = valueFormatter(data.value, labelCfg.formatterCfg)
const group = new G2PlotChartView.engine.Group({})
const group = new Group({})
group.addShape({
type: 'text',
attrs: {

9
core/core-frontend/src/views/chart/components/js/panel/charts/line/stock-line.ts
View File

@ -2,12 +2,12 @@ import {
G2PlotChartView,
G2PlotDrawOptions
} from '@/views/chart/components/js/panel/types/impl/g2plot'
import { Mix, MixOptions } from '@antv/g2plot/esm/plots/mix'
import type { Mix, MixOptions } from '@antv/g2plot/esm/plots/mix'
import { flow, hexColorToRGBA, parseJson } from '@/views/chart/components/js/util'
import { LINE_EDITOR_PROPERTY_INNER } from '@/views/chart/components/js/panel/charts/line/common'
import { useI18n } from '@/hooks/web/useI18n'
import { valueFormatter } from '@/views/chart/components/js/formatter'
import { Options } from '@antv/g2plot/esm'
import type { Options } from '@antv/g2plot/esm'
const { t } = useI18n()
const DEFAULT_DATA = []
@ -206,7 +206,7 @@ export class StockLine extends G2PlotChartView<MixOptions, Mix> {
})
}
drawChart(drawOptions: G2PlotDrawOptions<Mix>): Mix {
async drawChart(drawOptions: G2PlotDrawOptions<Mix>): Promise<Mix> {
const { chart, action, container } = drawOptions
if (!chart.data.data?.length) {
return
@ -341,7 +341,8 @@ export class StockLine extends G2PlotChartView<MixOptions, Mix> {
...averageLines
]
})
const plot = new Mix(container, option)
const { Mix: MixClass } = await import('@antv/g2plot/esm/plots/mix')
const plot = new MixClass(container, option)
this.registerEvent(data, plot, averagesLineData)
plot.on('schema:click', evt => {
const selectSchema = evt.data.data[xAxisDataeaseName]

5
core/core-frontend/src/views/chart/components/js/panel/charts/liquid/liquid.ts
View File

@ -2,7 +2,7 @@ import {
G2PlotChartView,
G2PlotDrawOptions
} from '@/views/chart/components/js/panel/types/impl/g2plot'
import { Liquid as G2Liquid, LiquidOptions } from '@antv/g2plot/esm/plots/liquid'
import type { Liquid as G2Liquid, LiquidOptions } from '@antv/g2plot/esm/plots/liquid'
import { flow, hexColorToRGBA, parseJson } from '@/views/chart/components/js/util'
import { DEFAULT_MISC } from '@/views/chart/components/editor/util/chart'
import { valueFormatter } from '@/views/chart/components/js/formatter'
@ -50,7 +50,7 @@ export class Liquid extends G2PlotChartView<LiquidOptions, G2Liquid> {
}
}
drawChart(drawOptions: G2PlotDrawOptions<G2Liquid>): G2Liquid {
async drawChart(drawOptions: G2PlotDrawOptions<G2Liquid>): Promise<G2Liquid> {
const { chart, container } = drawOptions
if (!chart.data?.series) {
return
@ -59,6 +59,7 @@ export class Liquid extends G2PlotChartView<LiquidOptions, G2Liquid> {
percent: 0
}
const options = this.setupOptions(chart, initOptions)
const { Liquid: G2Liquid } = await import('@antv/g2plot/esm/plots/liquid')
// 开始渲染
return new G2Liquid(container, options)
}

7
core/core-frontend/src/views/chart/components/js/panel/charts/map/map.ts
View File

@ -2,7 +2,7 @@ import {
L7PlotChartView,
L7PlotDrawOptions
} from '@/views/chart/components/js/panel/types/impl/l7plot'
import { Choropleth, ChoroplethOptions } from '@antv/l7plot/dist/esm/plots/choropleth'
import type { Choropleth, ChoroplethOptions } from '@antv/l7plot/dist/esm/plots/choropleth'
import {
filterChartDataByRange,
flow,
@ -17,7 +17,7 @@ import {
mapRendered,
mapRendering
} from '@/views/chart/components/js/panel/common/common_antv'
import { FeatureCollection } from '@antv/l7plot/dist/esm/plots/choropleth/types'
import type { FeatureCollection } from '@antv/l7plot/dist/esm/plots/choropleth/types'
import { cloneDeep, defaultsDeep } from 'lodash-es'
import { useI18n } from '@/hooks/web/useI18n'
import { valueFormatter } from '../../../formatter'
@ -27,7 +27,7 @@ import {
MAP_EDITOR_PROPERTY_INNER,
MapMouseEvent
} from '@/views/chart/components/js/panel/charts/map/common'
import { CategoryLegendListItem } from '@antv/l7plot-component/dist/lib/types/legend'
import type { CategoryLegendListItem } from '@antv/l7plot-component/dist/lib/types/legend'
import createDom from '@antv/dom-util/esm/create-dom'
import {
CONTAINER_TPL,
@ -143,6 +143,7 @@ export class Map extends L7PlotChartView<ChoroplethOptions, Choropleth> {
}
const context = { drawOption, geoJson }
options = this.setupOptions(chart, options, context)
const { Choropleth } = await import('@antv/l7plot/dist/esm/plots/choropleth')
const view = new Choropleth(container, options)
this.configZoomButton(chart, view)
mapRendering(container)

13
core/core-frontend/src/views/chart/components/js/panel/charts/others/chart-mix.ts
View File

@ -2,7 +2,7 @@ import {
G2PlotChartView,
G2PlotDrawOptions
} from '@/views/chart/components/js/panel/types/impl/g2plot'
import { DualAxes, DualAxesOptions } from '@antv/g2plot/esm/plots/dual-axes'
import type { DualAxes, DualAxesOptions } from '@antv/g2plot/esm/plots/dual-axes'
import {
getAnalyse,
getLabel,
@ -21,10 +21,11 @@ import {
CHART_MIX_EDITOR_PROPERTY_INNER,
MixChartBasicStyle
} from './chart-mix-common'
import { Datum } from '@antv/g2plot/esm/types/common'
import type { Datum } from '@antv/g2plot/esm/types/common'
import { useI18n } from '@/hooks/web/useI18n'
import { DEFAULT_LABEL } from '@/views/chart/components/editor/util/chart'
import { Options } from '@antv/g2plot/esm'
import type { Options } from '@antv/g2plot/esm'
import { Group } from '@antv/g-canvas'
const { t } = useI18n()
const DEFAULT_DATA = []
@ -62,7 +63,7 @@ export class ColumnLineMix extends G2PlotChartView<DualAxesOptions, DualAxes> {
type: 'q'
}
}
drawChart(drawOptions: G2PlotDrawOptions<DualAxes>): DualAxes {
async drawChart(drawOptions: G2PlotDrawOptions<DualAxes>): Promise<DualAxes> {
const { chart, action, container } = drawOptions
if (!chart.data?.left?.data?.length && !chart.data?.right?.data?.length) {
return
@ -138,7 +139,7 @@ export class ColumnLineMix extends G2PlotChartView<DualAxesOptions, DualAxes> {
]
}
const options = this.setupOptions(chart, initOptions)
const { DualAxes } = await import('@antv/g2plot/esm/plots/dual-axes')
// 开始渲染
const newChart = new DualAxes(container, options)
@ -190,7 +191,7 @@ export class ColumnLineMix extends G2PlotChartView<DualAxesOptions, DualAxes> {
return
}
const value = valueFormatter(data.value, labelCfg.formatterCfg)
const group = new G2PlotChartView.engine.Group({})
const group = new Group({})
group.addShape({
type: 'text',
attrs: {

5
core/core-frontend/src/views/chart/components/js/panel/charts/others/funnel.ts
View File

@ -1,4 +1,4 @@
import { FunnelOptions, Funnel as G2Funnel } from '@antv/g2plot/esm/plots/funnel'
import type { FunnelOptions, Funnel as G2Funnel } from '@antv/g2plot/esm/plots/funnel'
import { G2PlotChartView, G2PlotDrawOptions } from '../../types/impl/g2plot'
import { flow, setUpSingleDimensionSeriesColor } from '@/views/chart/components/js/util'
import { getPadding } from '../../common/common_antv'
@ -53,7 +53,7 @@ export class Funnel extends G2PlotChartView<FunnelOptions, G2Funnel> {
}
}
public drawChart(drawOptions: G2PlotDrawOptions<G2Funnel>): G2Funnel {
async drawChart(drawOptions: G2PlotDrawOptions<G2Funnel>): Promise<G2Funnel> {
const { chart, container, action } = drawOptions
if (!chart.data?.data) {
return
@ -104,6 +104,7 @@ export class Funnel extends G2PlotChartView<FunnelOptions, G2Funnel> {
}
}
const options = this.setupOptions(chart, baseOptions)
const { Funnel: G2Funnel } = await import('@antv/g2plot/esm/plots/funnel')
const newChart = new G2Funnel(container, options)
newChart.on('interval:click', action)
return newChart

5
core/core-frontend/src/views/chart/components/js/panel/charts/others/gauge.ts
View File

@ -2,7 +2,7 @@ import {
G2PlotChartView,
G2PlotDrawOptions
} from '@/views/chart/components/js/panel/types/impl/g2plot'
import { Gauge as G2Gauge, GaugeOptions } from '@antv/g2plot/esm/plots/gauge'
import type { Gauge as G2Gauge, GaugeOptions } from '@antv/g2plot/esm/plots/gauge'
import { flow, parseJson } from '@/views/chart/components/js/util'
import {
DEFAULT_LABEL,
@ -64,7 +64,7 @@ export class Gauge extends G2PlotChartView<GaugeOptions, G2Gauge> {
}
}
drawChart(drawOptions: G2PlotDrawOptions<G2Gauge>): G2Gauge {
async drawChart(drawOptions: G2PlotDrawOptions<G2Gauge>): Promise<G2Gauge> {
const { chart, container, scale } = drawOptions
if (!chart.data?.series) {
return
@ -96,6 +96,7 @@ export class Gauge extends G2PlotChartView<GaugeOptions, G2Gauge> {
}
}
const options = this.setupOptions(chart, initOptions, { scale })
const { Gauge: G2Gauge } = await import('@antv/g2plot/esm/plots/gauge')
return new G2Gauge(container, options)
}

5
core/core-frontend/src/views/chart/components/js/panel/charts/others/quadrant.ts
View File

@ -2,7 +2,7 @@ import {
G2PlotChartView,
G2PlotDrawOptions
} from '@/views/chart/components/js/panel/types/impl/g2plot'
import { ScatterOptions, Scatter as G2Scatter } from '@antv/g2plot/esm/plots/scatter'
import type { ScatterOptions, Scatter as G2Scatter } from '@antv/g2plot/esm/plots/scatter'
import { flow, parseJson, setUpSingleDimensionSeriesColor } from '../../../util'
import { valueFormatter } from '@/views/chart/components/js/formatter'
import { useI18n } from '@/hooks/web/useI18n'
@ -121,7 +121,7 @@ export class Quadrant extends G2PlotChartView<ScatterOptions, G2Scatter> {
return [...new Set(arr.map(JSON.stringify))].map(JSON.parse) as T[]
}
public drawChart(drawOptions: G2PlotDrawOptions<G2Scatter>) {
async drawChart(drawOptions: G2PlotDrawOptions<G2Scatter>): Promise<G2Scatter> {
const { chart, container, action, quadrantDefaultBaseline } = drawOptions
if (!chart.data?.data) {
return
@ -203,6 +203,7 @@ export class Quadrant extends G2PlotChartView<ScatterOptions, G2Scatter> {
}
const options = this.setupOptions(chart, baseOptions)
const { Scatter: G2Scatter } = await import('@antv/g2plot/esm/plots/scatter')
const newChart = new G2Scatter(container, options)
newChart.on('point:click', action)
newChart.on('click', () => quadrantDefaultBaseline(defaultBaselineQuadrant))

10
core/core-frontend/src/views/chart/components/js/panel/charts/others/radar.ts
View File

@ -1,11 +1,12 @@
import { RadarOptions, Radar as G2Radar } from '@antv/g2plot/esm/plots/radar'
import type { RadarOptions, Radar as G2Radar } from '@antv/g2plot/esm/plots/radar'
import { G2PlotChartView, G2PlotDrawOptions } from '../../types/impl/g2plot'
import { flow, parseJson } from '../../../util'
import { getPadding } from '../../common/common_antv'
import { valueFormatter } from '../../../formatter'
import { Datum } from '@antv/g2plot/esm/types/common'
import type { Datum } from '@antv/g2plot/esm/types/common'
import { useI18n } from '@/hooks/web/useI18n'
import { DEFAULT_LABEL } from '@/views/chart/components/editor/util/chart'
import { Group } from '@antv/g-canvas'
const { t } = useI18n()
@ -59,7 +60,7 @@ export class Radar extends G2PlotChartView<RadarOptions, G2Radar> {
}
}
public drawChart(drawOptions: G2PlotDrawOptions<G2Radar>): G2Radar {
async drawChart(drawOptions: G2PlotDrawOptions<G2Radar>): Promise<G2Radar> {
const { chart, container, action } = drawOptions
if (!chart.data?.data) {
return
@ -112,6 +113,7 @@ export class Radar extends G2PlotChartView<RadarOptions, G2Radar> {
]
}
const options = this.setupOptions(chart, baseOptions)
const { Radar: G2Radar } = await import('@antv/g2plot/esm/plots/radar')
const newChart = new G2Radar(container, options)
newChart.on('point:click', action)
return newChart
@ -149,7 +151,7 @@ export class Radar extends G2PlotChartView<RadarOptions, G2Radar> {
return
}
const value = valueFormatter(data.value, labelCfg.formatterCfg)
const group = new G2PlotChartView.engine.Group({})
const group = new Group({})
group.addShape({
type: 'text',
attrs: {

6
core/core-frontend/src/views/chart/components/js/panel/charts/others/sankey.ts
View File

@ -2,7 +2,7 @@ import {
G2PlotChartView,
G2PlotDrawOptions
} from '@/views/chart/components/js/panel/types/impl/g2plot'
import { Sankey, SankeyOptions } from '@antv/g2plot/esm/plots/sankey'
import type { Sankey, SankeyOptions } from '@antv/g2plot/esm/plots/sankey'
import { getPadding, setGradientColor } from '@/views/chart/components/js/panel/common/common_antv'
import { cloneDeep, get } from 'lodash-es'
import { flow, hexColorToRGBA, parseJson } from '@/views/chart/components/js/util'
@ -95,7 +95,7 @@ export class RangeBar extends G2PlotChartView<SankeyOptions, Sankey> {
]
}
drawChart(drawOptions: G2PlotDrawOptions<Sankey>): Sankey {
async drawChart(drawOptions: G2PlotDrawOptions<Sankey>): Promise<Sankey> {
const { chart, container, action } = drawOptions
if (!chart.data?.data?.length) {
return
@ -158,7 +158,7 @@ export class RangeBar extends G2PlotChartView<SankeyOptions, Sankey> {
}
const options = this.setupOptions(chart, initOptions)
const { Sankey } = await import('@antv/g2plot/esm/plots/sankey')
// 开始渲染
const newChart = new Sankey(container, options)

5
core/core-frontend/src/views/chart/components/js/panel/charts/others/scatter.ts
View File

@ -2,7 +2,7 @@ import {
G2PlotChartView,
G2PlotDrawOptions
} from '@/views/chart/components/js/panel/types/impl/g2plot'
import { ScatterOptions, Scatter as G2Scatter } from '@antv/g2plot/esm/plots/scatter'
import type { ScatterOptions, Scatter as G2Scatter } from '@antv/g2plot/esm/plots/scatter'
import { flow, parseJson } from '../../../util'
import { valueFormatter } from '../../../formatter'
import { getPadding } from '../../common/common_antv'
@ -85,7 +85,7 @@ export class Scatter extends G2PlotChartView<ScatterOptions, G2Scatter> {
limit: 1
}
}
public drawChart(drawOptions: G2PlotDrawOptions<G2Scatter>) {
async drawChart(drawOptions: G2PlotDrawOptions<G2Scatter>): Promise<G2Scatter> {
const { chart, container, action } = drawOptions
if (!chart.data?.data) {
return
@ -131,6 +131,7 @@ export class Scatter extends G2PlotChartView<ScatterOptions, G2Scatter> {
]
}
const options = this.setupOptions(chart, baseOptions)
const { Scatter: G2Scatter } = await import('@antv/g2plot/esm/plots/scatter')
const newChart = new G2Scatter(container, options)
newChart.on('point:click', action)
return newChart

3
core/core-frontend/src/views/chart/components/js/panel/charts/others/treemap.ts
View File

@ -55,7 +55,7 @@ export class Treemap extends G2PlotChartView<TreemapOptions, G2Treemap> {
}
}
public drawChart(drawOptions: G2PlotDrawOptions<G2Treemap>): G2Treemap {
async drawChart(drawOptions: G2PlotDrawOptions<G2Treemap>): Promise<G2Treemap> {
const { chart, container, action } = drawOptions
if (!chart.data?.data?.length) {
return
@ -102,6 +102,7 @@ export class Treemap extends G2PlotChartView<TreemapOptions, G2Treemap> {
]
}
const options = this.setupOptions(chart, baseOptions)
const { Treemap: G2Treemap } = await import('@antv/g2plot/esm/plots/treemap')
const newChart = new G2Treemap(container, options)
newChart.on('polygon:click', action)
return newChart

5
core/core-frontend/src/views/chart/components/js/panel/charts/others/word-cloud.ts
View File

@ -2,7 +2,7 @@ import {
G2PlotChartView,
G2PlotDrawOptions
} from '@/views/chart/components/js/panel/types/impl/g2plot'
import { WordCloud as G2WordCloud, WordCloudOptions } from '@antv/g2plot/esm/plots/word-cloud'
import type { WordCloud as G2WordCloud, WordCloudOptions } from '@antv/g2plot/esm/plots/word-cloud'
import { flow, parseJson } 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'
@ -56,7 +56,7 @@ export class WordCloud extends G2PlotChartView<WordCloudOptions, G2WordCloud> {
limit: 1
}
}
drawChart(drawOptions: G2PlotDrawOptions<G2WordCloud>): G2WordCloud {
async drawChart(drawOptions: G2PlotDrawOptions<G2WordCloud>): Promise<G2WordCloud> {
const { chart, container, action } = drawOptions
if (chart?.data) {
// data
@ -80,6 +80,7 @@ export class WordCloud extends G2PlotChartView<WordCloudOptions, G2WordCloud> {
interactions: []
}
const options = this.setupOptions(chart, initOptions)
const { WordCloud: G2WordCloud } = await import('@antv/g2plot/esm/plots/word-cloud')
const newChart = new G2WordCloud(container, options)
newChart.on('point:click', param => {
action({ x: param.x, y: param.y, data: { data: param.data.data.datum } })

8
core/core-frontend/src/views/chart/components/js/panel/charts/pie/pie.ts
View File

@ -2,7 +2,7 @@ import {
G2PlotChartView,
G2PlotDrawOptions
} from '@/views/chart/components/js/panel/types/impl/g2plot'
import { Pie as G2Pie, PieOptions } from '@antv/g2plot/esm/plots/pie'
import type { Pie as G2Pie, PieOptions } from '@antv/g2plot/esm/plots/pie'
import {
flow,
hexColorToRGBA,
@ -20,7 +20,7 @@ import {
PIE_EDITOR_PROPERTY,
PIE_EDITOR_PROPERTY_INNER
} from '@/views/chart/components/js/panel/charts/pie/common'
import { Datum } from '@antv/g2plot/esm/types/common'
import type { Datum } from '@antv/g2plot/esm/types/common'
import { add } from 'mathjs'
import isEmpty from 'lodash-es/isEmpty'
import { cloneDeep } from 'lodash-es'
@ -35,7 +35,7 @@ export class Pie extends G2PlotChartView<PieOptions, G2Pie> {
}
axisConfig = PIE_AXIS_CONFIG
drawChart(drawOptions: G2PlotDrawOptions<G2Pie>): G2Pie {
async drawChart(drawOptions: G2PlotDrawOptions<G2Pie>): Promise<G2Pie> {
const { chart, container, action } = drawOptions
if (!chart.data?.data?.length) {
return
@ -114,7 +114,7 @@ export class Pie extends G2PlotChartView<PieOptions, G2Pie> {
}
}
const options = this.setupOptions(chart, initOptions)
const { Pie: G2Pie } = await import('@antv/g2plot/esm/plots/pie')
const newChart = new G2Pie(container, options)
newChart.on('interval:click', action)
return newChart

5
core/core-frontend/src/views/chart/components/js/panel/charts/pie/rose.ts
View File

@ -26,7 +26,7 @@ export class Rose extends G2PlotChartView<RoseOptions, G2Rose> {
propertyInner: EditorPropertyInner = PIE_EDITOR_PROPERTY_INNER
axisConfig = PIE_AXIS_CONFIG
drawChart(drawOptions: G2PlotDrawOptions<G2Rose>): G2Rose {
async drawChart(drawOptions: G2PlotDrawOptions<G2Rose>): Promise<G2Rose> {
const { chart, container, action } = drawOptions
if (!chart?.data?.data?.length) {
return
@ -79,9 +79,8 @@ export class Rose extends G2PlotChartView<RoseOptions, G2Rose> {
}
}
const options = this.setupOptions(chart, baseOptions)
// custom color
// options.color = antVCustomColor(chart)
const { Rose: G2Rose } = await import('@antv/g2plot/esm/plots/rose')
// 开始渲染
const plot = new G2Rose(container, options)

10
core/core-frontend/src/views/chart/components/js/panel/types/impl/g2plot.ts
View File

@ -1,5 +1,5 @@
import { PickOptions } from '@antv/g2plot/esm/core/plot'
import { Plot } from '@antv/g2plot/esm/core/plot'
import type { PickOptions } from '@antv/g2plot/esm/core/plot'
import type { Plot } from '@antv/g2plot/esm/core/plot'
import {
getAnalyse,
getAnalyseHorizontal,
@ -18,7 +18,7 @@ import {
ChartLibraryType,
ChartWrapper
} from '@/views/chart/components/js/panel/types'
import { getEngine } from '@antv/g2/esm/core'
import {
getColor,
getGroupColor,
@ -79,14 +79,12 @@ export abstract class G2PlotChartView<
O extends PickOptions = PickOptions,
P extends Plot<O> = Plot<O>
> extends AntVAbstractChartView {
protected static engine = getEngine('canvas')
/**
* 根据参数构建图表对象然后返回
* @param drawOptions 图表配置参数
* @return 生成的图表对象，类型为 Plot 的子类
*/
public abstract drawChart(drawOptions: G2PlotDrawOptions<P>): G2PlotWrapper<O, P> | P
public abstract drawChart(drawOptions: G2PlotDrawOptions<P>): G2PlotWrapper<O, P> | P | Promise<P>
protected configTheme(chart: Chart, options: O): O {
const theme = getTheme(chart)

4
core/core-frontend/src/views/chart/components/js/panel/types/impl/l7.ts
View File

@ -1,4 +1,4 @@
import { Scene } from '@antv/l7-scene'
import type { Scene } from '@antv/l7-scene'
import {
AntVAbstractChartView,
AntVDrawOptions,
@ -7,7 +7,7 @@ import {
} from '@/views/chart/components/js/panel/types'
import { cloneDeep, defaultsDeep } from 'lodash-es'
import { parseJson } from '@/views/chart/components/js/util'
import { ILayer } from '@antv/l7plot'
import type { ILayer } from '@antv/l7plot'
import {
configL7Label,
configL7Tooltip,

8
core/core-frontend/src/views/chart/components/js/panel/types/impl/l7plot.ts
View File

@ -1,7 +1,7 @@
import { ViewLevel } from '@antv/l7plot/dist/esm/plots/choropleth/types'
import { FeatureCollection } from '@antv/l7plot/dist/esm/plots/choropleth/types'
import { PlotOptions } from '@antv/l7plot/dist/esm/types/plot'
import { Plot as L7Plot } from '@antv/l7plot/dist/esm/core/plot'
import type { ViewLevel } from '@antv/l7plot/dist/esm/plots/choropleth/types'
import type { FeatureCollection } from '@antv/l7plot/dist/esm/plots/choropleth/types'
import type { PlotOptions } from '@antv/l7plot/dist/esm/types/plot'
import type { Plot as L7Plot } from '@antv/l7plot/dist/esm/core/plot'
import {
configL7Label,
configL7Legend,

2
core/core-frontend/src/views/chart/components/js/panel/types/impl/s2.ts
View File

@ -3,7 +3,7 @@ import {
AntVDrawOptions,
ChartLibraryType
} from '@/views/chart/components/js/panel/types'
import {
import type {
S2Theme,
SpreadSheet,
Style,

6
core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue
View File

@ -225,7 +225,7 @@ const renderChart = async (view, callback?) => {
await renderL7(chart, chartView as L7ChartView<any, any>, callback)
break
case ChartLibraryType.G2_PLOT:
renderG2Plot(chart, chartView as G2PlotChartView<any, any>)
await renderG2Plot(chart, chartView as G2PlotChartView<any, any>)
callback?.()
break
default:
@ -233,9 +233,9 @@ const renderChart = async (view, callback?) => {
}
}
let myChart = null
const renderG2Plot = (chart, chartView: G2PlotChartView<any, any>) => {
const renderG2Plot = async (chart, chartView: G2PlotChartView<any, any>) => {
myChart?.destroy()
myChart = chartView.drawChart({
myChart = await chartView.drawChart({
chartObj: myChart,
container: containerId,
chart: chart,