Auto Commit

src/components/GameChart.vue

@@ -30,6 +30,7 @@
     <div style="display:flex;justify-content: space-between;">
         <div style="flex:1; min-width:600px;height:600px;border: 1px solid #333;">
             <div style="width: 100%;min-width:600px;font-weight: 600;text-align: center;">{{ state.clickCity }}</div>
+            <div style="width: 100%;min-width:600px;font-weight: 600;text-align: left;">渲染地图时间：{{ state.echartDuration }} ms</div>
             <div id="barChartId" style="min-width:600px;height:600px;margin: 0 auto;">
             </div>
         </div>
@@ -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 `<img src=${item.imgSrc} width='20' height='20'/>&nbsp; ${item.name}&nbsp;(${item.status})`
                 }).join('<br>')
-                state.provinceIsTruthCount=isTruthCount
+                state.provinceIsTruthCount = isTruthCount
                 const value = filterData.length
                 return `地区：${name}<br>
                 报名总人数：${value} <br>
@@ -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(() => {