Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

用 ECharts-JSX 重写地图图表 #100

Open
1 task done
TechQuery opened this issue Nov 25, 2024 · 0 comments · Fixed by ziwu7/WebApp#9 · May be fixed by #101
Open
1 task done

用 ECharts-JSX 重写地图图表 #100

TechQuery opened this issue Nov 25, 2024 · 0 comments · Fixed by ziwu7/WebApp#9 · May be fixed by #101
Labels
feature New feature or request

Comments

@TechQuery
Copy link
Member

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
feature New feature or request
Projects
WebApp
Status: To do
Milestone
No milestone
1 participant
@TechQuery