本系列文章配套代码获取有以下两种途径：
-
通过百度网盘获取：
链接：https://pan.baidu.com/s/1W26KrZK7RjwgxvulccTA9w?pwd=mnsj提取码：mnsj
-
前往GitHub获取：
https://github.com/returu/Data_Visualization热力图主要通过颜色去表现数值的大小，在之前的文章中介绍过如何在ECharts中绘制热力图：
visualMap组件使用。1series: [{
2 data: [
3 // 经度 纬度 数值
4 [120.14322240845, 30.236064370321, 21],
5 [120.14280555506, 30.23633761213, 5],
6 [120.14307598649, 30.236125905084, 30.7],
7 ......
8 ]
9}]绘制热力图必须要配合visualMap组件使用：
1// 视觉映射组件
2visualMap: {
3 // 不显示 visualMap 组件
4 show: false,
5 // [min, max] 形成了视觉映射的 定义域
6 min: 0,
7 max: 5,
8 // 定义 在选中范围中 的视觉元素
9 inRange: {
10 // 图元的颜色
11 color: ['blue', 'blue', 'green', 'yellow', 'red']
12 }
13},
在series中除了需要设置坐标系，为了显示效果可以设置点的大小以及点的模糊大小。
1// 数据系列
2series: [{
3 type: 'heatmap',
4 coordinateSystem: 'bmap',
5 data: data,
6 // 每个点的大小
7 pointSize: 5,
8 // 每个点模糊的大小
9 blurSize: 6
10}],
整体代码如下所示：
1 $.getJSON('data.json', function(data) {
2 $.getJSON('styleJson.json', function(styleJson) {
3
4 // 设置图表的参数
5 var option = {
6 // bmap组件
7 bmap: {
8 center: [120.13066322374, 30.240018034923], // 地图中心点坐标
9 zoom: 14, // 地图层级
10 roam: true, // 可以对地图进行缩放
11 // 地图底图样式设置
12 mapStyle: {
13 styleJson: styleJson
14 }
15 },
16
17 title: {
18 text: "动态热力图",
19 subtext: "数据来源：ECharts官方示例",
20 left: "center"
21 },
22
23 // 视觉映射组件
24 visualMap: {
25 // 不显示 visualMap 组件
26 show: false,
27 // [min, max] 形成了视觉映射的 定义域
28 min: 0,
29 max: 5,
30 // 定义 在选中范围中 的视觉元素
31 inRange: {
32 // 图元的颜色
33 color: ['blue', 'blue', 'green', 'yellow', 'red']
34 }
35 },
36
37 // 数据系列
38 series: [{
39 type: 'heatmap',
40 coordinateSystem: 'bmap',
41 data: data,
42 // 每个点的大小
43 pointSize: 5,
44 // 每个点模糊的大小
45 blurSize: 6
46 }],
47 };
48
49
50 // 使用指定的配置项和数据显示图表
51 myChart.setOption(option);
52 })
53 })
可视化结果如下图所示：
当有多个时间段的数据时，可以通过timeline组件生成动态热力图，下面给出一个参考代码（假设数据为全天24小时的数据）：
1 $.getJSON('data.json', function(data) {
2 $.getJSON('styleJson.json', function(styleJson) {
3
4 var options = []
5 var hour = []
6 // 构建循环
7 for (var i = 0; i < data.length; i++) {
8 hour.push(i + '时')
9 // 生成options数组，其中的每个option代表了每个时间粒度对应的option
10 options.push({
11 title: { text: i + '时人口分布' ,textStyle:{color:'#000'}},
12 series: [{
13 type: 'heatmap',
14 data: data[i],
15 coordinateSystem: 'bmap',
16 pointSize: 5,
17 blurSize: 6
18 }]
19 })
20 }
21
22 // 设置图表的参数
23 var option = {
24 // timeline组件
25 timeline: {
26 data: hour,
27 orient: 'vertical',
28 left: '90%',
29 top: '5%',
30 height: '80%',
31 width: '8%',
32 axisType: 'category',
33 autoPlay: true,
34 playInterval: 300,
35 currentIndex: 0,
36 inverse: true
37 },
38 // bmap组件
39 bmap: {
40 center: [120.13066322374, 30.240018034923], // 地图中心点坐标
41 zoom: 14, // 地图层级
42 roam: true, // 可以对地图进行缩放
43 // 地图底图样式设置
44 mapStyle: {
45 styleJson: styleJson
46 }
47 },
48
49 title: {
50 text: "",
51 subtext: "数据来源：ECharts官方示例",
52 left: "center"
53 },
54
55 // 视觉映射组件
56 visualMap: {
57 // 不显示 visualMap 组件
58 show: false,
59 // [min, max] 形成了视觉映射的 定义域
60 min: 0,
61 max: 5,
62 // 定义 在选中范围中 的视觉元素
63 inRange: {
64 // 图元的颜色
65 color: ['blue', 'blue', 'green', 'yellow', 'red']
66 }
67 },
68
69 // 数据系列
70 series: [{}],
71
72 // 用于 timeline 的 option 数组。
73 // 数组的每一项是一个 echarts option (ECUnitOption)
74 options:options
75 };
76
77
78 // 使用指定的配置项和数据显示图表
79 myChart.setOption(option);
80 })
81 })
更多参数和配置可以查看官方文档：
1https://echarts.apache.org/zh/option.html
本篇文章来源于微信公众号: 码农设计师
