echarts实现中国疫情地图

作者: MissWang1 | 来源:发表于2020-02-24 20:58 被阅读0次

最近每天早上醒来第一件事就是看看当天新增人数是否减少了，出院了多少，每个省目前还有多少确诊人数，见到最多的就是中国地图的分布图，由于工作需要，自己也使用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

待完善。。。

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

echarts实现中国疫情地图

一：认识echarts

二：实现步骤

三：知识点解析：

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

程序员

让前端飞

地图

杂项