Kaynağa Gözat

fix: 地图绘制

周玉环 2 gün önce
ebeveyn
işleme
ec0918b1fa

+ 2 - 2
xinkeaboard-admin/src/pages/statistics/bigscreen/components/MapContainer.js

@@ -14,13 +14,13 @@ const MapContainer = ({
   const parseData = (mapData) => {
     return mapData.map((item) => ({
       name: item.city,
-      value: [item.longitude ?? 0, item.latitude ?? 0, item.memberNum],
+      value: [item.longitude ?? 116.4074, item.latitude ?? 39.9042, item.memberNum],
     }));
   };
 
   return (
     <div className={styles.common}>
-      {data.length ? <WorldMap countries={parseData(data)} /> : null}
+      <WorldMap data={parseData(data)} />
     </div>
   );
 };

+ 13 - 9
xinkeaboard-admin/src/pages/statistics/bigscreen/components/WorldMap.js

@@ -25,6 +25,10 @@ class WorldMap extends React.Component {
     window.removeEventListener("resize", this.resizeChart);
   }
 
+  componentDidUpdate() {
+    this.initChart();
+  }
+
   resizeChart = () => {
     if (this.chartInstance) {
       this.chartInstance.resize();
@@ -53,14 +57,14 @@ class WorldMap extends React.Component {
   initChart() {
     if (!this.chartRef.current) return;
     this.chartInstance = echarts.init(this.chartRef.current);
-    // console.log(this.props.co, '--sdsdsd')
-    const seriesData = [
-      { name: "China", value: [116.4074, 39.9042, 100] },
-      { name: "United States", value: [-100.0, 40.0, 80] },
-      { name: "Brazil", value: [-47.9292, -15.7801, 60] },
-      { name: "Russia", value: [37.6173, 55.7558, 70] },
-      { name: "India", value: [77.1025, 28.7041, 90] },
-    ];
+    console.log(this.props.data, "--sdsdsd");
+    // const seriesData = [
+    //   { name: "China", value: [116.4074, 39.9042, 100] },
+    //   { name: "United States", value: [-100.0, 40.0, 80] },
+    //   { name: "Brazil", value: [-47.9292, -15.7801, 60] },
+    //   { name: "Russia", value: [37.6173, 55.7558, 70] },
+    //   { name: "India", value: [77.1025, 28.7041, 90] },
+    // ];
     // const seriesData = countries
     //   ?.map((item) => {
     //     const coord = this.getGeoCenterByName(item.name);
@@ -158,7 +162,7 @@ class WorldMap extends React.Component {
           itemStyle: {
             color: "#DE701C",
           },
-          data: seriesData,
+          data: this.props.data,
         },
       ],
     };