Merge pull request wuhan2020#118 from shadowings-zy/react

进行手机端/PC端/预览端三种不同使用类型的适配,调整手机端交互方式

Author: shadowings-zy

.gitignore

@@ -1,8 +1,30 @@
-/node_modules/
-tmp/*
-.vscode/
-.idea/
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
 .DS_Store
-package-lock.json
-dist/
-.cache/
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+/dist
+/.cache
+/tmp
+/.vscode
+/.idea
+/.DS_Store

README.md

@@ -6,42 +6,35 @@
 
 提供基于 ECharts 可视化库的前端组件。
 
-### 创建一个完整独立的疫情地图
+### 1、提供一个完整独立的疫情地图组件
 
 - **目的&设计**：创建一个独立的疫情地图可视化，有两个主要目标
   1. 地理精度：有市级地理粒度，最开始是一个全国地图的 heatmap，点击一个省重绘成省 map。（[重绘参考](https://gallery.echartsjs.com/editor.html?c=xm3iS_cb0g)）
   - optional: 可能会做成县级精度，具体见[讨论](https://github.com/wuhan2020/map-viz/issues/52)
   2. 时间信息：有时间轴，点击一个地区可以画出[stacked area chart](https://echarts.apache.org/examples/en/editor.html?c=area-stack)之类的疫情发展图 (确诊/疑似/死亡为不同层)，也可以根据选择的时间点重绘地图。([时间轴参考案例](https://echarts.apache.org/examples/en/editor.html?c=mix-timeline-finance))
-- **使用**：取决于数据
-  - 如果自动抓取省市级数据：疫情地图与前端其他组件交互较少，且数据可以[通过 API 直接获取](http://lab.isaaclin.cn/nCoV/api/area?latest=0)，可以作为单独 webpage，最终作为 iframe 整合进前端页面。
-  - 如果使用手动抓取的县级数据，则作为组件融入前端，接受传入数据。[讨论](https://github.com/wuhan2020/map-viz/issues/52)
+  
 - **进度**
 
-![img0](./screenshots/virus-map-overview.gif)
-
 - [x] 基础疫情地图，并用统计图（线图+ stacked area chart）显示疫情发展数据
 - [x] 省市层级交互
 - [x] 时间轴交互
 - [ ] 接入手动收集的省级数据
 - [ ] 疫情地图时间轴与统计图联动
 
-### 创建一个通用地图组件
+### 2、提供一个通用地图组件
 
 - **目的**：用于可视化各种不同地理信息（例如医院位置，酒店位置，etc.）
 - **使用**：作为组件被前端调用，数据来自前端。
-- **基础设计**：点图+地图（[参考例子](https://www.echartsjs.com/examples/zh/editor.html?c=effectScatter-bmap)）
-- **交互**：
-  - 不自带过滤等交互组件，上层应该自己创建 checkbox, slider, etc. 过滤后数据传入地图组件可以重绘地图
-  - 接受传入的 mouseEvent，可以帮助做信息过滤及定位（e.g., 点击一个省选中它的信息）
-  - ([相关讨论](https://github.com/wuhan2020/map-viz/issues/2#issuecomment-578626578))
-- [数据格式设计讨论](https://github.com/wuhan2020/map-viz/issues/3)
-- **进度**
-
-![img3](./screenshots/info-map-demo.gif)
 
 ## 使用
 
-详情参考/src/pages/hierarchicalVirusMapDemo.tsx以及/src/pages/informationMapDemo.tsx
+详情参考:
+[/src/pages/hierarchicalVirusMapDemo.tsx](./src/pages/hierarchicalVirusMapDemo.tsx)
+[/src/pages/informationMapDemo.tsx](./src/pages/informationMapDemo.tsx)
+
+具体组件说明请参考:
+[/src/components/virusMap/README.md](./src/components/virusMap/README.md)
+[/src/components/informationMap/README.md](./src/components/informationMap/README.md)
 
 ## 本地开发
 
@@ -53,17 +46,19 @@
 ```sh
 # clone the repo
 git clone [email protected]:wuhan2020/map-viz.git
-# setup the npm env
+
 cd map-viz
+# checkout react branch
+git checkout react
+# setup the npm env
 npm install
 # start the project
 npm start
 ```
 
 ### 任务拆分&参与指南
 
-[合作指南参考主 repo](https://github.com/wuhan2020/wuhan2020/blob/master/CONTRIBUTING.md)（viz 没有项目机器人+注意将 demo script 改成我们的 repo）
-TL;DR:
+[合作指南参考](https://github.com/wuhan2020/wuhan2020/blob/master/CONTRIBUTING.md)（注意将 demo script 改成我们的 repo）
 
 1. 请在[project 面板](https://github.com/wuhan2020/map-viz/projects/1)自行认领&self-assign issues（如果不能更改 assignee，请回复 issue 表示认领，我们会后面添加 assign）
 2. 对数据和设计如果有讨论请参见如下 issue:

src/components/informationMap/README.md

@@ -0,0 +1,66 @@
+# React 地图信息可视化组件
+
+本地图组件对百度地图API进行了封装，提供了开箱即用的百度地图接入组件。
+本组件固定了地图上 Marker 的格式以及样式。
+@author: shadowingszy
+
+## 传入参数及说明:
+
+mapOptions: 地图配置项，可参考百度地图 API 进行配置。（可参考/mock/information_map_general_mock_data.js）
+
+mapOptions 入参样例：
+
+```js
+{
+  initPoint: [116.350658, 39.938285], // 地图初始化时中心点坐标
+  zoom: 6, // 地图初始化时缩放比例
+  markers: [ // 地图上标记点数组
+    {
+      name: '华中科技大学同济医学院附属协和医院',
+      //目前支持的 type 有：hospital,hotel,others 三种
+      type: "hospital",
+      // 坐标
+      coord: [114.281196, 30.590103],
+      // 有则填，无则不填
+      url?: 'https://mp.weixin.qq.com/s/geO3CCd0_8B3L-r_xlBbZQ',
+      // 一些属性，可能会不同
+      metadata: []
+    }
+  ]
+}
+```
+
+其中 metadata 的 type:
+
+```js
+{
+  key: string; // 一个关键词
+  label?: string; // 如果有label，这个作为显示词，覆盖key
+  value: string|number|InquiryMeta[], // 具体值
+}
+// 例子
+metadata: [
+  { // 酒店
+    key: "request",
+    label: "物资需求",
+    value: [
+      ['普通医用口罩', 10000],
+      ['医用外科口罩', true]
+    ]
+  }, { // 地理位置
+    key: "address",
+    value: '湖北省武汉市江汉区解放大道1277号华中科技大学同济医学院附属协和医院总务处',
+    label: "邮寄地址",
+  }, { // 酒店容量
+    key: "capability",
+    value: 100,
+    label: "容量",
+  }
+]
+```
+
+## 使用样例
+
+```js
+<InformationMap initPoint={initPoint} zoom={zoom} markers={makerArray} />
+```

src/components/virusMap/README.md

@@ -0,0 +1,135 @@
+# React 疫情地图可视化组件
+
+本地图组件提供了完整的全国疫情查看功能，并提供增加聚焦到省显示市级数据与回到省级的功能。
+@author: shadowingszy,yarray
+
+## 传入参数:
+
+resolution: 时间精度。
+data: echarts 中每个区域的疫情数据。
+type: 三种不同的charts显示方式(可选值为: overview, pc, mobile)。
+
+## 参数说明：
+
+传入参数的数据格式为:
+
+```typescript
+interface Props {
+  resolution: number; // 地图放大的程度
+  data: { [name: string]: PatientStatData };//echarts 中每个区域的疫情数据。
+  type: 'overview' | 'pc' | 'mobile';
+}
+
+interface PatientStatData {
+  confirmed: number;
+  suspected: number;
+  cured: number;
+  dead: number;
+}
+```
+
+data属性数据样例1:
+
+```json
+{
+  "吉林": {
+    "name": "吉林",
+    "timestamp": 1580260529915,
+    "confirmed": 9,
+    "suspected": 0,
+    "cured": 0,
+    "dead": 0
+  },
+  "西藏": {
+    "name": "西藏",
+    "timestamp": 1580264158978,
+    "confirmed": 0,
+    "suspected": 1,
+    "cured": 0,
+    "dead": 0
+  },
+  "北京": {
+    "confirmed": 102,
+    "suspected": 0,
+    "cured": 4,
+    "dead": 1
+  },
+```
+
+数据样例2:
+
+```json
+{
+  "晋中": {
+    "name": "晋中",
+    "confirmed": 9,
+    "suspected": 0,
+    "cured": 0,
+    "dead": 0
+  },
+  "运城": {
+    "name": "运城",
+    "confirmed": 4,
+    "suspected": 0,
+    "cured": 0,
+    "dead": 0
+  },
+  "太原": {
+    "name": "太原",
+    "confirmed": 3,
+    "suspected": 0,
+    "cured": 0,
+    "dead": 0
+  },
+  "大同": {
+    "name": "大同",
+    "confirmed": 3,
+    "suspected": 0,
+    "cured": 0,
+    "dead": 0
+  },
+  "吕梁": {
+    "name": "吕梁",
+    "confirmed": 3,
+    "suspected": 0,
+    "cured": 0,
+    "dead": 0
+  },
+  "朔州": {
+    "name": "朔州",
+    "confirmed": 2,
+    "suspected": 0,
+    "cured": 0,
+    "dead": 0
+  },
+  "阳泉": {
+    "name": "阳泉",
+    "confirmed": 1,
+    "suspected": 0,
+    "cured": 0,
+    "dead": 0
+  },
+  "长治": {
+    "name": "长治",
+    "confirmed": 1,
+    "suspected": 0,
+    "cured": 0,
+    "dead": 0
+  },
+  "临汾": {
+    "name": "临汾",
+    "confirmed": 1,
+    "suspected": 0,
+    "cured": 0,
+    "dead": 0
+  }
+}
+```
+
+## 使用样例
+
+```js
+<HierarchicalVirusMap data={data} resolution={resolution} type={'overview'} />
+<HierarchicalVirusMap data={data} resolution={resolution} type={'pc'} />
+<HierarchicalVirusMap data={data} resolution={resolution} type={'mobile'} />
+```

src/components/virus-map/echartsMap.tsx renamed to src/components/virusMap/echartsMap.tsx

@@ -7,6 +7,7 @@
  * mapUrl: 地图json文件地址
  * chartOptions: echarts中的所有options
  * mapName: 地图名称
+ * mobile: 是否为手机端
  * chartOnClickCallBack: 点击地图后的回调函数
  */
 
