-
Notifications
You must be signed in to change notification settings - Fork 140
Open
ziwu7/WebApp
#9Labels
featureNew feature or requestNew feature or request
Description
Is there an existing feature request for this?
- I have searched the existing feature requests
Description
目标代码
WebApp/source/page/Map/component/EChartsMap.tsx
Lines 40 to 139 in 7986606
| @component({ tagName: 'echarts-map' }) | |
| @observer | |
| export class EChartsMap | |
| extends HTMLElement | |
| implements WebCell<EChartsMapProps> | |
| { | |
| @attribute | |
| @observable | |
| accessor mapUrl = ''; | |
| @attribute | |
| @observable | |
| accessor mapName = 'map'; | |
| @observable | |
| accessor chartOptions: EChartsOption = {}; | |
| chart: EChartsType; | |
| mountedCallback() { | |
| this.classList.add('w-100', 'h-100'); | |
| this.chart = init(this); | |
| this.listen(); | |
| this.loadData(); | |
| self.addEventListener('resize', () => { | |
| this.chart.resize(); | |
| this.adjustLabel(); | |
| }); | |
| } | |
| adjustLabel() { | |
| this.emit('chartlabeladjust', this.chart); | |
| } | |
| listen() { | |
| const { chart, chartOptions } = this; | |
| const { data } = chartOptions.baseOption.timeline; | |
| // implement hover-then-click on mobile devices | |
| let hovered = ''; | |
| chart | |
| .on('mouseover', 'series', ({ name }) => { | |
| // prevent click event to trigger immediately | |
| setTimeout(() => (hovered = name)); | |
| }) | |
| .on('mouseout', 'series', () => { | |
| hovered = ''; | |
| }) | |
| .on('click', 'series', params => { | |
| if (hovered) { | |
| this.emit('seriesclick', params); | |
| hovered = ''; | |
| } | |
| }) | |
| .on('click', 'timeline', ({ dataIndex }) => { | |
| const formattedDate = formatDate(dataIndex, 'YYYY-MM-DD'); | |
| chart.dispatchAction({ | |
| type: 'timelineChange', | |
| // index of time point | |
| currentIndex: data.findIndex(d => d === dataIndex) | |
| }); | |
| getHistory(formattedDate).then(this.updateChartData); | |
| }); | |
| } | |
| async loadData() { | |
| const { chart, mapUrl, mapName, chartOptions } = this; | |
| chart.showLoading(); | |
| const data = await (await fetch(mapUrl)).json(); | |
| for (const { properties } of data.features) | |
| properties.name = long2short(properties.name); | |
| registerMap(mapName, data); | |
| chart.setOption(chartOptions); | |
| this.adjustLabel(); | |
| chart.hideLoading(); | |
| } | |
| updateChartData = (newData: Province[]) => | |
| this.chart.setOption({ | |
| series: [ | |
| { | |
| data: newData.map(item => ({ | |
| name: item.provinceShortName, | |
| value: item.confirmedCount | |
| })) | |
| } | |
| ] | |
| }); | |
| } |
Use Case
No response
Proposed Solution
No response
Metadata
Metadata
Assignees
Labels
featureNew feature or requestNew feature or request
Type
Projects
Status
To do