diff --git a/src/components/GameChart.vue b/src/components/GameChart.vue
index af8ed2b5898ec1b6a1e768a0340e2ad760749ee4..781dd1b2a17983e03757241a9b2dd58e32555cca 100644
--- a/src/components/GameChart.vue
+++ b/src/components/GameChart.vue
@@ -30,6 +30,7 @@
{{ state.clickCity }}
+
渲染地图时间:{{ state.echartDuration }} ms
@@ -63,6 +64,7 @@ const props = defineProps({
})
const state = reactive({
+ echartDuration: 0,
title: 'vue3 ts antd 参赛选手所在城市',
clickCity: '全国',
maxCityNum: 0,
@@ -76,7 +78,7 @@ const state = reactive({
airData: [],
exportLoading: false,
columns: tableGameColumns,
- totalDataSource:[],
+ totalDataSource: [],
dataSource: [],
echartInstance: undefined,
pagination: {
@@ -104,7 +106,7 @@ function initDataSource() {
imgSrc: gameJson[uid].imgSrc,
url: gameJson[uid].url,
ip: gameJson[uid].ip.split(':')[1],
- status: isTruth ? '有效' :gameJson[uid].name==='yma16'?'赛道负责人': '无效'
+ status: isTruth ? '有效' : gameJson[uid].name === 'yma16' ? '赛道负责人' : '无效'
})
// 有效人数
if (isTruth) {
@@ -112,21 +114,21 @@ function initDataSource() {
}
state.total += 1
})
- state.totalDataSource=state.dataSource
+ state.totalDataSource = state.dataSource
state.pagination.current = 1
state.totlaNum = state.total
}
-function filterDatasource(name){
- return state.totalDataSource.filter(item=>{
- return name&&name.toString().includes(item.ip)
- })||[]
+function filterDatasource(name) {
+ return state.totalDataSource.filter(item => {
+ return name && name.toString().includes(item.ip)
+ }) || []
}
function filterName(name) {
state.clickCity = name
state.dataSource = filterDatasource(name)
- state.total=state.dataSource.length
+ state.total = state.dataSource.length
state.pagination.current = 1
}
@@ -134,6 +136,8 @@ function filterMapName(name) {
return filterDatasource(name)
}
onBeforeMount(() => {
+ // 标记开始时刻
+ performance.mark('render-echart-start')
echarts.registerMap('chinaJson', chinaJson)
})
@@ -270,14 +274,14 @@ function renderEchartBar() {
formatter: (params) => {
const { name } = params.data
const filterData = filterMapName(name)
- let isTruthCount=0
+ let isTruthCount = 0
const strInfo = filterData.map(item => {
- if(item.status==='有效'){
+ if (item.status === '有效') {
isTruthCount++
}
return `

${item.name} (${item.status})`
}).join('
')
- state.provinceIsTruthCount=isTruthCount
+ state.provinceIsTruthCount = isTruthCount
const value = filterData.length
return `地区:${name}
报名总人数:${value}
@@ -349,7 +353,7 @@ function renderEchartBar() {
],
}
- console.log('option',option)
+ console.log('option', option)
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option, true);
// 监听
@@ -359,6 +363,14 @@ function renderEchartBar() {
filterName(params.name)
});
window.onresize = myChart.resize;
+ performance.mark('render-echart-end')
+ const measure = performance.measure('render-echart-duration', 'render-echart-start', 'render-echart-end')
+ console.log('measure',measure)
+ console.log('measure type',typeof measure)
+ const duration = measure.duration
+ console.log('duration',duration)
+ state.echartDuration = duration
+
}
onUnmounted(() => {