Chart open user dialog

This commit is contained in:
Natsumi
2025-02-18 18:24:40 +13:00
parent 4002e944b9
commit f7530303f6
2 changed files with 14 additions and 6 deletions

View File

@@ -126,8 +126,8 @@
echarts = echartsModule;
}
if (this.activityData.length && echarts) {
// actvity data is ready, but world name data isn't ready
// so init echarts with empty data, redcuce the render time of init screen
// activity data is ready, but world name data isn't ready
// so init echarts with empty data, reduce the render time of init screen
// TODO: move to created lifecycle, init screen faster
this.initEcharts(true);
this.getAllDateOfActivity();
@@ -165,11 +165,11 @@
requestAnimationFrame(() => {
this.echartsInstance.setOption(this.getNewOption(isFirstTime), { lazyUpdate: true });
this.echartsInstance.on('click', 'yAxis', this.hanleClickYAxisLable);
this.echartsInstance.on('click', 'yAxis', this.handleClickYAxisLabel);
this.isLoading = false;
});
},
hanleClickYAxisLable(params) {
handleClickYAxisLabel(params) {
const detailDataIdx = this.activityDetailData.findIndex(
(arr) => arr[0]?.location === this.activityData[params?.dataIndex]?.location
);

View File

@@ -24,7 +24,7 @@
export default {
name: 'InstanceActivityDetail',
inject: ['API'],
inject: ['API', 'showUserDialog'],
props: {
activityDetailData: {
type: Array,
@@ -98,11 +98,18 @@
});
this.echartsInstance.setOption(this.getNewOption(), { lazyUpdate: true });
this.echartsInstance.on('click', 'yAxis', this.handleClickYAxisLabel);
setTimeout(() => {
this.isLoading = false;
}, 200);
},
handleClickYAxisLabel(params) {
const userData = this.activityDetailData[params.dataIndex];
if (userData?.user_id) {
this.showUserDialog(userData.user_id);
}
},
getNewOption() {
const getTooltip = (params) => {
const activityDetailData = this.activityDetailData;
@@ -152,7 +159,8 @@
formatter: (value) => (value.length > 20 ? `${value.slice(0, 20)}...` : value)
},
inverse: true,
data: this.activityDetailData.map((item) => item.display_name)
data: this.activityDetailData.map((item) => item.display_name),
triggerEvent: true
},
xAxis: {
type: 'value',