Merge pull request #17 from shadowings-zy/shadowingszy

修正issue #11, issue #9并修复一个BUG
wuhan2020 · Jan 28, 2020 · b1158ab · b1158ab
2 parents d88cb71 + 7e1d333
commit b1158ab
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 27 deletions.
diff --git a/source/components/EchartsMap.tsx b/source/components/EchartsMap.tsx
@@ -7,7 +7,7 @@
  * mapUrl: 地图json文件地址。
  * chartOptions: echarts中的所有options，注意，地图的map项值为'map'。
  * chartOnClickCallBack: 点击地图后的回调函数。
- * 
+ * chartGeoRoamCallBack: 地图缩放事件回调函数。
  */
 
 import { observer } from 'mobx-web-cell';
@@ -18,6 +18,7 @@ interface MapProps {
   mapUrl?: string;
   chartOptions?: Object;
   chartOnClickCallBack?: Function;
+  chartGeoRoamCallBack?: Function;
 }
 
 @observer
@@ -36,28 +37,48 @@ export class EchartsMap extends mixin<MapProps, {}>() {
 
   @attribute
   @watch
-  chartOnClickCallBack = (param) => { console.log(param) };
+  chartOnClickCallBack = (param, chart) => { console.log(param, chart) };
+
+  @attribute
+  @watch
+  chartGeoRoamCallBack = (param, chart) => { console.log(param, chart) };
+
+  chartId = this.generateChartId();
+
+  /**
+   * 使用随机数+date生成当前组件的唯一ID
+   */
+  generateChartId() {
+    const random = Math.floor(Math.random() * 100);
+    const dateStr = new Date().getTime();
+    return 'map' + random.toString() + dateStr.toString();
+  }
 
   connectedCallback() {
-    const { mapUrl, chartOptions, chartOnClickCallBack } = this.props;
+    const { mapUrl, chartOptions, chartOnClickCallBack, chartGeoRoamCallBack } = this.props;
     setTimeout(() => {
       fetch(mapUrl)
         .then(response => response.json())
         .then(data => {
           echarts.registerMap('map', data);
-          const myChart = echarts.init(document.getElementById('map'));
-          myChart.setOption(chartOptions)
+          const myChart = echarts.init(document.getElementById(this.chartId));
+          myChart.setOption(chartOptions);
           myChart.on('click', function (params) {
-            chartOnClickCallBack(params);
+            chartOnClickCallBack(params, myChart);
+          });
+          myChart.on("georoam", function (params) {
+            if (params.dy === undefined && params.dx === undefined) {
+              chartGeoRoamCallBack(params, myChart);
+            }
           });
         })
-        .catch(e => console.log("获取地图失败", e));
+        .catch(e => console.log('获取地图失败', e));
     }, 0)
   }
 
   public render() {
     return (
-      <div id='map' style={{ width: "100%", height: "100%" }}></div>
+      <div id={this.chartId} style={{ width: '100%', height: '100%' }}></div>
     );
   }
 }
diff --git a/source/components/VirusMap.tsx b/source/components/VirusMap.tsx
@@ -11,20 +11,32 @@
 
 import { observer } from 'mobx-web-cell';
 import { component, mixin, createCell, attribute, watch } from 'web-cell';
-import { EchartsMap } from "../components/EchartsMap";
+import { EchartsMap } from '../components/EchartsMap';
+
+interface dataObject {
+  name: string;
+  confirmed: number;
+  suspect: number;
+  cured: number;
+  death: number;
+}
 
 interface VirusMapProps {
   mapUrl?: string;
-  data?: Array<any>;
+  data?: Array<dataObject>;
   chartOnClickCallBack?: Function;
 }
 
+interface VirusMapState {
+  mapScale: number;
+}
+
 @observer
 @component({
   tagName: 'virus-map',
   renderTarget: 'children'
 })
-export class VirusMap extends mixin<VirusMapProps, {}>() {
+export class VirusMap extends mixin<VirusMapProps, VirusMapState>() {
   @attribute
   @watch
   mapUrl = '';
@@ -35,23 +47,34 @@ export class VirusMap extends mixin<VirusMapProps, {}>() {
 
   @attribute
   @watch
-  chartOnClickCallBack = (param) => { console.log(param) };
+  chartOnClickCallBack = (param, chart) => { console.log(param, chart) };
+
+  state = {
+    mapScale: 1
+  };
 
-  public render() {
-    const {mapUrl, data, chartOnClickCallBack} = this.props;
-    const chartOptions = {
+  getChartOptions(data, mapScale) {
+    return {
       title: {
-        text: "疫情地图"
+        text: '疫情地图'
       },
       tooltip: {
-        trigger: "item",
+        trigger: 'item',
         formatter: function (params) {
-          const suspectStr = data[params.dataIndex].suspect === undefined ? '' : '<br/>疑似：' + data[params.dataIndex].suspect
-          const output = '确诊：' + data[params.dataIndex].confirmed
-            + suspectStr
-              + '<br/>治愈：' + data[params.dataIndex].cured
-                + '<br/>死亡：' + data[params.dataIndex].death
-          return output;
+          const outputArray = [params.name]
+          if (data[params.dataIndex].confirmed !== undefined) {
+            outputArray.push('确诊：' + data[params.dataIndex].confirmed)
+          }
+          if (data[params.dataIndex].suspect !== undefined) {
+            outputArray.push('疑似：' + data[params.dataIndex].suspect)
+          }
+          if (data[params.dataIndex].cured !== undefined) {
+            outputArray.push('治愈：' + data[params.dataIndex].cured)
+          }
+          if (data[params.dataIndex].death !== undefined) {
+            outputArray.push('死亡：' + data[params.dataIndex].death)
+          }
+          return outputArray.join('<br/>');
         }
       },
       dataRange: {
@@ -72,16 +95,39 @@ export class VirusMap extends mixin<VirusMapProps, {}>() {
           name: '疫情数据',
           type: 'map',
           mapType: 'map',
+          roam: true,
+          label: {
+              show: mapScale > 2.5,
+              fontSize: 2 * mapScale
+          },
+          emphasis: {
+            label: {
+              show: mapScale > 2.5,
+              fontSize: 2 * mapScale
+            }
+          },
           data: data.map((item) => { return { name: item.name, value: item.confirmed } })
         }
       ]
     };
+  }
 
+  public render({ mapUrl, data, chartOnClickCallBack }: VirusMapProps, { mapScale }: VirusMapState) {
+    // 缩放时间重新set一下option
+    const chartGeoRoamCallBack = (params, chart) => {
+      this.setState({
+        mapScale: mapScale *= params.zoom
+      });
+      // 这里使用防抖函数
+      chart.setOption(this.getChartOptions(data, mapScale));
+    }
     return (
       <EchartsMap
         mapUrl={mapUrl}
-        chartOptions={chartOptions}
+        chartOptions={this.getChartOptions(data, mapScale)}
         chartOnClickCallBack={chartOnClickCallBack}
-      />);
+        chartGeoRoamCallBack={chartGeoRoamCallBack}
+      />
+    );
   }
 }
diff --git a/source/page/MapViz.tsx b/source/page/MapViz.tsx
@@ -6,8 +6,8 @@
 
 import { observer } from 'mobx-web-cell';
 import { component, mixin, createCell, attribute, watch, on } from 'web-cell';
-import { VirusMap } from "../components/VirusMap";
-import mockData from "../../mock/map_viz_mock_data.js";
+import { VirusMap } from '../components/VirusMap';
+import mockData from '../../mock/map_viz_mock_data.js';
 
 interface State {
   index: number;