@@ -18,6 +19,7 @@ interface Props {
   mapUrl: string;
   chartOptions: any;
   mapName: string;
+  mobile: boolean;
   chartOnClickCallBack: Function;
 }
 
@@ -27,6 +29,7 @@ export class EchartsMap extends React.Component<Props> {
     mapUrl: '',
     chartOptions: {},
     mapName: '',
+    mobile: true,
     chartOnClickCallBack: (param: any, chart: any) => {
       console.log(param, chart);
     }
@@ -62,25 +65,27 @@ export class EchartsMap extends React.Component<Props> {
         );
         echarts.registerMap(mapName, data);
         if (!this.chart) {
+          let previousClick = {
+            times: 0,
+            name: ''
+          }
+
           this.chart = echarts.init((document.getElementById(this.chartId)) as HTMLDivElement);
-          // implement hover-then-click on mobile devices
-          let eventState = {
-            hovered: ''
-          };
-          this.chart.on('mouseover', 'series', (params: { name: string; }) => {
-            // prevent click event to trigger immediately
-            setTimeout(() => (eventState.hovered = params.name), 0);
-          });
-          this.chart.on('mouseout', 'series', () => {
-            eventState.hovered = '';
-          });
           this.chart.on('click', 'series', (params: any) => {
-            if (eventState.hovered.length > 0) {
+            console.log(params);
+            if (this.props.mobile) {
+              if (previousClick.name === params.name && previousClick.times === 1) {
+                chartOnClickCallBack(params, this.chart);
+                previousClick.times = 0;
+                previousClick.name = '';
+              } else {
+                previousClick.times = 1;
+                previousClick.name = params.name;
+              }
+            } else {
               chartOnClickCallBack(params, this.chart);
-              eventState.hovered = '';
             }
           });
-
           this.chart.on('click', 'timeline', (params: { dataIndex: any; }) => {
             this.chart.dispatchAction({
               type: 'timelineChange',