关于flask入门教程-ajax+echarts实现关系图

关系图，从字面上可以看出，为关系的图形，既然为关系，那么就需要有点以及关系，用来表示点与点之间的联系。所以我们可以得出：关系图需要两个必要的元素，节点，关系，其中关系需要包含有联系的节点以及节点联系说明。

关系图是指使用图形和连线表示节点与节点（人物或是事物）之间关系的一类图。下图是一个关系图示例，展示人物之间的关系。每个节点的颜色表示他们的类型，圆圈大小表示每个人的声望大小，圆圈越大，声望越大。

原本想做的复杂一些，包括分类设置，想了想不是很成熟就算了，这次简化了将地市转换为编号的过程。

@app.route('/getjson15', methods=['GET'])
def getjson15():# 原本想给每个表做个归类，但每个表都与表是多对多关联，没办法归到一个结果表中# sql = "select distinct outputtable from bloodrelationship"# desttable = db.session.execute(sql).fetchall()# keyword = {}# categories = [{'name': x['outputtable'], 'keyword': keyword} for x in desttable]# # [{'name': 'TM_YX_BBTJ_BYQXXQK_HN', 'keyword': {}},# # ...# #  {'name': 'TM_YX_BBTJ_BZJDQKYBLJQK_HN', 'keyword': {}}# desttablelist = [x['outputtable'] for x in desttable]# # ['TM_YX_BBTJ_BYQXXQK_HN',# # ...# #  'TM_YX_BBTJ_BZJDQKYBLJQK_HN'# desttabledict = {element: i for i, element in enumerate(desttablelist)}# # {'TM_YX_BBTJ_BYQXXQK_HN': 0,# # ...# #  'TM_YX_BBTJ_BZJDQKYBLJQK_HN': 1}# 获取源表和目标表的去重后的集合tables = db.session.execute("select distinct tablename from (select inputtable tablename from bloodrelationship union select outputtable from bloodrelationship) ").fetchall()# 生成表列表为下面使用做准备tablelist = [x['tablename'] for x in tables]# 给每个表加上编号，为关系匹配对做准备tabledict = {element:i for i, element in enumerate(tablelist)}# 基于表结果生成节点信息nodedict=[{'name':x['tablename'],'value':1,'category':0} for x in tables]sql = "select inputtable,outputtable from bloodrelationship"relationresult = db.session.execute(sql).fetchall()relationtablelist = [[x['inputtable'],x['outputtable']] for x in relationresult]# [['TM_YX_BBTJ_BYQXXQK_HN', 'TM_YX_BBTJ_BYQXXQK_HN'],# ['TWB_P_XT_ZZ', 'TM_YX_BBTJ_BYQXXQK_HN']relationdatalist = [{'source': tabledict[tablerelation[0]], 'target': tabledict[tablerelation[1]]}for tablerelation in relationtablelist]# [{'source': 5, 'target': 5},#  {'source': 454, 'target': 5}relationdata = {}relationdata['type'] = 'force'relationdata["categories"] =  [{'name': 'relation', 'keyword': {}}]relationdata['nodes'] = nodedictrelationdata['links'] = relationdatalistresponse = jsonify(relationdata)response.status_code = 200  # or 400 or whateverreturn jsonify(relationdata)@app.route('/echartdemo15')
def echartdemo15():return render_template('echartdemo15.html')

前端代码仍然没什么可讲的，比较简单

<!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: 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:'/getjson15',result:{},type:'GET',dataType:'json',success:function(result){option = {legend: {data: []},series: [{type: 'graph',layout: 'force',animation: false,label: {position: 'right',formatter: '{b}'},draggable: true,data: result.nodes.map(function (node, idx) {node.id = idx;return node;}),categories: result.categories,force: {edgeLength: 5,repulsion: 20,gravity: 0.2},edges: result.links}]};myChart.setOption(option);},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实现矩形树图
矩形树图将层次结构的数据显示为一组嵌套矩形.树的每个分支都有一个矩形,然后用代表子分支的较小矩形平铺. 叶子节点的矩形面积与数据占比成比例.通常,叶节点会用不同的颜色来显示数据的关联维度. 矩形图要比 ...
关于flask入门教程-ajax+echarts实现热力图
热力图 (Heatmap) 通过色彩变化来显示数据,热力图适合用来交叉检查多变量的数据.显示是否有彼此相似的变量:以及检测彼此之间是否存在任何相关性.也可以展现随着时间的变化指标的发展. 热力图依赖颜 ...
关于flask入门教程-ajax+echarts实现地图热力图
热力图是通过密度函数进行可视化用于表示地图中点的密度的热图.它使人们能够独立于缩放因子感知点的密度. 以上是传统的热力图定义,现今热力图在网页分析.业务数据分析等其他领域也有较为广泛的应用. 1.热力 ...
关于flask入门教程-ajax+echarts实现地图GDP展示
地图可视化就是将地理数据转换成可视化形态,通过将具有地域特征的数据或者数据分析结果形象地表现在地图上,使得用户可以更加容易理解数据规律和趋势.通俗地讲,地图可视化可以将地理数据更清晰直白地展现出来. ...
关于flask入门教程-ajax+百度地图实现热力图
热力图是通过密度函数进行可视化用于表示地图中点的密度的热图.它使人们能够独立于缩放因子感知点的密度. 前文也讲了关于max.pointsize.blursize这几个值一直也没找到最合适的处理办法.所 ...
【echarts】echarts绘制关系图
echarts绘制关系图,效果如图,粗麻编写,教程往下看 1.vue安装echarts npm install echarts 2.引入echarts 3.在VUE页面中编写遇到问题:关系数据显示不 ...
Echarts绘制关系图
文章目录基本应用节点重名问题解决方案两点之间如何绘制多条连线 Echarts图随着浏览器窗口的变化而变化今天要发博客,因为今天再不发,2020就过去啦! 最近需要用到Echarts绘制关系图, ...

关于flask入门教程-ajax+echarts实现关系图

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

最新文章

热门文章