andrey
/
CoffeeProject
forked from rita/CoffeeProject


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Smart Coffee - Chart</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

    <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <!--
    <script src="../static/js/sign_in.js"></script>

    <link rel="stylesheet" href="../static/css/sign_in.css">
    -->
    <!--引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

    <script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js'></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/0.3.0/Chart.Zoom.min.js"></script>

    <script language="JavaScript">

    </script>
</head>

<body>
    <a href="/dry">返回乾燥槽介面</a>
    <div style="text-align: center; margin-top:0px; font-size: 24px;">
        Smart Coffee
    </div>
    <!--
    <form action="/chart/SHT11_Temp/{{tid}}" method="post">
        <div class="form-group" style="margin-top: 30px; text-align: center;">
    -->
    <table style="margin: auto; border:3px gray solid; width: 80%; text-align: center;" cellpadding="6" rules='ALL'>
        <tr>
            <td>
                {% if tid == '2'%}
                <select id="tank_num">
                    <option value="D1">乾燥槽_1</option>
                    <option value="D2" selected>乾燥槽_2</option>
                    <option value="D3">乾燥槽_3</option>
                    <option value="D4">乾燥槽_4</option>
                    <option value="D5">乾燥槽_5</option>
                    <option value="D6">乾燥槽_6</option>
                    <option value="D7">乾燥槽_7</option>
                    <option value="D8">乾燥槽_8</option>
                    <option value="D9">乾燥槽_9</option>
                    <option value="D10">乾燥槽_10</option>
                    <option value="D11">乾燥槽_11</option>
                    <option value="D12">乾燥槽_12</option>
                </select>
                {% elif tid == '3'%}
                <select id="tank_num">
                    <option value="D1">乾燥槽_1</option>
                    <option value="D2">乾燥槽_2</option>
                    <option value="D3" selected>乾燥槽_3</option>
                    <option value="D4">乾燥槽_4</option>
                    <option value="D5">乾燥槽_5</option>
                    <option value="D6">乾燥槽_6</option>
                    <option value="D7">乾燥槽_7</option>
                    <option value="D8">乾燥槽_8</option>
                    <option value="D9">乾燥槽_9</option>
                    <option value="D10">乾燥槽_10</option>
                    <option value="D11">乾燥槽_11</option>
                    <option value="D12">乾燥槽_12</option>
                </select>
                {% elif tid == '4'%}
                <select id="tank_num">
                    <option value="D1">乾燥槽_1</option>
                    <option value="D2">乾燥槽_2</option>
                    <option value="D3">乾燥槽_3</option>
                    <option value="D4" selected>乾燥槽_4</option>
                    <option value="D5">乾燥槽_5</option>
                    <option value="D6">乾燥槽_6</option>
                    <option value="D7">乾燥槽_7</option>
                    <option value="D8">乾燥槽_8</option>
                    <option value="D9">乾燥槽_9</option>
                    <option value="D10">乾燥槽_10</option>
                    <option value="D11">乾燥槽_11</option>
                    <option value="D12">乾燥槽_12</option>
                </select>
                {% elif tid == '5'%}
                <select id="tank_num">
                    <option value="D1">乾燥槽_1</option>
                    <option value="D2">乾燥槽_2</option>
                    <option value="D3">乾燥槽_3</option>
                    <option value="D4">乾燥槽_4</option>
                    <option value="D5" selected>乾燥槽_5</option>
                    <option value="D6">乾燥槽_6</option>
                    <option value="D7">乾燥槽_7</option>
                    <option value="D8">乾燥槽_8</option>
                    <option value="D9">乾燥槽_9</option>
                    <option value="D10">乾燥槽_10</option>
                    <option value="D11">乾燥槽_11</option>
                    <option value="D12">乾燥槽_12</option>
                </select>
                {% elif tid == '6'%}
                <select id="tank_num">
                    <option value="D1">乾燥槽_1</option>
                    <option value="D2">乾燥槽_2</option>
                    <option value="D3">乾燥槽_3</option>
                    <option value="D4">乾燥槽_4</option>
                    <option value="D5">乾燥槽_5</option>
                    <option value="D6" selected>乾燥槽_6</option>
                    <option value="D7">乾燥槽_7</option>
                    <option value="D8">乾燥槽_8</option>
                    <option value="D9">乾燥槽_9</option>
                    <option value="D10">乾燥槽_10</option>
                    <option value="D11">乾燥槽_11</option>
                    <option value="D12">乾燥槽_12</option>
                </select>
                {% elif tid == '7'%}
                <select id="tank_num">
                    <option value="D1">乾燥槽_1</option>
                    <option value="D2">乾燥槽_2</option>
                    <option value="D3">乾燥槽_3</option>
                    <option value="D4">乾燥槽_4</option>
                    <option value="D5">乾燥槽_5</option>
                    <option value="D6">乾燥槽_6</option>
                    <option value="D7" selected>乾燥槽_7</option>
                    <option value="D8">乾燥槽_8</option>
                    <option value="D9">乾燥槽_9</option>
                    <option value="D10">乾燥槽_10</option>
                    <option value="D11">乾燥槽_11</option>
                    <option value="D12">乾燥槽_12</option>
                </select>
                {% elif tid == '8'%}
                <select id="tank_num">
                    <option value="D1">乾燥槽_1</option>
                    <option value="D2">乾燥槽_2</option>
                    <option value="D3">乾燥槽_3</option>
                    <option value="D4">乾燥槽_4</option>
                    <option value="D5">乾燥槽_5</option>
                    <option value="D6">乾燥槽_6</option>
                    <option value="D7">乾燥槽_7</option>
                    <option value="D8" selected>乾燥槽_8</option>
                    <option value="D9">乾燥槽_9</option>
                    <option value="D10">乾燥槽_10</option>
                    <option value="D11">乾燥槽_11</option>
                    <option value="D12">乾燥槽_12</option>
                </select>
                {% elif tid == '9'%}
                <select id="tank_num">
                    <option value="D1">乾燥槽_1</option>
                    <option value="D2">乾燥槽_2</option>
                    <option value="D3">乾燥槽_3</option>
                    <option value="D4">乾燥槽_4</option>
                    <option value="D5">乾燥槽_5</option>
                    <option value="D6">乾燥槽_6</option>
                    <option value="D7">乾燥槽_7</option>
                    <option value="D8">乾燥槽_8</option>
                    <option value="D9" selected>乾燥槽_9</option>
                    <option value="D10">乾燥槽_10</option>
                    <option value="D11">乾燥槽_11</option>
                    <option value="D12">乾燥槽_12</option>
                </select>
                {% elif tid == '10'%}
                <select id="tank_num">
                    <option value="D1">乾燥槽_1</option>
                    <option value="D2">乾燥槽_2</option>
                    <option value="D3">乾燥槽_3</option>
                    <option value="D4">乾燥槽_4</option>
                    <option value="D5">乾燥槽_5</option>
                    <option value="D6">乾燥槽_6</option>
                    <option value="D7">乾燥槽_7</option>
                    <option value="D8">乾燥槽_8</option>
                    <option value="D9">乾燥槽_9</option>
                    <option value="D10" selected>乾燥槽_10</option>
                    <option value="D11">乾燥槽_11</option>
                    <option value="D12">乾燥槽_12</option>
                </select>
                {% elif tid == '11'%}
                <select id="tank_num">
                    <option value="D1">乾燥槽_1</option>
                    <option value="D2">乾燥槽_2</option>
                    <option value="D3">乾燥槽_3</option>
                    <option value="D4">乾燥槽_4</option>
                    <option value="D5">乾燥槽_5</option>
                    <option value="D6">乾燥槽_6</option>
                    <option value="D7">乾燥槽_7</option>
                    <option value="D8">乾燥槽_8</option>
                    <option value="D9">乾燥槽_9</option>
                    <option value="D10">乾燥槽_10</option>
                    <option value="D11" selected>乾燥槽_11</option>
                    <option value="D12">乾燥槽_12</option>
                </select>
                {% elif tid == '12'%}
                <select id="tank_num">
                    <option value="D1">乾燥槽_1</option>
                    <option value="D2">乾燥槽_2</option>
                    <option value="D3">乾燥槽_3</option>
                    <option value="D4">乾燥槽_4</option>
                    <option value="D5">乾燥槽_5</option>
                    <option value="D6">乾燥槽_6</option>
                    <option value="D7">乾燥槽_7</option>
                    <option value="D8">乾燥槽_8</option>
                    <option value="D9">乾燥槽_9</option>
                    <option value="D10">乾燥槽_10</option>
                    <option value="D11">乾燥槽_11</option>
                    <option value="D12" selected>乾燥槽_12</option>
                </select>
                {% else %}
                <select id="tank_num">
                    <option value="D1" selected>乾燥槽_1</option>
                    <option value="D2">乾燥槽_2</option>
                    <option value="D3">乾燥槽_3</option>
                    <option value="D4">乾燥槽_4</option>
                    <option value="D5">乾燥槽_5</option>
                    <option value="D6">乾燥槽_6</option>
                    <option value="D7">乾燥槽_7</option>
                    <option value="D8">乾燥槽_8</option>
                    <option value="D9">乾燥槽_9</option>
                    <option value="D10">乾燥槽_10</option>
                    <option value="D11">乾燥槽_11</option>
                    <option value="D12">乾燥槽_12</option>
                </select>
                {% endif %}

                {% if sensor_name=='SHT11_Humidity' %}
                <select id="sensors">
                    <option value="SHT11_Temp">乾燥槽桶內溫度</option>
                    <option value="SHT11_Humidity" selected>乾燥槽桶內濕度</option>
                    <option value="UltraSonic">乾燥槽桶內咖啡生豆高度</option>
                    <option value="PA">乾燥槽桶內壓力</option>
                    <option value="soil_Temp">乾燥槽咖啡生豆溫度</option>
                    <option value="soil_Humidity">乾燥槽咖啡生豆濕度</option>
                    <option value="soil_EC">乾燥槽咖啡生豆 EC</option>
                </select>
                {% elif sensor_name=='UltraSonic' %}
                <select id="sensors">
                    <option value="SHT11_Temp">乾燥槽桶內溫度</option>
                    <option value="SHT11_Humidity">乾燥槽桶內濕度</option>
                    <option value="UltraSonic" selected>乾燥槽桶內咖啡生豆高度</option>
                    <option value="PA">乾燥槽桶內壓力</option>
                    <option value="soil_Temp">乾燥槽咖啡生豆溫度</option>
                    <option value="soil_Humidity">乾燥槽咖啡生豆濕度</option>
                    <option value="soil_EC">乾燥槽咖啡生豆 EC</option>
                </select>
                {% elif sensor_name=='PA' %}
                <select id="sensors">
                    <option value="SHT11_Temp">乾燥槽桶內溫度</option>
                    <option value="SHT11_Humidity">乾燥槽桶內濕度</option>
                    <option value="UltraSonic">乾燥槽桶內咖啡生豆高度</option>
                    <option value="PA" selected>乾燥槽桶內壓力</option>
                    <option value="soil_Temp">乾燥槽咖啡生豆溫度</option>
                    <option value="soil_Humidity">乾燥槽咖啡生豆濕度</option>
                    <option value="soil_EC">乾燥槽咖啡生豆 EC</option>
                </select>
                {% elif sensor_name=='soil_Temp' %}
                <select id="sensors">
                    <option value="SHT11_Temp">乾燥槽桶內溫度</option>
                    <option value="SHT11_Humidity">乾燥槽桶內濕度</option>
                    <option value="UltraSonic">乾燥槽桶內咖啡生豆高度</option>
                    <option value="PA">乾燥槽桶內壓力</option>
                    <option value="soil_Temp" selected>乾燥槽咖啡生豆溫度</option>
                    <option value="soil_Humidity">乾燥槽咖啡生豆濕度</option>
                    <option value="soil_EC">乾燥槽咖啡生豆 EC</option>
                </select>
                {% elif sensor_name=='soil_Humidity' %}
                <select id="sensors">
                    <option value="SHT11_Temp">乾燥槽桶內溫度</option>
                    <option value="SHT11_Humidity">乾燥槽桶內濕度</option>
                    <option value="UltraSonic">乾燥槽桶內咖啡生豆高度</option>
                    <option value="PA">乾燥槽桶內壓力</option>
                    <option value="soil_Temp">乾燥槽咖啡生豆溫度</option>
                    <option value="soil_Humidity" selected>乾燥槽咖啡生豆濕度</option>
                    <option value="soil_EC">乾燥槽咖啡生豆 EC</option>
                </select>
                {% elif sensor_name=='soil_EC' %}
                <select id="sensors">
                    <option value="SHT11_Temp">乾燥槽桶內溫度</option>
                    <option value="SHT11_Humidity">乾燥槽桶內濕度</option>
                    <option value="UltraSonic">乾燥槽桶內咖啡生豆高度</option>
                    <option value="PA">乾燥槽桶內壓力</option>
                    <option value="soil_Temp">乾燥槽咖啡生豆溫度</option>
                    <option value="soil_Humidity">乾燥槽咖啡生豆濕度</option>
                    <option value="soil_EC" selected>乾燥槽咖啡生豆 EC</option>
                </select>
                {% else %}
                <select id="sensors">
                    <option value="SHT11_Temp" selected>乾燥槽桶內溫度</option>
                    <option value="SHT11_Humidity">乾燥槽桶內濕度</option>
                    <option value="UltraSonic">乾燥槽桶內咖啡生豆高度</option>
                    <option value="PA">乾燥槽桶內壓力</option>
                    <option value="soil_Temp">乾燥槽咖啡生豆溫度</option>
                    <option value="soil_Humidity">乾燥槽咖啡生豆濕度</option>
                    <option value="soil_EC">乾燥槽咖啡生豆 EC</option>
                </select>
                {% endif %}

            </td>
        </tr>
        <tr>
            <td>
                時間間隔:
                <select name="time-interval" class="text-right">
                    <option value="month">逐月</option>
                    <option value="day">逐日</option>
                    <option value="hour">逐時</option>
                </select>
                &nbsp;
                <!--
                        從&nbsp;
                        <input type="datetime-local" name="sensor_starttime" id="sensor_starttime" value={{starttime}}>
                        &nbsp;到&nbsp;
                        <input type="datetime-local" name="sensor_endtime" id="sensor_endtime" value={{endtime}}>
                        &nbsp;為止
                    -->
                <span>從</span>
                <label for="querydate-start"></label><input id="querydate-start" type="date">
                <span>到</span>
                <label for="querydate-end"></label><input id="querydate-end" type="date">
                <span>為止</span>
            </td>

        </tr>
        <tr>
            <td>
                資料類型:
                <label><input type="checkbox" name="data-type" value="max">最大值</label>
                <label><input type="checkbox" name="data-type" value="avg">平均值</label>
                <label><input type="checkbox" name="data-type" value="min">最小值</label>
                <br>

            </td>
        </tr>
        <tr>
            <td>
                <!--
                        <button type="submit" name="charting">繪製圖表</button>
                        <button type="submit" onclick="" id="btn_save_chart" style="display: none;">儲存圖表</button>
                        -->
                <input type="button" value="查詢" onclick="ShowInfo()">
                <input type="button" value="匯出" onclick="downloadFile()">
                <input type="button" value="刪除" onclick="">

                <script>
                    function ShowInfo() {
                        // 取得桶號、感測器名稱
                        tid = document.getElementById("tank_num").value
                        console.log('tid: ' + tid)
                        sensor_name = document.getElementById("sensors").value
                        console.log('sensor_name: ' + sensor_name)

                        // 數據整理
                        Echart(sensor_name, tid)
                        // 顯示圖表
                    };

                    function downloadFile() {
                        tid = document.getElementById("tank_num").value
                        sensor_name = document.getElementById("sensors").value

                        //藉型別陣列建構的 blob 來建立 URL
                        let fileName = "ChartData_" + tid + "_" + sensor_name + ".csv";
                        //"\ufeff"解決打開CSV中文亂碼問題
                        const data = "\ufeff" + getData();
                        let blob = new Blob([data], {
                            type: 'text/csv,charset=UTF-8'
                        });
                        var href = URL.createObjectURL(blob);
                        // 從 Blob 取出資料
                        var link = document.createElement("a");
                        document.body.appendChild(link);
                        link.href = href;
                        link.download = fileName;
                        link.click();
                    };

                    //所有資料函數
                    function getData() {
                        var header = "日期," + data_name + "\n";
                        var data = "";
                        var length = all_datetime.length;

                        for (var i = 0; i < length; i++) {
                            data = data + all_datetime[i] + ',' + all_data[i] + '\n';
                        };

                        return header + data;
                    };

                    //最大最小平均資料函數
                    function getData() {
                        var header = data_name + "\n日期,";
                        if (max_data) {
                            console.log(max_data);
                            header = header + "最大值,";
                        };
                        if (avg_data) {
                            header = header + "平均值,";
                        };
                        if (min_data) {
                            header = header + "最小值,";
                        };
                        header = header + "\n";
                        var data = "";
                        var length = xAxis_data.length;

                        for (var i = 0; i < length; i++) {
                            data = data + xAxis_data[i] + ',';
                            if (max_data) {
                                data = data + max_data[i] + ',';
                            };
                            if (avg_data) {
                                data = data + avg_data[i] + ',';
                            };
                            if (min_data) {
                                data = data + min_data[i] + ',';
                            };
                            data = data + '\n';
                        };

                        return header + data;
                    };

                </script>
            </td>
        </tr>
        <tr>
            <td>
                <!--
                        <img src={{ url }}>
                    -->
                <div id="" class="show-info" style="text-align: center;">
                    <center>
                        <div class="show-chart" style="height: 480px; width: 100%; text-align: center;">
                            圖表
                        </div>
                    </center>
                </div>
            </td>
        </tr>
    </table>

    <!--
        </div>
    </form>
