echarts实现中国疫情地图

最近每天早上醒来第一件事就是看看当天新添加人数能否减少了，出院了多少，每个省目前还有多少确诊人数，见到最多的就是中国地图的分布图，因为工作需要，自己也使用echarts实现了一个。效果如下：

image.png

一：认识echarts

ECharts，缩写来自 Enterprise Charts，商业级数据图表，是百度的一个开源的数据可视化工具，一个纯 Javascript 的图表库。目前很多商业项目都在使用，不但好用而且是免费。

二：实现步骤

1.官网上面有很多实例可供大家参考，这个是地图实例的链接：https://www.echartsjs.com/examples/en/editor.html?c=doc-example/map-visualMap-pieces&edit=1

2.在页面左侧框中输入以下数据：

option = {    title: {        text: '中国疫情图',        left: 'center'    },    tooltip: {        trigger: 'item'    },    legend: {        orient: 'vertical',        left: 'left',        data: ['中国疫情图']    },    visualMap: {        type: 'piecewise',        pieces: [            {min: 1000, max: 1000000, label: '大于等于1000人', color: '#372a28'},            {min: 500, max: 999, label: '确诊500-999人', color: '#4e160f'},            {min: 100, max: 499, label: '确诊100-499人', color: '#974236'},            {min: 10, max: 99, label: '确诊10-99人', color: '#ee7263'},            {min: 1, max: 9, label: '确诊1-9人', color: '#f5bba7'},        ],        color: ['#E0022B', '#E09107', '#A3E00B']    },    toolbox: {        show: true,        orient: 'vertical',        left: 'right',        top: 'center',        feature: {            mark: {show: true},            dataView: {show: true, readOnly: false},            restore: {show: true},            saveAsImage: {show: true}        }    },    roamController: {        show: true,        left: 'right',        mapTypeControl: {            'china': true        }    },    series: [        {            name: '确诊数',            type: 'map',            mapType: 'china',            roam: false,            label: {                show: true,                color: 'rgb(249, 249, 249)'            },            data: [               {                  name: '北京',                  value: 212                }, {                  name: '天津',                  value: 60                }, {                  name: '上海',                  value: 208                }, {                  name: '重庆',                  value: 337                }, {                  name: '河北',                  value: 126                }, {                  name: '河南',                  value: 675                }, {                  name: '云南',                  value: 117                }, {                  name: '辽宁',                  value: 74                }, {                  name: '黑龙江',                  value: 155                }, {                  name: '湖南',                  value: 593                }, {                  name: '安徽',                  value: 480                }, {                  name: '山东',                  value: 270                }, {                  name: '新疆',                  value: 29                }, {                  name: '江苏',                  value: 308                }, {                  name: '浙江',                  value: 829                }, {                  name: '江西',                  value: 476                }, {                  name: '湖北',                  value: 13522                }, {                  name: '广西',                  value: 139                }, {                  name: '甘肃',                  value: 55                }, {                  name: '山西',                  value: 74                }, {                  name: '内蒙古',                  value: 34                }, {                  name: '陕西',                  value: 142                }, {                  name: '吉林',                  value: 42                }, {                  name: '福建',                  value: 179                }, {                  name: '贵州',                  value: 56                }, {                  name: '广东',                  value: 797                }, {                  name: '青海',                  value: 15                }, {                  name: '西藏',                  value: 1                }, {                  name: '四川',                  value: 282                }, {                  name: '宁夏',                  value: 34                }, {                  name: '海南',                  value: 79                }, {                  name: '台湾',                  value: 10                }, {                  name: '香港',                  value: 15                }, {                  name: '澳门',                  value: 9                }            ]        }    ]};

此时页面右侧就会渲染出中国疫情地图了。以上是Echarts的Example环境，真实项目中需要加入china.js。

