机场&代理商-关系图
机场&代理商-关系图
思路
①首先统计机场活跃度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 ...
随机推荐
- 《Head First 设计模式》：迭代器模式
正文 一.定义 迭代器模式提供一种方法顺序访问一个聚合对象中的各个元素,而又不暴露其内部的表示. 要点: 迭代器模式把在元素之间游走的责任交给迭代器,而不是聚合对象.这样简化了聚合的接口和实现,也让责 ...
- JMeter实战(三) 界面使用
JMeter 有 2 种运行方式,一种是 CLI,一种是 GUI,本篇文章就来介绍一下后者,图形用户界面,因为后续文章大部分都是基于 GUI 的. 本文演示的是英文版,想用中文的同学可以在菜单栏点击 ...
- Java安全框架（一）Spring Security
Java安全框架(一)Spring Security 文章主要分三部分 1.Spring Security的架构及核心组件:(1)认证:(2)权限拦截:(3)数据库管理:(4)权限缓存:(5)自定 ...
- 【Java GC系列】垃圾收集简介（1）
说明: 在本文中, Garbage Collection 翻译为 "垃圾收集", garbage collector 翻译为 "垃圾收集器"; 一般认为, 垃圾 ...
- nginx处理vue打包文件后的跨域问题
起因 在vue文件打包后,项目脱离了vue配置的反向代理配置,还是会报跨域的错误,或者直接打不开本地文件, 但是此刻我们想打开打包后的文件,测试一下文件有没有错误,因为经常会存在开发阶段没有问题,打包 ...
- Spark集群和任务执行
[前言:承接<Spark通识>篇] Spark集群组件 Spark是典型的Master/Slave架构,集群主要包括以下4个组件: Driver:Spark框架中的驱动器,运行用户编写Ap ...
- Centos中部署NetCore项目（二）
前言 在centos中部署程序,一般都不会是使用控制台进程直接启动,或者是后台运行.而是一些守护进程管理工具进行管理,例如supervisor. 部署Web相关程序,使用nginx是比较普遍的, 安装 ...
- Zookeeper源码（启动+选举）
简介 关于Zookeeper,目前普遍的应用场景基本作为服务注册中心,用于服务发现.但这只是Zookeeper的一个的功能,根据Apache的官方概述:"The Apache ZooKeep ...
- 知识补充之Django缓存
缓存 简单概括就是将对数据库操作查询所得到的数据放入另外一台机器上(缓存)中,当用户再次请求时,直接去缓存中拿,避免对数据库的频繁操作,加快数据的显示时间,需要知道的是,缓存里面的数据一般都设置有超时 ...
- 英特尔与 Facebook 合作采用第三代英特尔® 至强® 可扩展处理器和支持 BFloat16 加速的英特尔® 深度学习加速技术，提高 PyTorch 性能
英特尔与 Facebook 曾联手合作,在多卡训练工作负载中验证了 BFloat16 (BF16) 的优势:在不修改训练超参数的情况下,BFloat16 与单精度 32 位浮点数 (FP32) 得到了 ...