机场&代理商-关系图
机场&代理商-关系图
思路
①首先统计机场活跃度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 ...
随机推荐
- Vulnhub DC3
靶机简介 C-3是另一个专门建造的易受攻击的实验室,目的是获得渗透测试领域的经验.与以前的DC版本一样,这个版本是为初学者设计的,尽管这次只有一个标志,一个入口点,根本没有线索.Linux技能和熟悉L ...
- Java学习的第二十六天
1.过滤处理流 DataOutputStream输入数据 用DataInputStream读数据 2.方法太多记不清 3.明天学习内存操作流和缓冲流
- JS对象创建的几种方式整理
本文主要介绍了JS对象创建的几种方式 第一种:Object构造函数创建 var Person = new Object(); Person.name = 'Nike'; Person.age = ...
- SWT JFace 小制作 文本阅读器
1 package swt_jface.demo11; 2 import java.io.File; 3 import java.io.FileInputStream; 4 import java.i ...
- 依赖注入DI（IOC）容器快速入门
1.什么是IOC IOC是一种设计模式,全程控制翻转或叫依赖注入.更详细介绍见http://martinfowler.com/articles/injection.html 2.为什么用IOC 我们通 ...
- 070_GUI编程
目录 简介 图形用户界面 Graphical User Interface,简称 GUI,又称图形用户接口 GUI核心技术:Swing AWT 不再流行的原因 为什么学习 AWT AWT(Abstra ...
- Pandas_VBA_数据分类比较
Python与VBA的比较2 需求: input文件中有两列数据,第一列为Name,第二列为Score,Name列里有重复的值,要求按照name的唯一值统计 score,输出到output文件按中. ...
- S5830 android 2.3.4和2.3.7
12年元旦买的手机S5830,原机自带2.3.4的系统. 看到人家的机子2.3.6的效果稍微绚一点,动了想刷机的念头. 前两天刷了2.3.7,效果还满意,用的还舒服,感觉就是有些费电, 本来就对智能手 ...
- linux 协议栈 实现--编码小知识分析
unlikely 以及likely 作用: rcu_read_lock 以及rcu_read_unlock 作用: rcu_dereference .rcu_dereference_protecte ...
- fcntl函数用法——设置文件锁
fcntl函数.锁定文件,设置文件锁.设置获取文件锁:F_GETLK .F_SETLK .F_SETLKW文件锁结构,设置好用于fcntl函数的第三个参数.struct flock{ shor ...