3.在自己的项目中如何使用echarts实现疫情图，静态页面代码如下：

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>疫情地图展现</title>  <style>    #myEcharts {      width: 800px;      height: 500px;      border: solid 1px red;      margin: 0 auto;    }  </style>  <!-- 引入 echarts.js -->  <script src="https://www.echartsjs.com/examples/vendors/echarts/echarts.min.js?_v_=1578305236132"></script>  <!--引入中国的地图数据js文件，引入后会自动注册地图名字和数据-->  <script src="https://www.echartsjs.com/examples/vendors/echarts/map/js/china.js?_v_=1578305236132"></script></head><body>  <!--为echarts准备一个dom容器-->  <div id="myEcharts"></div>  <script>    //初始化echarts实例    var myChart = echarts.init(document.getElementById('myEcharts'));    // 指定图表的配置项和数据    option = {      title: {        text: '中国疫情图',        left: 'center'      },      tooltip: {        trigger: 'item'      },      legend: {        orient: 'vertical',        left: 'left',        data: ['中国疫情图']      },      visualMap: {        type: 'piecewise',        pieces: [          { min: 1000, max: 1000000, label: '大于等于1000人', color: '#372a28' },          { min: 500, max: 999, label: '确诊500-999人', color: '#4e160f' },          { min: 100, max: 499, label: '确诊100-499人', color: '#974236' },          { min: 10, max: 99, label: '确诊10-99人', color: '#ee7263' },          { min: 1, max: 9, label: '确诊1-9人', color: '#f5bba7' },        ],        color: ['#E0022B', '#E09107', '#A3E00B']      },      toolbox: {        show: true,        orient: 'vertical',        left: 'right',        top: 'center',        feature: {          mark: { show: true },          dataView: { show: true, readOnly: false },          restore: { show: true },          saveAsImage: { show: true }        }      },      roamController: {        show: true,        left: 'right',        mapTypeControl: {          'china': true        }      },      series: [        {          name: '确诊数',          type: 'map',          mapType: 'china',          roam: false,          label: {            show: true,            color: 'rgb(249, 249, 249)'          },          data: [            {              name: '北京',              value: 212            }, {              name: '天津',              value: 60            }, {              name: '上海',              value: 208            }, {              name: '重庆',              value: 337            }, {              name: '河北',              value: 126            }, {              name: '河南',              value: 675            }, {              name: '云南',              value: 117            }, {              name: '辽宁',              value: 74            }, {              name: '黑龙江',              value: 155            }, {              name: '湖南',              value: 593            }, {              name: '安徽',              value: 480            }, {              name: '山东',              value: 270            }, {              name: '新疆',              value: 29            }, {              name: '江苏',              value: 308            }, {              name: '浙江',              value: 829            }, {              name: '江西',              value: 476            }, {              name: '湖北',              value: 13522            }, {              name: '广西',              value: 139            }, {              name: '甘肃',              value: 55            }, {              name: '山西',              value: 74            }, {              name: '内蒙古',              value: 34            }, {              name: '陕西',              value: 142            }, {              name: '吉林',              value: 42            }, {              name: '福建',              value: 179            }, {              name: '贵州',              value: 56            }, {              name: '广东',              value: 797            }, {              name: '青海',              value: 15            }, {              name: '西藏',              value: 1            }, {              name: '四川',              value: 282            }, {              name: '宁夏',              value: 34            }, {              name: '海南',              value: 79            }, {              name: '台湾',              value: 10            }, {              name: '香港',              value: 15            }, {              name: '澳门',              value: 9            }          ]        }      ]    };    //使用指定的配置项和数据显示图表    myChart.setOption(option);  </script></body></html>

4.数据调取
数据使用腾讯的数据：接口地址：https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5&callback=jQuery34102581268431257997_1582545445186&_=1582545445187

image.png

拿到数据后，发现数据格式是这样子的：

image.png

这个数据是腾讯根据自己的需求组装好的数据格式，我们需要用到的是areaTree下面的children。拿到数据后我们需要解决成图表需要的数据格式。需要的格式是这样子的：

        [{          name: '北京11',          value: 212        }, {          name: '天津',          value: 60        }]

