矩形树图将层次结构的数据显示为一组嵌套矩形。树的每个分支都有一个矩形，然后用代表子分支的较小矩形平铺。
叶子节点的矩形面积与数据占比成比例。通常，叶节点会用不同的颜色来显示数据的关联维度。
矩形图要比饼状图呈现的单元多一些，且量化性更好。
由于数据库中未存储各行政区对应的省市自治区信息，在这里用了个字典进行存储，对行政区和相关省进行遍历，再将省代入省的GDP字典中进行查找，生成行政的总GDP和人均GDP。
代码语言：javascript复制@app.route('/getjson8', methods=['GET'])
def getjson8():
# 千万不要先将内部的对象序列化成字符串，然后再序列化外边的对象。
# 再复杂的结构都可以表示为一个dict，
# 而之前不需要做任何序列化操作！！！
# 经过多轮测试，提前序列化会导致很多解析问题！！！
areadict={}
areadict['华北地区'] = ['北京市', '天津市', '河北省', '山西省', '内蒙古自治区']
areadict['东北地区'] = ['辽宁省', '吉林省', '黑龙江省']
areadict['华东地区'] = ['上海市', '江苏省', '浙江省', '安徽省', '福建省', '江西省', '山东省']
areadict['华中地区'] = ['河南省', '湖北省', '湖南省']
areadict['华南地区'] = ['广东省', '广西壮族自治区', '海南省']
areadict['西南地区'] = ['重庆市', '四川省', '贵州省', '云南省', '西藏自治区']
areadict['西北地区'] = ['陕西省', '甘肃省', '青海省', '宁夏回族自治区', '新疆维吾尔自治区']
sql = "select region,GDP,avgGDP from economyinfo where year='2010'"
result= db.session.execute(sql).mappings().all()
# [{'region': '北京市', 'GDP': 14113.6, 'avgGDP': 75943},
# {'region': '天津市', 'GDP': 9224.46, 'avgGDP': 72994}]
provicevaluedict={i['region']: [i['GDP'],i['avgGDP'],] for i in result}
# {'北京市': [14113.6, 75943], '天津市': [9224.46, 72994]
gdpdictlist=[]
for area,provincelist in areadict.items():
gdpdict={}
childrengdplist = []
gdp=0
avggdp=0
num=0
gdpdict['name']=area
gdpdict['path'] = area
for province in provincelist:
childrendict={}
# 构造子节点的数据，从省GDP数据中的获取相关经济数据
childrendict['name']=province
childrendict['path'] = area ':' province
childrendict['value']=provicevaluedict[province]
# 计算行政区域GDP和平均GDP
gdp =provicevaluedict[province][0]
avggdp =provicevaluedict[province][1]
num =1
# 加入子节点列表
childrengdplist.append(childrendict)
# 继续构造行政区域字典数据，并追加到列表中
gdpdict['value'] = [gdp,avggdp/num]
gdpdict['children'] = childrengdplist
gdpdictlist.append(gdpdict)
# gdpdictlist=
# [
# {
# "name": "华北地区",
# "path": "华北地区",
# "value": [
# 64605.17999999999,
# 50247
# ],
# "children": [
# {
# "name": "北京市",
# "path": "华北地区:北京市",
# "value": [
# 14113.6,
# 75943
# ]
# },
# {
# "name": "天津市",
# "path": "华北地区:天津市",
# "value": [
# 9224.46,
# 72994
# ]
# },
gdpdata={'stauts',200}
response = jsonify(gdpdictlist)
response.status_code = 200 # or 400 or whatever
return jsonify(gdpdictlist)
@app.route('/echartdemo8')
def echartdemo8():
return render_template('echartdemo8.html')在前端页面只要遵循echarts的要求格式就好了，避免做转换，毕竟不是搞前端代码的。
代码语言：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>
</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'));
// 指定图表的配置项和数据
myChart.option = {
xAxis: {
type: 'category',
data: []
},
yAxis: {
type: 'value'
},
series: [
{
data: [],
type: 'line'
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.hideLoading();
$.ajax({
url:'/getjson8',
result:{},
type:'GET',
dataType:'json',
success:function(result){
alert(result);
var gdpseries = [];
//result=
//[
// {
// "name": "华北地区",
// "path": "华北地区",
// "value": [
// 64605.17999999999,
// 50247
// ],
// "children": [
// {
// "name": "北京市",
// "path": "华北地区:北京市",
// "value": [
// 14113.6,
// 75943
// ]
// },
// {
// "name": "天津市",
// "path": "华北地区:天津市",
// "value": [
// 9224.46,
// 72994
// ]
// },
// ...
// ]
// }
//]
myChart.hideLoading();
// 填入数据
function getLevelOption() {
return [
{
itemStyle: {
borderColor: '#777',
borderWidth: 0,
gapWidth: 1
},
upperLabel: {
show: false
}
},
{
itemStyle: {
borderColor: '#555',
borderWidth: 5,
gapWidth: 1
},
emphasis: {
itemStyle: {
borderColor: '#ddd'
}
}
},
{
colorSaturation: [0.35, 0.5],
itemStyle: {
borderWidth: 5,
gapWidth: 1,
borderColorSaturation: 0.6
}
}
];
}
myChart.setOption(
(option = {
title: {
text: 'gdp',
left: 'center'
},
tooltip: {
formatter: function (info) {
var value = info.value[0];
var treePathInfo = info.treePathInfo;
var treePath = [];
for (var i = 1; i < treePathInfo.length; i ) {
treePath.push(treePathInfo[i].name);
}
return [
'<div class="tooltip-title">'
echarts.format.encodeHTML(treePath.join('/'))
'</div>',
'GDP: ' echarts.format.addCommas(value) ' 亿'
].join('');
}
},
series: [
{
name: '2010年全国各行政区域各省GDP',
type: 'treemap',
visibleMin: 300,
label: {
show: true,
formatter: '{b}'
},
upperLabel: {
show: true,
height: 30
},
itemStyle: {
borderColor: '#fff'
},
levels: getLevelOption(),
data: result
}
]
})
);
},
error:function (msg) {
console.log(msg);
alert('系统发生错误');
}
})
</script>
</body>
</html>
