关于flask入门教程-ajax+echarts实现矩形树图

矩形树图将层次结构的数据显示为一组嵌套矩形。树的每个分支都有一个矩形，然后用代表子分支的较小矩形平铺。

叶子节点的矩形面积与数据占比成比例。通常，叶节点会用不同的颜色来显示数据的关联维度。

矩形图要比饼状图呈现的单元多一些，且量化性更好。

由于数据库中未存储各行政区对应的省市自治区信息，在这里用了个字典进行存储，对行政区和相关省进行遍历，再将省代入省的GDP字典中进行查找，生成行政的总GDP和人均GDP。

@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=0avggdp=0num=0gdpdict['name']=areagdpdict['path'] = areafor province in provincelist:childrendict={}# 构造子节点的数据，从省GDP数据中的获取相关经济数据childrendict['name']=provincechildrendict['path'] = area+':'+provincechildrendict['value']=provicevaluedict[province]# 计算行政区域GDP和平均GDPgdp+=provicevaluedict[province][0]avggdp+=provicevaluedict[province][1]num+=1# 加入子节点列表childrengdplist.append(childrendict)# 继续构造行政区域字典数据，并追加到列表中gdpdict['value'] = [gdp,avggdp/num]gdpdict['children'] = childrengdplistgdpdictlist.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 whateverreturn jsonify(gdpdictlist)@app.route('/echartdemo8')
def echartdemo8():return render_template('echartdemo8.html')

在前端页面只要遵循echarts的要求格式就好了，避免做转换，毕竟不是搞前端代码的。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><!-- 引入刚刚下载的 ECharts 文件 --><!--script src="..\static\js\echarts.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>

最后，谢谢关注，谢谢支持！

关于flask入门教程-ajax+echarts实现矩形树图相关推荐

关于flask入门教程-ajax+echarts实现大屏展示
陆陆续续写了一个系列的flask入门教程了,最后以一个半成品大屏做个了结,也算是一段时间的成果吧,毕竟不是专业码农,只是爱好而已,还有很多其他的事情等待探索. 大屏用到的技术主要包括标准的HTML.C ...
关于flask入门教程-ajax+echarts简单实现一
ECharts是一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表. 本文通过echarts官网上的一个标准样例开始flask+ajax+echart ...
关于flask入门教程-ajax+echarts实现热力图
热力图 (Heatmap) 通过色彩变化来显示数据,热力图适合用来交叉检查多变量的数据.显示是否有彼此相似的变量:以及检测彼此之间是否存在任何相关性.也可以展现随着时间的变化指标的发展. 热力图依赖颜 ...
关于flask入门教程-ajax+echarts实现关系图
关系图,从字面上可以看出,为关系的图形,既然为关系,那么就需要有点以及关系,用来表示点与点之间的联系.所以我们可以得出:关系图需要两个必要的元素,节点,关系,其中关系需要包含有联系的节点以及节点联系说 ...
关于flask入门教程-ajax+echarts实现地图热力图
热力图是通过密度函数进行可视化用于表示地图中点的密度的热图.它使人们能够独立于缩放因子感知点的密度. 以上是传统的热力图定义,现今热力图在网页分析.业务数据分析等其他领域也有较为广泛的应用. 1.热力 ...
关于flask入门教程-ajax+echarts实现地图GDP展示
地图可视化就是将地理数据转换成可视化形态,通过将具有地域特征的数据或者数据分析结果形象地表现在地图上,使得用户可以更加容易理解数据规律和趋势.通俗地讲,地图可视化可以将地理数据更清晰直白地展现出来. ...
关于flask入门教程-ajax+百度地图实现热力图
热力图是通过密度函数进行可视化用于表示地图中点的密度的热图.它使人们能够独立于缩放因子感知点的密度. 前文也讲了关于max.pointsize.blursize这几个值一直也没找到最合适的处理办法.所 ...
Python之Flask入门教程
Flask简介 Flask是一个用python编写的Web应用程序框架.Armin Ronacher带领一个名为Pocco的国际Python爱好者团队开发了Flask.Flask基于Werkzeug ...
关于flask入门教程-自定义弹出框
SweetAlert可以替代Javascript原生的alert和confirm等函数呈现的弹出提示框,它将提示框进行了美化,并且允许自定义,支持设置提示框标题.提示类型.内容展示图片.确认取消按钮文 ...

关于flask入门教程-ajax+echarts实现矩形树图

关于flask入门教程-ajax+echarts实现矩形树图相关推荐

最新文章

热门文章