前言
Echarts map地圖展示坐标點，并能更具不同的屬性值進行區分，展示點資料依賴于Echarts的散點圖
scatter
、
effectScatter
，底圖依賴于
geo
。
geo
：地理坐标系元件。地理坐标系元件用于地圖的繪制，支援在地理坐标系上繪制散點圖，線集。
scatter
：散點（氣泡）圖。直角坐标系上的散點圖可以用來展現資料的 x，y 之間的關系，如果資料項有多個次元，其它次元的值可以通過不同大小的 symbol 展現成氣泡圖，也可以用顔色來表現。這些可以配合 visualMap 元件完成。
effectScatter
：帶有漣漪特效動畫的散點（氣泡）圖。利用動畫特效可以将某些想要突出的資料進行視覺突出。
實作效果
實作代碼
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html,body{
height: 100%;
}
*{
margin: 0px;
height: 0px;
}
#map{
width: 800px;
height: 600px;
border: 1px solid red;
}
</style>
<script src="js/echarts.min.js"></script>
<script src="js/jquery-3.1.1.js"></script>
</head>
<body>
<div id="map"></div>
<script>
var geoCoordMap = { //這裡放你打點的坐标資訊，虛拟資訊
'萊蕪市':[117.678856,36.223361],
'威海市':[122.121804,37.524054],
'濱州市':[117.982412,37.392056],
'臨沂市':[118.364156,35.119965],
'淄博市':[118.069799,36.82475],
'日照市':[119.532384,35.425496],
'煙台市':[121.454902,37.480081],
'菏澤市':[115.48038,35.248354],
'青島市':[120.397057,36.07041],
'東營市':[118.681509,37.447084],
'濰坊市':[119.164438,36.71744],
'濟南市':[117.122338,36.661876],
'聊城市':[115.986305,36.465225],
'泰安市':[117.090143,36.212179],
'棗莊市':[117.329308,34.824652],
'濟甯市':[116.588817,35.433025]
};
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"},
{name:"菏澤市",value:"130"},
{name:"青島市",value:"110"},
{name:"東營市",value:"105"},
{name:"濰坊市",value:"142"},
{name:"濟南市",value:"80"},
{name:"聊城市",value:"184"},
{name:"泰安市",value:"155"},
{name:"棗莊市",value:"130"},
{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
$.getJSON('./json/shandong.json', function (data) {
echarts.registerMap('shandong', data);
var chart = echarts.init(document.getElementById('map'));
var option = {
backgroundColor: '#404a59',
title: {
text: '點展示',
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:['pm2.5'],
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: 'pm2.5',
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: 'pm2.5',
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: 'pm2.5',
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: 'pm2.5',
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);
});
</script>
</body>
</html>
![python爬蟲 豆瓣電影資料可視化（Flask架構）部署在伺服器上1. 在寶塔面闆下載下傳“python項目管理器”2. 上傳檔案至伺服器3. 生成requirements.txt檔案4.在python項目管理器添加python項目5. 示範[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)