本系列文章配套代码获取有以下两种途径：
-
通过百度网盘获取：
链接：https://pan.baidu.com/s/1W26KrZK7RjwgxvulccTA9w?pwd=mnsj提取码：mnsj
-
前往GitHub获取：
https://github.com/returu/Data_VisualizationECharts中绘制矢量地图。geo，该组件用于地图的绘制，支持在地理坐标系上绘制散点图，线集。在ECharts中绘制矢量地图的步骤如下：
-
读取 GeoJson格式的地图数据； -
通过 echarts. registerMap函数将上一步读取的数据注册为ECharts可用的地图。 -
在地理坐标系组件geo中的
map参数中使用registerMap注册的地图，即指定注册的地图作为坐标系。
echarts. registerMap是Echarts中用于注册地图的函数。它可以将第三方地图或自定义地图数据与Echarts进行集成，使用Echarts的API进行绘制。使用方法如下: echarts.registerMap(mapName, mapData)的参数mapName是地图的名称, mapData是地图的数据。注册后可以使用这个地图名称在Echarts中使用这个地图。
设置完地图后，可以通过label和itemStyle等参数对地图显示效果进行一些处理操作：
完整代码如下所示：
// 读取中国省级行政区划的Geo数据 china.json
$.getJSON('data/china.json', function(china) {
console.log(china)
// 注册绘制中国地图
echarts.registerMap('baseMap', china)
// 设置图表的参数
var option = {
// 地理坐标系组件
geo: {
map: 'baseMap', //map属性对应注册地图中的地图名称
aspectScale: 0.75, // 用于设置地图的长宽比，当绘制小范围底图时，可能需要将其设置为1
// 图形上的文本标签样式
label: {
// 高亮状态下的标签样式
emphasis: {
show: true,
color: 'red',
}
},
// 地图区域的多边形 图形样式
itemStyle: {
borderWidth: 2,
borderColor: '#808080', // 图形的描边颜色
shadowColor: '#ccc', // 阴影颜色
shadowBlur: 3, // 图形阴影的模糊大小
}
},
// 数据系列
series: [],
};
// 读取中国省级行政区划的Geo数据 china.json
$.getJSON('data/china.json', function(china) {
$.getJSON('data/data.json', function(data) {
$.getJSON('data/city_points.json', function(city_points) {
console.log(china)
// 注册绘制中国地图
echarts.registerMap('baseMap', china)
// 设置图表的参数
var option = {
// 地理坐标系组件
geo: {
map: 'baseMap', //map属性对应注册地图中的地图名称
aspectScale: 0.75, // 用于设置地图的长宽比，当绘制小范围底图时，可能需要将其设置为1
// 图形上的文本标签样式
label: {
// 高亮状态下的标签样式
emphasis: {
show: true,
color: 'red',
}
},
// 地图区域的多边形 图形样式
itemStyle: {
borderWidth: 2,
borderColor: '#808080', // 图形的描边颜色
shadowColor: '#ccc', // 阴影颜色
shadowBlur: 3, // 图形阴影的模糊大小
}
},
title: {
text: "北京迁入人口来源地",
textStyle: { color: "#000", fontSize: 30 },
subtext: "数据来源：纯属虚构",
subtextStyle: { color: "#000" },
left: "center"
},
// 视觉映射组件
visualMap: {
max: 100,
inRange: {
color: ['green', '#eac736', '#d94e5d'],
colorAlpha: [0, 1]
},
},
// 数据系列
series: [{
type: 'lines', // lines 类型图表
coordinateSystem: 'geo', // 该系列使用的坐标系
data: data,
// 线样式
lineStyle: {
normal: {
// color: '#fff', // #a6c84c
width: 2, // 线宽
curveness: 0.1 // 边的曲度，支持从 0 到 1 的值，值越大曲度越大
}
},
// 线特效的配置
effect: {
show: true, // 是否显示特效
period: 10, // 特效动画的时间，单位为 s
constantSpeed: 100, // 配置特效图形的移动动画是否是固定速度，单位像素/秒
trailLength: 0.7, // 特效尾迹的长度。取从 0 到 1 的值，数值越大尾迹越长
symbolSize: 3 // 特效标记的大小
},
}, {
type: 'effectScatter',
coordinateSystem: 'geo', // 带有涟漪特效动画的散点（气泡）图
// 图形上的文本标签
label: {
//
emphasis: {
show: true,
position: 'right', // 标签的位置
fontSize: 15,
// 标签内容格式器
// 通过回调函数设置显示内容：城市名称+迁徙量
formatter: function(params) { return params['name'] + ' - ' + params['value'][2] }
}
},
data: city_points,
// 通过回调函数设置标记的大小
// params[2]为每个OD的迁徙量
symbolSize: function(params) { return params[2] ** 0.5 * 1.5 }
}],
};
ECharts中对地理区域数据的可视化，需要将series中的type设置为"map"。visualMap，因此需要为OD点线和矢量地图分别设置相对应的visualMap组件，通过seriesIndex来指定系列中的数据。 // 读取中国省级行政区划的Geo数据 china.json
$.getJSON('data/china.json', function(china) {
$.getJSON('data/data.json', function(data) {
$.getJSON('data/city_points.json', function(city_points) {
console.log(data)
console.log(city_points)
// 注册绘制中国地图
echarts.registerMap('baseMap', china)
// 设置图表的参数
var option = {
// 地理坐标系组件
geo: {
map: 'baseMap', //map属性对应注册地图中的地图名称
aspectScale: 0.75, // 用于设置地图的长宽比，当绘制小范围底图时，可能需要将其设置为1
// 图形上的文本标签样式
label: {
// 高亮状态下的标签样式
emphasis: {
show: true,
color: 'red',
}
},
// 地图区域的多边形 图形样式
itemStyle: {
borderWidth: 2,
borderColor: '#808080', // 图形的描边颜色
shadowColor: '#ccc', // 阴影颜色
shadowBlur: 3, // 图形阴影的模糊大小
}
},
title: {
text: "北京迁入人口来源地",
textStyle: { color: "#000", fontSize: 30 },
subtext: "数据来源：纯属虚构",
subtextStyle: { color: "#000" },
left: "center"
},
// 视觉映射组件
visualMap: [{
max: 100,
inRange: {
color: ['green', '#eac736', '#d94e5d'],
colorAlpha: [0, 1]
},
// 指定取哪个系列的数据
seriesIndex: [0, 1],
show:false
},{
max: 200,
inRange: { color: ['#fff', '#000'] },
// 指定取哪个系列的数据
seriesIndex: 2,
show:false
}],
// 数据系列
series: [{
type: 'lines', // lines 类型图表
coordinateSystem: 'geo', // 该系列使用的坐标系
data: data,
// 线样式
lineStyle: {
normal: {
// color: '#fff', // #a6c84c
width: 2, // 线宽
curveness: 0.1 // 边的曲度，支持从 0 到 1 的值，值越大曲度越大
}
},
// 线特效的配置
effect: {
show: true, // 是否显示特效
period: 10, // 特效动画的时间，单位为 s
constantSpeed: 100, // 配置特效图形的移动动画是否是固定速度，单位像素/秒
trailLength: 0.7, // 特效尾迹的长度。取从 0 到 1 的值，数值越大尾迹越长
symbolSize: 3 // 特效标记的大小
},
}, {
type: 'effectScatter',
coordinateSystem: 'geo', // 带有涟漪特效动画的散点（气泡）图
// 图形上的文本标签
label: {
//
emphasis: {
show: true,
position: 'right', // 标签的位置
fontSize: 15,
// 标签内容格式器
// 通过回调函数设置显示内容：城市名称+迁徙量
formatter: function(params) { return params['name'] + ' - ' + params['value'][2] }
}
},
data: city_points,
// 通过回调函数设置标记的大小
// params[2]为每个OD的迁徙量
symbolSize: function(params) { return params[2] ** 0.5 * 1.5 }
}, {
// 地图主要用于地理区域数据的可视化
type: 'map',
// 通过geoIndex指定一个geo组件。这样的话，map和其他series就可以共享一个geo组件了
geoIndex: 0,
data: city_points
}],
};
更多参数和配置可以查看官方文档：
1https://echarts.apache.org/zh/option.html
本篇文章来源于微信公众号: 码农设计师
