Recently, there is a need to count the attribution of parking lot vehicles, and display the number of vehicles in each attribution on the map. All researched echarts. The following figure is a more classic histogram report. The specific implementation is not listed. , You can visit the echarts official website, there are many examples in it, friends can go to the official website to copy according to their needs, and it’s ok~, the following is the link to the echarts official website
https://echarts.apache.org/zh/index.html
Here, I want to share with you how to use echarts to realize map scatter and data visualization. (The key is that I didn’t figure out how to understand from the examples on the official website. I have studied it myself and found some points that need attention)
The first is to quote echarts.js, you can go to the official website to download, you can also follow the " ink direct " official account, reply to "e charts plug-in " to download, the complete json data of China map inside
If you have any plug-ins you want, you can also leave a message on the official account. After receiving the message, I will try my best to help you find it.
First is html
<div id="MapChart"> </div>css: Here you need to pay attention, you need to set the height of the div tag, otherwise it will not be displayed
#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>If everyone’s needs are for provinces and cities instead of national maps, you can reply to the " echarts map " in the " ink direct " public account , and you can download which province you want to download.
Okay, let’s share about the distribution of echarts map scatter points here. Those who are interested can pay attention to " Ink Direct ", there are many free programming materials to receive~
