diff --git a/packages/amis/src/renderers/Chart.tsx b/packages/amis/src/renderers/Chart.tsx index bd6d8dbb4..9acd66aee 100644 --- a/packages/amis/src/renderers/Chart.tsx +++ b/packages/amis/src/renderers/Chart.tsx @@ -107,7 +107,7 @@ export interface ChartSchema extends BaseSchema { /** * 刷新时间 */ - interval?: number | string; + interval?: number; name?: SchemaName; @@ -145,7 +145,7 @@ export interface ChartSchema extends BaseSchema { /** * 获取 geo json 文件的地址 */ - mapURL?: string; + mapURL?: SchemaApi; /** * 地图名称 @@ -237,6 +237,7 @@ export class Chart extends React.Component { this.reloadEcharts = debounce(this.reloadEcharts.bind(this), 300); //过于频繁更新 ECharts 会报错 this.handleClick = this.handleClick.bind(this); this.dispatchEvent = this.dispatchEvent.bind(this); + this.loadChartMapData = this.loadChartMapData.bind(this); this.mounted = true; props.config && this.renderChart(props.config); @@ -282,6 +283,20 @@ export class Chart extends React.Component { filter(prevProps.trackExpression, prevProps.data) ) { this.renderChart(props.config || {}); + } else if ( + isApiOutdated(prevProps.mapURL, props.mapURL, prevProps.data, props.data) + ) { + const {source, data, api, config} = props; + this.loadChartMapData(() => { + if (source && isPureVariable(source)) { + const ret = resolveVariableAndFilter(source, data, '| raw'); + ret && this.renderChart(ret); + } else if (api) { + this.reload(); + } else if (config) { + this.renderChart(config || {}); + } + }); } } @@ -291,6 +306,24 @@ export class Chart extends React.Component { clearTimeout(this.timer); } + async loadChartMapData(callBackFn?: () => void) { + const {env, data} = this.props; + let {mapName, mapURL} = this.props; + if (mapURL && mapName && (window as any).echarts) { + if (isPureVariable(mapName)) { + mapName = resolveVariableAndFilter(mapName, data); + } + const mapGeoResult = await env.fetcher(mapURL as Api, data); + if (!mapGeoResult.ok) { + console.warn('fetch map geo error ' + mapURL); + } + (window as any).echarts.registerMap(mapName!, mapGeoResult.data); + } + if (callBackFn) { + callBackFn(); + } + } + async handleClick(ctx: object) { const {onAction, clickAction, data, dispatchEvent} = this.props; @@ -355,18 +388,7 @@ export class Chart extends React.Component { (window as any).ecStat = ecStat?.default || ecStat; if (mapURL && mapName) { - if (isPureVariable(mapURL)) { - mapURL = resolveVariableAndFilter(mapURL, data); - } - if (isPureVariable(mapName)) { - mapName = resolveVariableAndFilter(mapName, data); - } - const mapGeoResult = await env.fetcher(mapURL as Api, data); - if (!mapGeoResult.ok) { - console.warn('fetch map geo error ' + mapURL); - } - - echarts.registerMap(mapName!, mapGeoResult.data); + await this.loadChartMapData(); } if (loadBaiduMap) {