Echarts3地图可视化教程
概述
ECharts是百度开源的Javascript 的图表库，可以流畅的运⾏在 PC 和移动设备上，兼容当前绝⼤部分浏览器
（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ，提供直观，⽣动，可交互，可⾼度个性化定制的数据可视化图表。
本⽂介绍如何使⽤ECharts3来制作地图可视化展⽰。
地图+散点图+动画散点图
这个⽰例介绍如何制作⼀个在地图上标注数据点，并且能够动态显⽰Top数据点
⽰例是⼀个全国主要城市空⽓质量显⽰，标点出了全国主要城市的PM25值，并且针对Top5城市动画显⽰标点
散点图
ECharts 2.x 中在地图上通过 markPoint 标记⼤量数据点⽅式在 ECharts 3 中建议通过上的 散点图scatter 实现。
散点图scatter的代码如下：
series : [
{
name: 'pm2.5',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(data),
symbolSize: function (val) {
return val[2] / 10;
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#ddb926'
}
}
}
]
series[i]-scatter.name: 名称。
series[i]-pe: 类型，声明是散点图scatter。
series[i]-dinateSystem：使⽤的坐标系，geo表⽰使⽤地理坐标系，通过  指定相应的地理坐标系组件。
series[i]-scatter.data[i]：数据内容
series[i]-scatter.symbolSize：标记的⼤⼩，这⾥使⽤回调函数，根据数据点的数据来设置图形⼤⼩series[i]-scatter.label：图形上的⽂本标签
series[i]-scatter.itemStyle ：图形样式
地图
散点图scatter使⽤geo坐标系，geo的代码如下：
geo: {
map: 'china',
label: {
emphasis: {
show: false
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
}
geo.map：地图类型, china：中国地图,world：世界地图
动画散点图
动画散点图是利⽤动画特效可以将某些想要突出的数据进⾏视觉突出，即带有涟漪特效动画的散点图
⽰例中是突出显⽰TOP5城市，代码：
series : [
{
name: 'Top 5',
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData(data.sort(function (a, b) {
return b.value - a.value;
}).slice(0, 6)),
symbolSize: function (val) {
return val[2] / 10;
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
}
},
itemStyle: {
normal: {
color: '#f4e925',
shadowBlur: 10,
shadowColor: '#333'
}
},
zlevel: 1
}
]
series[i]-effectScatter.showEffectOn：何时显⽰特效,'render' 绘制完成后显⽰特效。
series[i]-effectScatter.rippleEffect：涟漪特效相关配置
百度地图
百度地图bmap代码：
bmap: {
center: [104.114129, 37.550339],
zoom: 5,
roam: true,
mapStyle: {
styleJson: [
{
"featureType": "water",
"elementType": "all",
"stylers": {
"color": "#044161"
}
},
{
"featureType": "land",
"elementType": "all",
"stylers": {
"color": "#004981"
}
},
{
"featureType": "boundary",
"elementType": "geometry",                      "stylers": {
"color": "#064f85"
}
},
{
"featureType": "railway",
"elementType": "all",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "highway",
"elementType": "geometry",                      "stylers": {
"color": "#004981"
}
},
{
"featureType": "highway",
"elementType": "geometry.fill",                      "stylers": {canvas动画
"color": "#005b96",
"lightness": 1
}
},
{
"featureType": "highway",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "arterial",
"elementType": "geometry",                      "stylers": {
"color": "#004981"
}
},
{
"featureType": "arterial",
"elementType": "geometry.fill",                      "stylers": {
"color": "#00508b"
}
},
{
"featureType": "poi",
"elementType": "all",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "green",
"elementType": "all",
"stylers": {
"color": "#056197",
"visibility": "off"
}
},
{
"featureType": "subway",
"elementType": "all",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "manmade",
"elementType": "all",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "local",
"elementType": "all",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "arterial",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "boundary",
"elementType": "geometry.fill",                      "stylers": {
"color": "#029fd4"
}
},
{
"featureType": "building",
"elementType": "all",
"stylers": {
"color": "#1a5787"
}
},
{
"featureType": "label",
"elementType": "all",
"stylers": {
"visibility": "off"

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。