地图可视化就是将地理数据转换成可视化形态，通过将具有地域特征的数据或者数据分析结果形象地表现在地图上，使得用户可以更加容易理解数据规律和趋势。通俗地讲，地图可视化可以将地理数据更清晰直白地展现出来。
地图主要用于地理区域数据的可视化，配合 visualMap 组件用于展示不同区域的人口分布密度等数据。
这里的问题在于china.js文件中的省市自治区名称和GDP数据里的名称是不一致的，需要临时做处理，其他反而是最简单的
代码语言：javascript复制@app.route('/getjson10', methods=['GET'])
def getjson10():
# 千万不要先将内部的对象序列化成字符串，然后再序列化外边的对象。
# 再复杂的结构都可以表示为一个dict，
# 而之前不需要做任何序列化操作！！！
# 经过多轮测试，提前序列化会导致很多解析问题！！！
# {'name': '浙江', 'value': '13.06'}, {'name': '广东', 'value': '9.31'},
# where year>='2000' and year<='2010'
sql = "select region,GDP from economyinfo where year='2010'"
result=db.session.execute(sql).fetchall()
datadict=[]
for row in result:
provincename=row[0].replace('省','').replace('市','').replace('内蒙古自治区','内蒙古').replace('广西壮族自治区','广西').replace('西藏自治区','西藏').replace('宁夏回族自治区','宁夏').replace('新疆维吾尔自治区','新疆')
datadict.append({'name':provincename,'value':row[1]})
# [{'name': '北京', 'value': 14113.6},
# {'name': '天津', 'value': 9224.46},
# {'name': '新疆', 'value': 5437.47}]
# sql_data = pd.DataFrame(db.session.execute(sql).fetchall())
# sql_data.columns = [i[0] for i in db.session.execute(sql).cursor.description]
# # region GDP
# # 0 北京市 14113.6000
# # 1 天津市 9224.4600
# # 2 河北省 20394.2600
# # 3 山西省 9200.8600
# sql_data['region'] = sql_data['region'].str.replace('市', '')
# sql_data['region'] = sql_data['region'].str.replace('省', '')
# sql_data['region'].replace(['内蒙古自治区','广西壮族自治区','西藏自治区','宁夏回族自治区','新疆维吾尔自治区'],['内蒙古','广西','西藏','宁夏','新疆'],inplace=True)
# datadict = sql_data.to_dict('records')
# # [{'region': '北京', 'GDP': 14113.6},
# # {'region': '天津', 'GDP': 9224.46},
# # {'region': '新疆', 'GDP': 5437.47}]
response = jsonify(datadict)
response.status_code = 200 # or 400 or whatever
return jsonify(datadict)
# 中国行政区域的gdp统计
@app.route('/echartdemo10')
def echartdemo10():
return render_template('echartdemo10.html')下面就没什么可讲的了，按照echart要求即可
代码语言：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>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
option = {
title: {
text: '全国地图',
subtext: 'data from china.js',
sublink: 'ireader.work',
left: 'center'
},
geo:{
map:'china'
},
tooltip : {
trigger: 'item'
},
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// 使用刚指定的配置项和数据显示图表。
myChart.hideLoading();
$.ajax({
url:'/getjson10',
result:{},
type:'GET',
dataType:'json',
success:function(result){
//result=[{'name': '北京', 'value': 14113.6}, {'name': '天津', 'value': 9224.46}, {'name': '河北', 'value': 20394.26}, {'name': '山西', 'value': 9200.86}, {'name': '内蒙古', 'value': 11672.0}, {'name': '辽宁', 'value': 18457.3}, {'name': '吉林', 'value': 8667.58}, {'name': '黑龙江', 'value': 10368.6}, {'name': '上海', 'value': 17165.98}, {'name': '江苏', 'value': 41425.48}, {'name': '浙江', 'value': 27722.31}, {'name': '安徽', 'value': 12359.33}, {'name': '福建', 'value': 14737.12}, {'name': '江西', 'value': 9451.26}, {'name': '山东', 'value': 39169.92}, {'name': '河南', 'value': 23092.36}, {'name': '湖北', 'value': 15967.61}, {'name': '湖南', 'value': 16037.96}, {'name': '广东', 'value': 46013.06}, {'name': '广西', 'value': 9569.8539}, {'name': '海南', 'value': 2064.5}, {'name': '重庆', 'value': 7925.58}, {'name': '四川', 'value': 17185.48}, {'name': '贵州', 'value': 4602.16}, {'name': '云南', 'value': 7224.18}, {'name': '西藏', 'value': 507.46}, {'name': '陕西', 'value': 10123.48}, {'name': '甘肃', 'value': 4120.75}, {'name': '青海', 'value': 1350.43}, {'name': '宁夏', 'value': 1689.65}, {'name': '新疆', 'value': 5437.47}]
//result=[{'region': '北京', 'GDP': 14113.6}, {'region': '天津', 'GDP': 9224.46}, {'region': '河北', 'GDP': 20394.26}, {'region': '山西', 'GDP': 9200.86}, {'region': '内蒙古', 'GDP': 11672.0}, {'region': '辽宁', 'GDP': 18457.3}, {'region': '吉林', 'GDP': 8667.58}, {'region': '黑龙江', 'GDP': 10368.6}, {'region': '上海', 'GDP': 17165.98}, {'region': '江苏', 'GDP': 41425.48}, {'region': '浙江', 'GDP': 27722.31}, {'region': '安徽', 'GDP': 12359.33}, {'region': '福建', 'GDP': 14737.12}, {'region': '江西', 'GDP': 9451.26}, {'region': '山东', 'GDP': 39169.92}, {'region': '河南', 'GDP': 23092.36}, {'region': '湖北', 'GDP': 15967.61}, {'region': '湖南', 'GDP': 16037.96}, {'region': '广东', 'GDP': 46013.06}, {'region': '广西', 'GDP': 9569.8539}, {'region': '海南', 'GDP': 2064.5}, {'region': '重庆', 'GDP': 7925.58}, {'region': '四川', 'GDP': 17185.48}, {'region': '贵州', 'GDP': 4602.16}, {'region': '云南', 'GDP': 7224.18}, {'region': '西藏', 'GDP': 507.46}, {'region': '陕西', 'GDP': 10123.48}, {'region': '甘肃', 'GDP': 4120.75}, {'region': '青海', 'GDP': 1350.43}, {'region': '宁夏', 'GDP': 1689.65}, {'region': '新疆', 'GDP': 5437.47}]
myChart.setOption({
backgroundColor: '#FFFFFF',
title: {
text: '地域分布',
top: 14,
left: 14,
textStyle: {
borderColor: '#333333',
fontWeight: 400,
fontFamily: 'PingFangSC-Regular, PingFang SC',
color: '#666666',
fontSize: 14
}
},
tooltip: {
trigger: 'item',
show: true,
formatter: function(params) {
//return params.data['region'] '：' params.data['GDP'] '%'
return params.name '：' params.data['value']
}
},
// 左侧小导航图标
visualMap: {
show: false,
x: 'left',
y: 'center',
min: 0,
max: 50000,
color: ['#3644BF', '#B7C8FF']
},
// 配置属性
series: [{
name: '数据',
type: 'map',
mapType: 'china',
roam: false,
label: {
normal: {
show: false // 省份名称
},
emphasis: {
show: false
}
},
itemStyle: {
normal: { // 未选中状态
// areaColor: 'red', // 南沙诸岛背景颜色
borderColor: 'transparent',
label: {
show: true// 显示名称
}
},
emphasis: { // 也是选中样式
areaColor: '#49FFE9',
shadowColor: 'rgba(0,0,0,0.2)',
shadowOffsetX: 0, // 阴影水平方向上的偏移距离
shadowOffsetY: 4, // 阴影垂直方向上的偏移距离
shadowBlur: 8, // 图形阴影的模糊大小。
label: {
show: true,
textStyle: {
color: '#fff'
}
}
}
},
data:result
}]
});
},
error:function (msg) {
console.log(msg);
alert('系统发生错误');
}
})
</script>
</body>
</html>
