機場&代理商-關係圖
思路
①首先統計機場活躍度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>
圖示顯示：
