关于flask入门教程-ajax+echarts实现关系图
关于flask入门教程-ajax+echarts实现关系图
python与大数据分析
发布于 2022-03-11 17:21:02
发布于 2022-03-11 17:21:02
文章被收录于专栏：python与大数据分析
关系图，从字面上可以看出，为关系的图形，既然为关系，那么就需要有点以及关系，用来表示点与点之间的联系。所以我们可以得出：关系图需要两个必要的元素，节点，关系，其中关系需要包含有联系的节点以及节点联系说明。
关系图是指使用图形和连线表示节点与节点（人物或是事物）之间关系的一类图。下图是一个关系图示例，展示人物之间的关系。每个节点的颜色表示他们的类型，圆圈大小表示每个人的声望大小，圆圈越大，声望越大。
原本想做的复杂一些，包括分类设置，想了想不是很成熟就算了，这次简化了将地市转换为编号的过程。
@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'] = nodedict
relationdata['links'] = relationdatalist
response = jsonify(relationdata)
response.status_code = 200 # or 400 or whatever
return 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>本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2022-03-11，如有侵权请联系 cloudcommunity@tencent.com 删除
本文分享自 python与大数据分析 微信公众号，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文参与 腾讯云自媒体同步曝光计划 ，欢迎热爱写作的你一起参与！
评论
登录后参与评论
推荐阅读
腾讯云开发者
