機場&代理商-關係圖

清風紫雪發表於2020-11-29

機場&代理商-關係圖

思路

①首先統計機場活躍度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>

 

圖示顯示：

相關文章