直接上对接数据后的代码：

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>疫情地图展现</title>  <style>    .container {      width: 1200px;      margin: 0 auto;    }    #myEcharts {      width: 800px;      height: 500px;      border: solid 1px red;      margin: 0 auto;    }  </style>  <script src="https://www.echartsjs.com/examples/vendors/jquery/jquery.js"></script>  <!-- 引入 echarts.js -->  <script src="https://www.echartsjs.com/examples/vendors/echarts/echarts.min.js?_v_=1578305236132"></script>  <!--引入中国的地图数据js文件，引入后会自动注册地图名字和数据-->  <script src="https://www.echartsjs.com/examples/vendors/echarts/map/js/china.js?_v_=1578305236132"></script></head><body>  <div class="container">    <h3>累计确诊人数如下：</h3>    <!--为echarts准备一个dom容器-->    <div id="myEcharts"></div>  </div>  <script>    //初始化echarts实例    var myChart = echarts.init(document.getElementById('myEcharts'));    // 指定图表的配置项和数据    option = {      title: {        text: '中国疫情图',        left: 'center'      },      tooltip: {        trigger: 'item'      },      legend: {        orient: 'vertical',        left: 'left',        data: ['中国疫情图']      },      visualMap: {        type: 'piecewise',        pieces: [          { min: 1000, max: 1000000, label: '大于等于1000人', color: '#372a28' },          { min: 500, max: 999, label: '确诊500-999人', color: '#4e160f' },          { min: 100, max: 499, label: '确诊100-499人', color: '#974236' },          { min: 10, max: 99, label: '确诊10-99人', color: '#ee7263' },          { min: 1, max: 9, label: '确诊1-9人', color: '#f5bba7' },        ],        color: ['#E0022B', '#E09107', '#A3E00B']      },      toolbox: {        show: true,        orient: 'vertical',        left: 'right',        top: 'center',        feature: {          mark: { show: true },          dataView: { show: true, readOnly: false },          restore: { show: true },          saveAsImage: { show: true }        }      },      roamController: {        show: true,        left: 'right',        mapTypeControl: {          'china': true        }      },      series: [        {          name: '确诊数',          type: 'map',          mapType: 'china',          roam: false,          label: {            show: true,            color: 'rgb(249, 249, 249)'          },          data: []        }      ]    };    //使用指定的配置项和数据显示图表    myChart.setOption(option);    //获取数据    function getData() {      $.ajax({        url: "https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5",        dataType: "jsonp",        success: function (data) {          //  console.log(data.data)          var res = data.data || "";          res = JSON.parse(res);          var newArr = [];          //newArr的数据格式为：          // [{          //   name: '北京11',          //   value: 212          // }, {          //   name: '天津',          //   value: 60          // }]          if (res) {            //获取到各个省份的数据            var province = res.areaTree[0].children;            for (var i = 0; i < province.length; i++) {              var json = {                name: province[i].name,                value: province[i].total.confirm              }              newArr.push(json)            }            console.log(newArr)            console.log(JSON.stringify(newArr))            //使用指定的配置项和数据显示图表            myChart.setOption({              series: [                {                  name: '确诊数',                  type: 'map',                  mapType: 'china',                  roam: false,                  label: {                    show: true,                    color: 'rgb(249, 249, 249)'                  },                  data: newArr                }              ]            });          }        }      })    }    getData();  </script></body></html>

三：知识点解析：

option参数的含义：

• title：显示图标的标题
• tooltip：展现提醒框，当你鼠标点击某个省份时用来展现对应确实诊人数
• legend：图例，设置图例展现的位置
• visualMap：视觉映射，每个颜色代表什么含义
• series：地图数据可视化，增加data数据

最后再给大家一个友好建议：
1、插件自带的地图省份名字是默认出现在省会城市的位置，导致很多省份的名字有点挤甚至偏移，大家可以打开map/js/china.js

2、检索自己想要更改的省份名字，如湖南
“properties”:{“cp”:[112.982279,28.19409],”name”:”湖南”,”childNum”:3}}
其中cp即表示文字的位置，两个坐标表示经纬度，大家根据需要调整。有兴趣的小伙伴可以试试哦！

对echarts还不熟习的同学可以先看一遍官方教程哦,地址如下：https://www.echartsjs.com/zh/tutorial.html

待完善。。。

疫情中一个个感人的瞬间，每天都是满满的感动，太多感谢的话都会显得那么苍白无力，只希望疫情赶快过去。