aaron-1015
/
hhh_flow_wk_report


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
							<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="/static/echarts.js"></script>
    <script src="/static/req.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="overview" style="width: 1200px;height:400px;"></div>

    <!-- <div id="organic", style="width: 1200px;height:400px;">
        <div id="organic_users" style="width: 600px;height:400px;float:left;"></div>
        <div id="organic_newuser" style="width: 600px;height:400px;float:right"></div>
    </div> -->

    <div id="social", style="width: 1200px;height:400px;"></div>
    <div id="organic", style="width: 1200px;height:400px;"></div>
    <div id="keyword-bar", style="width: 1200px;height:400px;"></div>
    <div id="keyword-table", style="width: 1200px;height:400px;"></div>
    <div id='test-social'> social numbers: {{ users }}</div>
    

    <script type="text/javascript">
        // 基於準備好的DOM，初始化echarts實例
        // Overview

        var week_num = 31;

        var overview_users_charts = echarts.init(document.getElementById("overview"));
        var social_users_charts = echarts.init(document.getElementById('social'));
        var organic_users_charts = echarts.init(document.getElementById('organic'));
        var keyword_bar = echarts.init(document.getElementById('keyword-bar'));


        // 1. Overview
        // 從fastapi取得data, 然後畫echarts
        fetch(`http://127.0.0.1:8000/users/${week_num}`)
        .then(function(response) {
            return response.json();
        })
        .then(function(myJson) {
            // 配置圖表資訊
            console.log(myJson);
            var option = {
            title: {
                text: `hhh 流量週報圖表: W${week_num} Overview`
            },
            tooltip: {},
            legend: {
                data:['Organic-新使用者人數', 'Organic-使用者人數', 'Social-新使用者人數', 'Social-使用者人數']
            },
            xAxis: {
                // 這邊要放日期
                data: myJson['dates']
            },
            yAxis: {},
            series: [
                {
                    name: 'Organic-新使用者人數',
                    type: 'line',
                    data: myJson['organic_newusers']
                },
                {
                    name: 'Organic-使用者人數',
                    type:'line',
                    data: myJson['organic_users']
                },
                {
                    name: 'Social-新使用者人數',
                    type: 'line',
                    data: myJson['social_newusers']
                },
                {
                    name: 'Social-使用者人數',
                    type:'line',
                    data: myJson['social_users']
                }
            ]
            };
            // 使用刚指定的配置项和数据显示图表。
            overview_users_charts.setOption(option);
        });

        // 2. social
        // 從fastapi取得data, 然後畫echarts
        fetch(`http://127.0.0.1:8000/users/${week_num}`)
        .then(function(response) {
            return response.json();
        })
        .then(function(myJson) {
            // 配置圖表資訊
            console.log(myJson);
            var option = {
            title: {
                text: `hhh 流量週報圖表(Social): W${week_num}`
            },
            tooltip: {},
            legend: {
                data:['Social-新使用者人數', 'Social-使用者人數']
            },
            xAxis: {
                // 這邊要放日期
                data: myJson['dates']
            },
            yAxis: {},
            series: [
                {
                    name: 'Social-新使用者人數',
                    type: 'line',
                    data: myJson['social_newusers']
                },
                {
                    name: 'Social-使用者人數',
                    type: 'line',
                    data: myJson['social_users']
                }
            ]
            };
            // 使用刚指定的配置项和数据显示图表。
            social_users_charts.setOption(option);
        });
        
        // 3. organic
        // 從fastapi取得data, 然後畫echarts
        fetch(`http://127.0.0.1:8000/users/${week_num}`)
        .then(function(response) {
            return response.json();
        })
        .then(function(myJson) {
            // 配置圖表資訊
            console.log(myJson);
            var option = {
            title: {
                text: `hhh 流量週報圖表(Organic): W${week_num}`
            },
            tooltip: {},
            legend: {
                data:['Organic-新使用者人數', 'Organic-使用者人數']
            },
            xAxis: {
                // 這邊要放日期
                data: myJson['dates']
            },
            yAxis: {},
            series: [
                {
                    name: 'Organic-新使用者人數',
                    type: 'line',
                    data: myJson['organic_newusers']
                },
                {
                    name: 'Organic-使用者人數',
                    type: 'line',
                    data: myJson['organic_users']
                }
            ]
            };
            // 使用刚指定的配置项和数据显示图表。
            organic_users_charts.setOption(option);
        });

        // 4. keyword sort-bar
        fetch(`http://127.0.0.1:8000/keywords/${week_num}`)
        .then(function(response) {
            return response.json();
        }).then(function(myJson) {
            // 配置sorted-bar
            console.log(myJson);
            option = {
                xAxis: {
                    type: 'category',
                    axisLabel: {
                        interval: 0,    // 橫軸全部顯示
                        rotate: -30     // -30度傾斜顯示
                    },
                    data: myJson['keywords']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: myJson['keywords_growth'],
                    type: 'bar'
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            keyword_bar.setOption(option);
        });

        
    </script>
</body>
</html>