最近有个需求是对停车场车辆进行归属地统计，将各个归属地的车辆数显示在地图中，所有研究了一下echarts，下图是一个比较经典的柱状图报表，具体实现就不列出来了，大家可以访问echarts官网，里面有许多实例，小伙伴们可以根据自己的需求去官网copy就ok啦~，下面是echarts官网链接
https://echarts.apache.org/zh/index.html
这里，想给大家分享的是如何使用echarts实现地图散点，数据可视化，（关键是自己从官网的实例中没怎么琢磨明白，自己研究了会，发现有些需要注意的地方）
首先是引用echarts.js,大家可以去官网下载，也可以关注“墨水直达”公众号，回复“echarts插件”下载即可，里面中国地图完整的json数据
大家如果有什么想要的插件，也可以在公众号留言呀，收到留言后，我会尽最大努力帮大家找到的
首先是html
<div id="MapChart"> </div>css:这里需要注意，需要给div标签设置高度哦，不然显示不出来的
#MapChart {
width: 100%;
height: 400px;
}js:
<script>
var MapChart;
$(document).ready(function () {
//这里需要放中国地区的坐标，我这里放一部分，不然太长了，大家看起来费劲
//我会将完整的中国地图坐标放在文章尾部
var geoCoordMap = {
湖北: [114.17, 30.35],
湖南: [112.59, 28.12],
江苏: [118.46, 32.03],
江西: [115.55, 28.40],
辽宁: [123.25, 41.48],
内蒙古: [111.41, 40.48],
宁夏: [106.16, 38.27],
青海: [101.48, 36.38],
山东: [117.00, 36.40],
山西: [112.33, 37.54],
陕西: [108.57, 34.17],
四川: [104.04, 30.40],
西藏: [91.08, 29.39],
新疆: [87.36, 43.45],
云南: [102.42, 25.04],
浙江: [120.10, 30.16],
};
//这里就是需要在地图中显示的数据
var locValue = [
{ name: "宁夏", value: "100" },
{ name: "青海", value: "50" },
{ name: "山东", value: "20" },
{ name: "山西", value: "90" },
{ name: "陕西", value: "170" },
{ name: "四川", value: "190" },
{ name: "西藏", value: "160" },
{ name: "新疆", value: "140" }
];
var convertData = function (geoCoordMap, data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
};
//大家注意这个地方，引用的是中国地图的json文件，大家可以在公众号回复“echarts插件”
$.getJSON('/Content/scripts/echarts/china.json', function (data) {
echarts.registerMap('shandong', data);
var chart = echarts.init(document.getElementById('MapChart'));
var option_map = {
backgroundColor: '#404a59',
title: {
x: 'center',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'item',
formatter: function (params) {
return params.name + ' : ' + params.value[2];
},
extraCssText: "height:20px;"
},
legend: {
orient: 'vertical',
y: 'bottom',
x: 'right',
data: ['归属地占比数'],
textStyle: {
color: '#fff'
}
},
visualMap: {
min: 0,
max: 200,
calculable: true,
inRange: {
color: ['#50a3ba', '#eac736', '#d94e5d']
},
textStyle: {
color: '#fff'
}
},
geo: {
map: 'shandong',
roam: true,
aspectScale: 1,
label: {
emphasis: {
show: true,
color: "#fff"
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: [
{
name: '归属地占比数',
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData(geoCoordMap, locValue).slice(0, 4),
symbolSize: 12,
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
emphasis: {
borderColor: '#fff',
borderWidth: 1
}
}
},
{
name: '归属地占比数',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(geoCoordMap, locValue).slice(4, 8),
symbolSize: 12,
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
emphasis: {
borderColor: '#fff',
borderWidth: 1
}
}
},
{ //没有visualMap的情况，同颜色大小标识不同的等级
name: '归属地占比数',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(geoCoordMap, locValue).slice(8, 12),
symbolSize: function (val) {
return val[2] / 10;
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#ddb926'
}
}
},
{
name: '归属地占比数',
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData(geoCoordMap, locValue).slice(12, 18),
symbolSize: function (val) {
return val[2] / 10;
},
showEffectOn: 'emphasis',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
}
},
itemStyle: {
normal: {
color: '#f4e925',
shadowBlur: 10,
shadowColor: '#333'
}
},
zlevel: 1
},
]
};
chart.setOption(option_map);
});
});
</script>如果大家的需求是针对于省份城市，而不是全国地图，可以在“墨水直达”公众号里回复“echarts地图”，就可以想下载哪个省份，就下载哪个省份了
好了，关于echarts地图散点分布就分享到这了，有兴趣的可以关注“墨水直达”，里面有许多免费的编程资料可以领取哦~
