机场&代理商-关系图
机场&代理商-关系图
思路
①首先统计机场活跃度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 ...
随机推荐
- Luogu P4546 [THUWC2017]在美妙的数学王国中畅游
题意 题意奇奇怪怪,这里就不写了. \(\texttt{Data Range:}1\leq n\leq 10^5,1\leq m\leq 2\times 10^5\) 题解 为什么你们都是卡在数学方面 ...
- 如何在 Debian 9 上搭建 LNMP 环境
步骤一.安装Nginx Nginx在默认的Debian存储库中可用. 使用以下命令更新软件包索引并安装Nginx: sudo apt update sudo apt install nginx 安装过 ...
- linux添加自动清空缓存
1. cleanCache.sh vim cleanCache.sh #!/bin/bash #每两小时清除一次缓存 echo "开始清除缓存" sync;sync;sync #写 ...
- 求0到n之间素数个数的序列
要求: (1) 找出0-1000之间素数(2) 设f(n)表示0-n之间的素数个数,计算出当n=0,1,2,3,.....,997时f(n)的值,并写入文件 分析: 首先找素数使用一个效率较高的方法- ...
- JavaSE基础语法学习-异常
异常 异常指程序运行中出现的不期而至的各种状况,如:文件找不到.网络连接失败.非法参数等. 异常发生在程序运行期间,它影响了正常的程序执行流程. 比如说,你的代码少了一个分号,那么运行出来结果是提示是 ...
- wpf 全局异常捕捉+简单日志记录
`namespace MyApp { /// /// App.xaml 的交互逻辑 /// public partial class App : Application { public App() ...
- C语言I博课作业04
这个作业属于哪个课程 C语言程序设计II 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/SE2020-1/homework/11489 我在这个作业课程 ...
- 【RabbitMQ-7】RabbitMQ—交换机标识符
死信队列概念 死信队列(Dead Letter Exchange),死信交换器.当业务队列中的消息被拒绝或者过期或者超过队列的最大长度时,消息会被丢弃,但若是配置了死信队列,那么消息可以被重新发布到另 ...
- Visual Studio2013应用笔记---WinForm事件中的Object sender和EventArgs e参数
Windows程序有一个事件机制.用于处理用户事件. 在WinForm中我们经常需要给控件添加事件.例如给一个Button按钮添加一个Click点击事件.给TextBox文本框添加一个KeyPress ...
- Mysql分区、分表、分库
1.MySQL分区 一般情况下我们创建的表对应一组存储文件,使用MyISAM存储引擎时是一个.MYI和.MYD文件,使用Innodb存储引擎时是一个.ibd和.frm(表结构)文件. 当数据量较大时( ...