-->
</body>

<script>
    var all_datetime = 0;   // 所有資料時間 ?
    var all_data = 0;       // 所有感測器數據 ?
    var data_name = 0;      // 感測器名稱       // "溫溼度"
    var xAxis_data = 0;     // x 軸資料
    var max_data = 0;       // 
    var min_data = 0;       // 
    var avg_data = 0;       // 

    function Echart(sensor_name, tid) {
        // Echart(sensor_name, tid)

        //將echarts圖形銷毀
        $(".show-chart").removeAttr("_echarts_instance_").empty();

        // Rita：sensor 與 data_name 重複
        // var sensor = evt.substring(2);

        if (!$("input[value=avg]").prop('checked') && !$("input[value=min]").prop('checked') && !$("input[value=max]").prop('checked')) {
            alert("請至少選擇一種資料類型!");
            return false;
        };

        if ($("#querydate-start").val() == '' || $("#querydate-end").val() == '') {
            alert("請選擇日期範圍!");
            return false;
        };
        //基於準備好的dom，初始化echarts例項
        var myChart = echarts.init(document.getElementsByClassName('show-chart')[0]);  // class="col-10 show-chart"

        var date_start = $("#querydate-start").val();
        var date_end = $("#querydate-end").val();
        var avg = 0;
        var max = 0;
        var min = 0;
        var time_interval = $("select[name=time-interval]").val();
        var legend = new Array();
        var color = new Array();
        var series = new Array();

        if ($("input[value=max]").prop('checked')) {
            max = 1;
            legend.push("最大值");
            color.push("#1e88e5");      // 水藍色
        };

        if ($("input[value=avg]").prop('checked')) {
            avg = 1;
            legend.push("平均值");
            color.push("#43a047");      // 草綠色
        };

        if ($("input[value=min]").prop('checked')) {
            min = 1;
            legend.push("最小值");
            color.push("#e64a19");      // 橘紅色
        };

        var json = {
            'tid': tid,
            'sensor_name': sensor_name,
            'avg': avg,
            'max': max,
            'min': min,
            'time-interval': time_interval,
            'date-start': date_start,
            'date-end': date_end
        };

        console.log('json___' + 
            'tid: ' + tid +
            'sensor_name: ' + sensor_name +
            'avg: ' + avg +
            'max: ' + max +
            'min: ' + min +
            'time-interval: ' + time_interval +
            'date-start: ' + date_start +
            'date-end: ' + date_end
        )


        $.get('/history_data_new', json, function (resText) {
            if (resText.max) {
                var max_series = {
                    'name': '最大值',
                    'type': 'scatter',
                    'data': resText.max.map(function (item) { return item[1]; }),
                    'itemStyle': { 'normal': { 'lineStyle': { 'color': '#1e88e5' } } },
                };
                series.push(max_series);        // 把上面的 dict 加入 series array 內
                xAxis_data = resText.max.map(function (item) { return item[0]; });
                max_data = resText.max.map(function (item) { return item[1]; });
            };
            if (resText.avg) {
                var avg_series = { 'name': '平均值', 'type': 'scatter', 'data': resText.avg.map(function (item) { return item[1]; }), 'itemStyle': { 'normal': { 'lineStyle': { 'color': '#43a047' } } }, };
                series.push(avg_series);
                xAxis_data = resText.avg.map(function (item) { return item[0]; });
                console.log('xAxis_data' + xAxis_data)                               // 2021-07-09 10:00:00,2021-07-20 09:00:00,2021-07-22 15:00:00,2021-07-26 15:00:00,2021-07-26 16:00:00
                avg_data = resText.avg.map(function (item) { return item[1]; });
                console.log('avg_data' + avg_data)                                   // 91.0,98.0,11.0,15.2,30.5
            };
            if (resText.min) {
                var min_series = { 'name': '最小值', 'type': 'scatter', 'data': resText.min.map(function (item) { return item[1]; }), 'itemStyle': { 'normal': { 'lineStyle': { 'color': '#e64a19' } } }, };
                series.push(min_series);
                xAxis_data = resText.min.map(function (item) { return item[0]; });      // all
                min_data = resText.min.map(function (item) { return item[1]; });        // min
            };

            //獲取日期內所有數據
            all_datetime = resText.all.map(function (item) { return item[0]; });        // all
            all_data = resText.all.map(function (item) { return item[1]; });

            //指定圖表的配置項和資料

            option = {
                title: {
                    text: '', // 'Data History'
                    left: '1%'
                },
                tooltip: {
                    trigger: 'axis'
                },
                color: color,
                legend: {
                    data: legend,
                },
                xAxis: {
                    data: xAxis_data,
                },
                yAxis: {
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: ''
                        }
                    }
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        dataView: { readOnly: false },
                        magicType: { type: ['line', 'bar'] },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                dataZoom: [{
                    startValue: '2021-01-01'
                }, {
                    type: 'inside'
                }],
                series: series,
                /*
                series: [
                    {
                        name: '最大值',
                        type: 'line',
                        data: resText.max.map(function (item) {
                            return item[1];
                        }),
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    color: '#1e88e5'
                                }
                            }
                        },
                    },
                    {
                        name: '平均值',
                        type: 'line',
                        data: [20.0, 20.0, 20.0, 20.0, 20.0, 20.0],
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    color: '#43a047'
                                }
                            }
                        },
                    },
                    {
                        name: '最小值',
                        type: 'line',
                        data: [15.0, 15.0, 15.0, 15.0, 15.0, 15.0],
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    color: '#e64a19'
                                }
                            }
                        }
                    },
                ]
                */

            };
            console.log('SHOW myChart')
            //使用剛指定的配置項和資料顯示圖表
            myChart.setOption(option);
        }, 'json');

    } // Echart(sensor_name, tid)


</script>

</html>