diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f0520a4..a7e4182 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8300,4 +8300,4 @@ snapshots: zrender@5.6.0: dependencies: - tslib: 2.3.0 + tslib: 2.3.0 \ No newline at end of file diff --git a/source/page/Map/component/EChartsMap.tsx b/source/page/Map/component/EChartsMap.tsx index 1898997..77046f0 100644 --- a/source/page/Map/component/EChartsMap.tsx +++ b/source/page/Map/component/EChartsMap.tsx @@ -2,7 +2,9 @@ import { DataObject } from 'dom-renderer'; import { WebCell, component, attribute, observer } from 'web-cell'; import { observable } from 'mobx'; import { EChartsOption, EChartsType, init, registerMap } from 'echarts'; +import { formatDate } from 'web-utility'; +import { getHistory, Province } from '../../../service/Epidemic'; import { long2short } from '../adapter'; export interface EChartsMapProps { @@ -92,13 +94,17 @@ export class EChartsMap hovered = ''; } }) - .on('click', 'timeline', ({ dataIndex }) => + .on('click', 'timeline', async ({ dataIndex }) => { + const formattedDate = formatDate(dataIndex, 'YYYY-MM-DD'); chart.dispatchAction({ type: 'timelineChange', // index of time point currentIndex: data.findIndex(d => d === dataIndex) - }) - ); + }); + const newData = await getHistory(formattedDate); + + this.updateChartData(newData); + }); } async loadData() { @@ -119,4 +125,16 @@ export class EChartsMap chart.hideLoading(); } + updateChartData(newData: Province[]) { + this.chart.setOption({ + series: [ + { + data: newData.map(item => ({ + name: item.provinceShortName, + value: item.confirmedCount + })) + } + ] + }); + } } diff --git a/source/page/Map/component/VirusMap.tsx b/source/page/Map/component/VirusMap.tsx index 971347c..5868eb7 100644 --- a/source/page/Map/component/VirusMap.tsx +++ b/source/page/Map/component/VirusMap.tsx @@ -1,6 +1,6 @@ import { WebCell, component, attribute, observer } from 'web-cell'; import { observable } from 'mobx'; -import { Hour } from 'web-utility'; +import { Day, Hour } from 'web-utility'; import { EChartsMapProps, EChartsMap } from './EChartsMap'; import { VirusChart } from './VirusChart'; @@ -238,6 +238,14 @@ export class VirusMap extends HTMLElement implements WebCell { return options; }; + get timelineData() { + const startDate = +new Date('2022-09-01'); + const endDate = +new Date('2022-09-28'); + return Array.from( + { length: (endDate - startDate) / Day + 1 }, + (_, i) => startDate + Day * i + ); + } getSTChartOptions = (data: STMapDataType, options?: any) => { options ||= this.baseOptions(this.name, this.breaks); options['timeline'] = { @@ -246,7 +254,7 @@ export class VirusMap extends HTMLElement implements WebCell { tooltip: {}, playInterval: 1500, currentIndex: data.timeline.length - 1, - data: data.timeline, + data: this.timelineData, left: 'left', right: 0, label: { @@ -264,7 +272,8 @@ export class VirusMap extends HTMLElement implements WebCell { } } }; - const sortedTimeline = data.timeline.slice().sort(); + + const sortedTimeline = [...data.timeline].sort(); return { baseOption: options, diff --git a/source/page/Map/data/province.ts b/source/page/Map/data/province.ts index 06feef3..65cd3ee 100644 --- a/source/page/Map/data/province.ts +++ b/source/page/Map/data/province.ts @@ -1,4 +1,5 @@ -const server_root = 'https://geo.datav.aliyun.com/areas_v3/bound/'; +const server_root = + 'https://oss-toolbox.kaiyuanshe.cn/proxy/geo.datav.aliyun.com/areas_v3/bound/'; export default { 中国: server_root + '100000_full.json', diff --git a/source/service/Epidemic.ts b/source/service/Epidemic.ts index b281bb5..ef9dd77 100644 --- a/source/service/Epidemic.ts +++ b/source/service/Epidemic.ts @@ -85,9 +85,18 @@ export async function getOverall() { return body; } - -export async function getHistory() { - const { body } = await epidemic.get('Area', { Range: '0-199' }); +export async function getHistory(date = '2022-09-01') { + const startOfDay = `${date}T00:00:00`; + const endOfDay = `${date}T23:59:59`; + + const { body } = await epidemic.get( + `Area?${new URLSearchParams([ + ['updateTime', `gt.${startOfDay}`], + ['updateTime', `lt.${endOfDay}`], + ['countryName', 'eq.中国'], + ['limit', '299'] + ])}` + ); const updatedBody = body.map(item => ({ id: item.id,