基于echarts绘制人口热力图

suiyueliushang
  2023-05-03 17:32:09 2023-05-03 17:32 Created   2023-05-03 17:51 2023-05-03 17:51 Updated    

最近被安排做学院的就业质量报告，在统计毕业生生源地信息的时候需要绘制人口热力图，于是就有了这篇文章。

1. 地图数据

首先需要准备地图数据，这里使用的是geoJSON 提供的中国地图的数据，当然各个省份，县市的数据也可以在这里找到。
另外也可以使用阿里云的数据可视化平台：中国省市区县geojson数据 。

2. 代码编写

2.1 引入echarts

1
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>

2.2 html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
  <head>
    <meta charset="utf-8" />
	<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
	<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="style.css">

    <!-- 引入刚刚下载的 ECharts 文件 -->
	<body id="container">
		<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
		<div id="main" style="position:relative; height: 100vh; overflow: hidden;" >
			<script type="module" src="./index.js">
				
			</script>
		</div>
	  </body>
  </head>
</html>

2.3 index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
// import * as echarts from 'echarts';


var ROOT_PATH = 'https://echarts.apache.org/examples';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

myChart.showLoading();
$.get('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json', function (geoJson) {
  myChart.hideLoading();
  echarts.registerMap('HK', geoJson);
  myChart.setOption(
    (option = {
      title: {
        text: '生源地人口热力图',
        subtext: 'Data from Wikipedia',
        sublink:
          'http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b}<br/>{c} (人)'
      },
      toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
          dataView: { readOnly: false },
          restore: {},
          saveAsImage: {}
        }
      },
      visualMap: {
        min: 10,
        max: 80,
        text: ['High', 'Low'],
        realtime: false,
        calculable: true,
        inRange: {
          color: ['#cedec7', '#00482f']
        }
      },
      series: [
        {
          name: '生源地热力图',
          type: 'map',
          map: 'HK',
          label: {
            show: true
          },
          data: [
            // { name: '江苏', value: 0 },
			// { name: '浙江', value: 0 },
			// { name: '上海', value: 0 },
			// { name: '北京', value: 0 },
			// { name: '广东', value: 0 },
          ],
          // 自定义名称映射
          nameMap: {
            '澳门特别行政区': '',
            "广西壮族自治区": '广西',
            "香港特别行政区": '',
            '内蒙古自治区': '内蒙古',
            '新疆维吾尔自治区': '新疆',
            "西藏自治区": '西藏',
            '宁夏回族自治区': '宁夏',
            "广东省": '广东',
			"江苏省": '江苏',
			"山东省": '山东',
			"浙江省": '浙江',			
			"山西省": '山西',
			"河南省": '河南',
			"四川省": '四川',
			"河北省": '河北',
			"湖南省": '湖南',
			"湖北省": '湖北',
			"辽宁省": '辽宁',
			"陕西省": '陕西',
			"安徽省": '安徽',
			"福建省": '福建',
			"重庆市": '重庆',
			"江西省": '江西',
			"吉林省": '吉林',
			"黑龙江省": '黑龙江',
			"云南省": '云南',
			"贵州省": '贵州',
			"甘肃省": '甘肃',
			"海南省": '海南',
			"天津市": '天津',
			"北京市": '北京',
			"上海市": '上海',
			"台湾省": '台湾',
			"青海省": '青海'
          }
        }
      ]
    })
  );
});
option && myChart.setOption(option);

使用express搭建服务器

因为跨域的问题，我这里用express搭建了一个简单的http服务器，开箱即用1分钟就可以解决。

1. 安装express

1
npm install express --save

2. 创建server.js

1
2
3
var express = require("express");
var app = express();
app.use(express.static('your file path')).listen(3000);

3. 运行server.js

1
node server.js

4. 访问

1
http://localhost:3000

效果图

image

  • Title: 基于echarts绘制人口热力图
  • Author: suiyueliushang
  • Created at: 2023-05-03 17:32:09
  • Updated at: 2023-05-03 17:51:00
  • Link: https://suiyueliushang.github.io/2023/05/03/基于echarts绘制人口热力图/
  • License: This work is licensed under CC BY-NC-SA 4.0.
 Comments
On this page
基于echarts绘制人口热力图
  1. 1. 地图数据
  2. 2. 代码编写
    1. 2.1 引入echarts
    2. 2.2 html
    3. 2.3 index.js
  3. 使用express搭建服务器
    1. 1. 安装express
    2. 2. 创建server.js
    3. 3. 运行server.js
    4. 4. 访问
  4. 效果图