地图散点，是在地图的基础上，用点的大小、颜色深浅等元素显示相关数据的大小和分布情况，可以让人一眼尽收眼底，做到心中有数。地图散点常被用于资源、人口、经济分布的显示。
echarts实现地图散点图，有两种方式，一种是geojson方式，一种是基于bmap方式，bmap需要使用到百度地图，可进行随意的拖放收缩。
在后端代码这里需要构造一个字典，将两张表关联，把地区 经纬度 指标构造出来
代码语言：javascript复制@app.route('/getjson11', methods=['GET'])
def getjson11():
# 千万不要先将内部的对象序列化成字符串，然后再序列化外边的对象。
# 再复杂的结构都可以表示为一个dict，
# 而之前不需要做任何序列化操作！！！
# 经过多轮测试，提前序列化会导致很多解析问题！！！
# {'name': '浙江', 'value': '13.06'}, {'name': '广东', 'value': '9.31'},
# where year>='2000' and year<='2010'
sql = "select cityname,GDP from citygdp"
result=db.session.execute(sql).fetchall()
data=[{'name':row[0],'value':row[1]} for row in result]
# const data = [
# { name: '海门', value: 900 },
# { name: '鄂尔多斯', value: 1200 },
# { name: '招远', value: 120 },
# { name: '舟山', value: 12 }];
sql = "select cityname,longitude,latitude from citylocation"
result = db.session.execute(sql).fetchall()
geoCoordMap = [{row[0]:[row[1],row[2]]} for row in result]
# const geoCoordMap = {
# 海门: [121.15, 31.89],
# 鄂尔多斯: [109.781327, 39.608266],
# 招远: [120.38, 37.35],
# 舟山: [122.207216, 29.985295]};
# 废弃原有的方案，使用两个表直接关联
sql = "select a.cityname,a.longitude,a.latitude,b.GDP from citylocation a,citygdp b where a.cityname=b.cityname"
result = db.session.execute(sql).fetchall()
data = [{'name': row[0], 'value': [row[1],row[2],row[3]]} for row in result]
print(data)
datadict={'data':data}
# data=[
# [
# {'name': '遵义市', 'value': [106.9235642, 27.72917731, 908.76]},
# {'name': '自贡市', 'value': [104.7757383, 29.34187324, 647.73]}
# ]
response = jsonify(datadict)
response.status_code = 200 # or 400 or whatever
return jsonify(datadict)
@app.route('/echartdemo11')
def echartdemo11():
return render_template('echartdemo11.html')前端代码调试了很久，最后找了一个最简单最容易实现的模式。
代码语言：javascript复制<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- 引入刚刚下载的 ECharts 文件 -->
<!--script src="..staticjsecharts.min.js"></script-->
<script src="/static/js/echarts.min.js"></script>
<script src="/static/js/jquery.js"></script>
<script src="/static/js/bmap.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/js/china.js" type="text/javascript" charset="utf-8"></script>
<script src="http://api.map.baidu.com/api?v=2.0&ak=akZILvuv0Ovr6uU3eKlaXP2Pgx9jprjO"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 1200px;height:800px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
myChart.option = {
xAxis: {
type: 'category',
data: []
},
yAxis: {
type: 'value'
},
series: [
{
data: [],
type: 'line'
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.hideLoading();
$.ajax({
url:'/getjson11',
result:{},
type:'GET',
dataType:'json',
success:function(result){
data=result.data;
option = {
title: {
text: '全国主要城市GDP',
subtext: 'data from 2015年',
sublink: 'http://统计局',
left: 'center'
},
tooltip: {
trigger: 'item'
},
bmap: {
center: [120.13066322374, 30.240018034923],
zoom: 5,
roam: true,
mapStyle: {
styleJson: [
{
featureType: 'water',
elementType: 'all',
stylers: {
color: '#d1d1d1'
}
},
{
featureType: 'land',
elementType: 'all',
stylers: {
color: '#f3f3f3'
}
},
{
featureType: 'railway',
elementType: 'all',
stylers: {
visibility: 'off'
}
},
{
featureType: 'highway',
elementType: 'all',
stylers: {
color: '#fdfdfd'
}
},
{
featureType: 'highway',
elementType: 'labels',
stylers: {
visibility: 'off'
}
},
{
featureType: 'arterial',
elementType: 'geometry',
stylers: {
color: '#fefefe'
}
},
{
featureType: 'arterial',
elementType: 'geometry.fill',
stylers: {
color: '#fefefe'
}
},
{
featureType: 'poi',
elementType: 'all',
stylers: {
visibility: 'off'
}
},
{
featureType: 'green',
elementType: 'all',
stylers: {
visibility: 'off'
}
},
{
featureType: 'subway',
elementType: 'all',
stylers: {
visibility: 'off'
}
},
{
featureType: 'manmade',
elementType: 'all',
stylers: {
color: '#d1d1d1'
}
},
{
featureType: 'local',
elementType: 'all',
stylers: {
color: '#d1d1d1'
}
},
{
featureType: 'arterial',
elementType: 'labels',
stylers: {
visibility: 'off'
}
},
{
featureType: 'boundary',
elementType: 'all',
stylers: {
color: '#fefefe'
}
},
{
featureType: 'building',
elementType: 'all',
stylers: {
color: '#d1d1d1'
}
},
{
featureType: 'label',
elementType: 'labels.text.fill',
stylers: {
color: '#999999'
}
}
]
}
},
series: [
{
name: 'pm2.5',
type: 'scatter',
coordinateSystem: 'bmap',
data: data,
encode: {
value: 2
},
label: {
formatter: '{b}',
position: 'right',
show: false
},
emphasis: {
label: {
show: true
}
}
},
{
name: 'Top 5',
type: 'effectScatter',
coordinateSystem: 'bmap',
data:data,
symbolSize: function (val) {
return val[2] / 500;
},
encode: {
value: 2
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
label: {
formatter: '{b}',
position: 'right',
show: true
},
itemStyle: {
shadowBlur: 10,
shadowColor: '#333'
},
emphasis: {
scale: true
},
zlevel: 1
}
]
};
myChart.setOption(option);
},
error:function (msg) {
console.log(msg);
alert('系统发生错误');
}
})
</script>
</body>
</html>
