机场&代理商-关系图
机场&代理商-关系图
思路
①首先统计机场活跃度Top10的机场名称，以下是我的表结构，以及查询语句
表结构：
查询语句：SELECT * from 2020csale ORDER BY cnt desc LIMIT 10;
cnt是我统计的活跃度，也就是机场的交易次数
②查询代理商前Top10，以下是我的表结构，以及查询语句
表结构
查询语句：SELECT * from 2020buyandsale ORDER BY buycount desc LIMIT 10;这里的排序是根据buycount来判断活跃度的，因为代理商与机场发生的关系，只能是代理商购买机场的票，因此只需要根据buycout来判断就行。
③建立代理商-机场的关系
首先我们需要考虑到：
上一步求出的Top10代理商必须和求出的Top10机场建立联系，除Top10之外的机场就不需要了
查询语句如下：select * from 2020xlf WHERE sale_nbr IN (SELECT Cid from (SELECT Cid from 2020csale ORDER BY cnt desc LIMIT 10) tt) and buy_nbr='O5593' GROUP BY sale_nbr ORDER BY sale_nbr;
这里面有个嵌套语句，因为in和limit不能在同一层，因此又往下写了一层。
④图表展示
可以参考这个博文，先练习一下：https://blog.csdn.net/qq_38737992/article/details/89042164
然后通过ajax来进行异步数据刷新：
var oids=[];
var cids=[];
var datas=[];
var links=[]; $.ajax({
url: "getObuyandsale",
type: "POST",
dataType: "JSON",
async: true,
success: function (data) {
for (var i=0;i<data.length;i++)
{
oids[i]=data[i].Oid;
tmp={name:data[i].Oid,des:data[i].Oid+"代理商",symbolSize: data[i].buycount, category:0};
datas.push(tmp);
//var sum=data[i].salecount+data[i].buycount;
}
$.ajax({
url: "getCsale",
type: "POST",
dataType: "JSON",
async: true,
success: function (data) {
for (var i=0;i<data.length;i++)
{
cids[i]=data[i].Cid;
alert(data[i].cnt);
tmp={name:data[i].Cid,des:data[i].Cid+"机场",symbolSize: data[i].cnt, category:1};
datas.push(tmp);
//var sum=data[i].cnt;
}
stroid="";
for(var i=0;i<oids.length;i++)
stroid+=oids[i]+",";
//alert(stroid);
$.ajax({
url: "getralition",
type: "POST",
data: {"oid": stroid},
dataType: "JSON",
async: true,
success: function (data) {
for(var i=0;i<data.length;i++)
{
tmp={source:data[i].buy_nbr,target:data[i].sale_nbr,name:'购买',des:'购买'+data[i].sale_nbr+"机场的票"};
links.push(tmp);
}
myChart.setOption({
series:[{
data:datas,
links:links
}]
});
},
error: function (e) {
alert("出现错误！！");
}
});
},
error: function (e) {
alert("出现错误！！");
}
});
},
error: function (e) {
alert("出现错误！！");
}
});
整个代码奉上：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>统计图表</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:1000px;height:800px"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var categories = []; categories[0] = {
name: '代理商'
};
categories[1] = {
name: '机场'
}; option = {
// 图的标题
title: {
text: '代理商与机场 关系图'
},
// 提示框的配置
tooltip: {
formatter: function (x) {
return x.data.des;
}
},
// 工具箱
toolbox: {
// 显示工具箱
show: true,
feature: {
mark: {
show: true
},
// 还原
restore: {
show: true
},
// 保存为图片
saveAsImage: {
show: true
}
}
},
legend: [{
// selectedMode: 'single',
data: categories.map(function (a) {
return a.name;
})
}],
series: [{
type: 'graph', // 类型:关系图
layout: 'force', //图的布局，类型为力导图
symbolSize: 40, // 调整节点的大小
roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [2, 10],
edgeLabel: {
normal: {
textStyle: {
fontSize: 20
}
}
},
force: {
repulsion: 2500,
edgeLength: [10, 50]
},
draggable: true,
lineStyle: {
normal: {
width: 2,
color: '#4b565b',
}
},
edgeLabel: {
normal: {
show: true,
formatter: function (x) {
return x.data.name;
}
}
},
label: {
normal: {
show: true,
textStyle: {}
}
},
// 数据
data: [],
links: [],
categories: categories,
}]
};
myChart.setOption(option); var oids=[];
var cids=[];
var datas=[];
var links=[]; $.ajax({
url: "getObuyandsale",
type: "POST",
dataType: "JSON",
async: true,
success: function (data) {
for (var i=0;i<data.length;i++)
{
oids[i]=data[i].Oid;
tmp={name:data[i].Oid,des:data[i].Oid+"代理商",symbolSize: data[i].buycount, category:0};
datas.push(tmp);
//var sum=data[i].salecount+data[i].buycount;
}
$.ajax({
url: "getCsale",
type: "POST",
dataType: "JSON",
async: true,
success: function (data) {
for (var i=0;i<data.length;i++)
{
cids[i]=data[i].Cid;
alert(data[i].cnt);
tmp={name:data[i].Cid,des:data[i].Cid+"机场",symbolSize: data[i].cnt, category:1};
datas.push(tmp);
//var sum=data[i].cnt;
}
stroid="";
for(var i=0;i<oids.length;i++)
stroid+=oids[i]+",";
//alert(stroid);
$.ajax({
url: "getralition",
type: "POST",
data: {"oid": stroid},
dataType: "JSON",
async: true,
success: function (data) {
for(var i=0;i<data.length;i++)
{
tmp={source:data[i].buy_nbr,target:data[i].sale_nbr,name:'购买',des:'购买'+data[i].sale_nbr+"机场的票"};
links.push(tmp);
}
myChart.setOption({
series:[{
data:datas,
links:links
}]
});
},
error: function (e) {
alert("出现错误！！");
}
});
},
error: function (e) {
alert("出现错误！！");
}
});
},
error: function (e) {
alert("出现错误！！");
}
}); </script>
</body>
</html>
图标显示：
机场&代理商-关系图的更多相关文章
- Ambari服务依赖关系图生成脚本
1. 生成服务依赖关系 #!/usr/bin/python import sys import commands import json def genDependString(ip): url=&q ...
- Echarts3 关系图-力导向布局图
因为项目需要,要求实现类似力导图效果的图,我就瞄上了echarts. 注意事项1:由于我的项目要部署到内网,所以js文件要在本地,网上大多力导图都是echarts2的,而其又依赖zrender基础库, ...
- (转)整体把握jQuery -jQuery 的原型关系图
整体把握jQuery -jQuery 的原型关系图 (原)http://www.html5cn.org/article-6529-1.html 2014-7-2 17:12| 发布者: html5cn ...
- 使用MySQL Workbench导出MySQL数据库关系图
1. 点击MySQL Workbench中间Data Modeling下的Create EER Model From Existing Database: 2. 在Stored Connection中 ...
- tcp/ip协议栈调用关系图
最近阅读了tcp/ip详解卷2,总结一下整个发送过程和接收过程 sendmsg \/ sendit \/ sosend(这一步将数据从用户空间拷贝到内核空间,并且会在这一步判断发送缓存空间是否充足,是 ...
- [CareerCup] 15.6 Entity Relationship Diagram 实体关系图
15.6 Draw an entity-relationship diagram for a database with companies, people, and professionals (p ...
- jQuery 的原型关系图，整体把握jQuery
若干个月前,在博客园中看到一篇文章,内容很简单,就是一幅图,展示的是 jQuery 中各对象之间的关系,当时就觉得,这就是我想要的最直观的总结 jQuery 的方式.在那篇文章中,也有 ...
- IDEA的查询引用、调用关系图的功能
Eclipse的"Call Hierarchy"可以查看一个Java方法或类成员变量的调用树(caller和callee两个方向),非常方便. 在IDEA中类似功能被划分到了三个命 ...
- c语言分析函数调用关系图(call graph)的几种方法
一.基于 Doxygen或 lxr 的API形式的文档系统. 二.基于CodeViz, CodeViz是<Understanding The Linux Virtual Memory Manag ...
随机推荐
- 【实战】记一次老项目的swagger整合
1.背景 这两天接到一个整合swagger的任务,本以为很简单,预计两小时内完成,没想到其中有太多的坑,整了两天才完成. 首先项目是一个比较老的项目,之前用的servlet,目前在重构为springm ...
- 联发科Mediatek工业路由芯片上网稳定低功耗的Router模块WiFi中继——无线AP定制方案
Router模块又名路由器模块,是指将路由器的接口类型及部分扩展功能是可以根据实际需求来进行无线接入服务,允许其他无线设备接入,通过局域无线端或联网远程端,进行数据访问,对无线设备进行远程控制.常见的 ...
- 云计算之路-出海记：整一台 aws 免费云服务器
上次蹭到一张船票,登上了 aws 这艘巨轮,今天要在船上的免费餐厅吃一顿免费晚餐 -- 整一台 aws 免费套餐中的 EC2 服务器体验一下. 进入 EC2 控制台,点击"启动实例" ...
- C# OpenFileDialog和SaveFileDialog的常见用法
#region 示例1 SaveFileDialog sfd = new SaveFileDialog(); //设置文件类型 sfd.Filter = "备份文件(*.bak)|*.bak ...
- Magic Method
Python 的 Magic Method 在 Python 中,所有以 "__" 双下划线包起来的方法,都统称为"魔术方法".比如我们接触最多的 __init ...
- ssh连接缓慢的问题分析
之前遇到ssh连接缓慢的问题 一般会检查Server端 /etc/ssh/sshd_config配置文件的两个地方 1.设置UseDNS no 因为我们ssh连接服务器的话 如果UseDNS选项是打开 ...
- Linux内核调度分析（转，侵删）
多任务 并发和并行 Linux作为一个多任务操作系统,必须支持程序的并发执行. 分类 非抢占式多任务 除非任务自己结束,否则将会一直执行. 抢占式多任务(Linux) 这种情况下,由调度程序来决定什么 ...
- 基于 Nebula Operator 的 K8s 自动化部署运维
摘要:Nebula Operator 是 Nebula Graph 在 Kubernetes 系统上的自动化部署运维插件.在本文,你将了解到 Nebula Operator 的特性及它的工作原理. 从 ...
- SpringBoot Redis切换数据库遇到的坑
项目不同业务的redis数据存在不同的库中,操作数据需要切换redis库,在网上找了一段代码,确实可以切换数据库.但是使用一段时间后发现部分数据存储的数据库不正确,排查后发现setDatabase是线 ...
- python分类
python是一种动态解释性的强类型语言. python下分几个类别,分别是cpython,jypython,ironpython,pypy等等,这些属于不同的解释器,但编写规范只有一个就是pytho ...