疫情图表性能优化

package.json

@@ -19,7 +19,7 @@
         "classnames": "^2.5.1",
         "dom-renderer": "^2.1.8",
         "echarts": "^5.5.0",
-        "echarts-jsx": "^1.2.0",
+        "echarts-jsx": "^1.2.1",
         "github-web-widget": "^4.0.0-rc.2",
         "koajax": "^1.1.2",
         "mobx": "^6.12.4",
@@ -76,7 +76,7 @@
         "clean": "rm -rf .parcel-cache/ dist/",
         "start:local": "npm run clean  &&  cross-env HTTP_ENV=local  parcel source/index.html --open",
         "start:remote": "npm run clean  &&  cross-env HTTP_ENV=remote  parcel source/index.html --open",
-        "start": "npm run clean  &&  cross-env HTTP_ENV=test  parcel source/index.html --open",
+        "start": "npm run && cross-env HTTP_ENV=test  parcel source/index.html --open",
         "pack-dist": "parcel build source/index.html --public-url . --no-source-maps  &&  tsx fix-script",
         "pack-sw": "rm -f dist/sw.js.map  &&  workbox generateSW",
         "build": "npm run clean  &&  npm run pack-dist  &&  npm run pack-sw"

source/page/Map/adapter/isaaclin.ts

@@ -76,7 +76,7 @@ function fillForward<T extends ProvinceData | CityData | CountryData>(
     series: Series<T>
 ) {
     const all_ts = Object.keys(series).sort();
-
+    
     for (const [i, t] of all_ts.entries())
         if (i < all_ts.length - 1)
             for (const name of Object.keys(series[t])) {
@@ -100,17 +100,17 @@ export function convertProvincesSeries(
     source = [...source].sort(
         ({ updateTime: a }, { updateTime: b }) => +b - +a
     );
-
+    console.log('source',source);
     for (const item of source) {
-        const t = roundTime(+item.updateTime, resolution);
-
+        const date = new Date(item.updateTime);
+        const timestamp = date.getTime();
+        const t = roundTime(timestamp, resolution);
         if (res[t] === undefined) res[t] = {};
-
         const prov = convertProvince(item);
 
         res[t][prov.name] = prov;
     }
-
+    
     if (shouldFillForward) fillForward(res);
 
     return res;
@@ -146,5 +146,9 @@ export const convertCountrySeries = (
     resolution: number
 ): Series<CountryOverviewData> =>
     Object.fromEntries(
-        source.map(item => [roundTime(+item.updateTime, resolution), item])
+        source.map(item => {
+            const date = new Date(item.updateTime);
+            const timestamp = date.getTime();
+            return [roundTime(timestamp, resolution), item]
+        })
     );

source/page/Map/component/HierarchicalVirusMap.tsx

@@ -134,7 +134,7 @@ export class HierarchicalVirusMap
                         )
                     )
                 ];
-
+            
         return (
             <>
                 <VirusMap

source/page/Map/component/VirusChart.tsx

@@ -256,16 +256,25 @@ export class VirusChart
     mountedCallback() {
         this.classList.add('d-flex', 'flex-column');
     }
-
+    toMonth(dateString){
+        let date = new Date(dateString);
+        let year = date.getFullYear();
+        let month = date.getMonth(); 
+        return new Date(year, month);
+    }
     render() {
         const { data, area, path } = this.props;
-
+        
         const orderedProvincesData = this.getOrderedTimeData(
                 data.provincesSeries
             ),
             orderedCountryData = this.getOrderedTimeData(data.countrySeries);
-
-        return (
+            let confirmedCount =  orderedCountryData.map(item=>[this.toMonth(item.updateTime),item.confirmed])
+            let suspectedCount = orderedCountryData.map(item=>[this.toMonth(item.updateTime),item.suspected])
+            let curedCount = orderedCountryData.map(item=>[this.toMonth(item.updateTime),item.cured])
+            let deadCount = orderedCountryData.map(item=>[this.toMonth(item.updateTime),item.dead])
+
+            return (
             <>
                 <ec-svg-renderer
                     className="w-100 h-50"
@@ -284,11 +293,13 @@ export class VirusChart
                         name="确诊"
                         stack="总量"
                         areaStyle={{ color: '#f6bdcd' }}
+                        data={confirmedCount}
                     />
                     <ec-line-chart
                         name="疑似"
                         stack="总量"
                         areaStyle={{ color: '#f9e4ba' }}
+                        data={suspectedCount}
                     />
                     <ec-tooltip trigger="axis" />
                 </ec-svg-renderer>
@@ -306,10 +317,12 @@ export class VirusChart
                     <ec-grid bottom="25%" left={60} />
                     <ec-x-axis name="日期" type="time" nameGap={5} />
                     <ec-y-axis name="人数" nameGap={10} />
-                    <ec-line-chart name="治愈" />
-                    <ec-line-chart name="死亡" />
+                    <ec-line-chart name="治愈" data={curedCount} />
+                    <ec-line-chart name="死亡" data={deadCount} />
                     <ec-tooltip trigger="axis" />
                 </ec-svg-renderer>
+
+
             </>
         );
     }