echarts
/
index2.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
     	<script src="js/vue.js"></script>
    <script src="js/echarts.min.js"></script>
    <script src="js/jquery.min.js"></script>
</head>
<body>

<div style="width: 100px;height:3000px;float: left; background-color: cornsilk">
    <div>
        <button type="button" style="width: 98px; color: aquamarine" onclick="loadView('ema_up')">emaUp</button>
    </div>
    <div>
        <button type="button" style="width: 98px; color: aquamarine" onclick="loadView('ma_up')">maUp</button>
    </div>
    <div>
        <button type="button" style=" width: 98px; color: aquamarine" onclick="loadView('ema_ref0')">emaRef0</button>
    </div>
    <div>
        <button type="button" style="width: 98px; color: aquamarine" onclick="loadView('ma_cross')">maCross</button>
    </div>
    <div>
        <button type="button" style="width: 98px; color: aquamarine" onclick="loadView('ma_pure')">maPure</button>
    </div>
    <div>
        <button type="button" style="width: 98px; color: aquamarine" onclick="loadView('ema_up_complex')">emaUpComplex</button>
    </div>
</div>
<!--
-->

<div style="width: 900px;height:1320px;float: left; background-color: azure;">
    时间: <input type="text" id="index_time" value="2016-01-01 00:00:00"/>
    m: <input type="text" id="id_m" value='38'/>
    n: <input type="text" id="id_n" value='22'/>
    <button type="button" onclick="analysisAll()">分析</button>

    <div id="000016.SH" style="width: 900px;height:300px;float: left;"></div>
    <!--<div id="main_1" style="width: 900px;height:300px;float: left;"></div>-->

    <div style="width: 900px;height:20px;float: left;font-size:5px">
        时间: <input type="text" id="000016_time" style="height: 10px;width: 160px;"
                   value="2016-01-01 00:00:00"/>
        m: <input type="text" id="000016_m" value='38' style="height: 10px;width: 60px;"/>
        n: <input type="text" id="000016_n" value='22' style="height: 10px;width: 60px;"/>
        <button type="button" style="width: 60px;" onclick="analysisIndex('000016','SH')">分析</button>
        <button type="button" style="width: 120px;" onclick="refreshRecord('000016','SH')">交易记录</button>
    </div>

    <div id="399300.SZ" style="width: 900px;height:300px;float: left;"></div>

    <div style="width: 900px;height:20px;float: left;font-size:5px">
        时间: <input type="text" id="399300_time" style="height: 10px;width: 160px;"
                   value="2016-01-01 00:00:00"/>
        m: <input type="text" id="399300_m" value='38' style="height: 10px;width: 60px;"/>
        n: <input type="text" id="399300_n" value='22' style="height: 10px;width: 60px;"/>
        <button type="button" style="width: 60px;" onclick="analysisIndex('399300','SZ')">分析</button>
        <button type="button" style="width: 120px;" onclick="refreshRecord('399300','SZ')">交易记录</button>
    </div>

    <div id="399673.SZ" style="width: 900px;height:300px;float: left;"></div>

    <div style="width: 900px;height:20px;float: left;font-size:5px">
        时间: <input type="text" id="399673_time" style="height: 10px;width: 160px;"
                   value="2016-01-01 00:00:00"/>
        m: <input type="text" id="399673_m" value='38' style="height: 10px;width: 60px;"/>
        n: <input type="text" id="399673_n" value='22' style="height: 10px;width: 60px;"/>
        <button type="button" style="width: 60px;" onclick="analysisIndex('399673','SZ')">分析</button>
        <button type="button" style="width: 120px;" onclick="refreshRecord('399673','SZ')">交易记录</button>

    </div>

    <div id="000688.SH" style="width: 900px;height:300px;float: left;"></div>

    <div style="width: 900px;height:20px;float: left;font-size:5px">
        时间: <input type="text" id="000688_time" style="height: 10px;width: 160px;"
                   value="2016-01-01 00:00:00"/>
        m: <input type="text" id="000688_m" value='38' style="height: 10px;width: 60px;"/>
        n: <input type="text" id="000688_n" value='22' style="height: 10px;width: 60px;"/>
        <button type="button" style="width: 60px;" onclick="analysisIndex('000688','SH')">分析</button>
        <button type="button" style="width: 120px;" onclick="refreshRecord('000688','SH')">交易记录</button>
    </div>
</div>
<div id="app">
    {{ message }}
</div>
<table border="1" style="font-size: 10px" id="table_id"></table>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
    let strategy = 'ema_up';
    function analysisIndex(id, market) {
        let ts_code = id + "." + market;
        let startTime = document.getElementById(id + '_time').value;
        let m = document.getElementById(id + '_m').value;
        let n = document.getElementById(id + '_n').value;
        $.ajax({
            url: 'http://localhost/api/analysis/analysis_30',
            type: 'GET',     // 请求类型，常用的有 GET 和 POST
            data: "tsCode=" + ts_code + "&m=" + m + "&n=" + n + "&startTime=" + startTime + "&strategy=" + strategy,
            success: function (rsp) { // 接口调用成功回调函数
                refresh(id, market)
            }
        });
    }

    function analysisIndexAll(id, market) {
        let ts_code = id + "." + market;
        let startTime = document.getElementById('index_time').value;
        let m = document.getElementById('id_m').value;
        let n = document.getElementById('id_n').value;
        $.ajax({
            url: 'http://localhost/api/analysis/analysis_30',
            type: 'GET',     // 请求类型，常用的有 GET 和 POST
            data: "tsCode=" + ts_code + "&m=" + m + "&n=" + n + "&startTime=" + startTime + "&strategy=" + strategy,
            success: function (rsp) { // 接口调用成功回调函数
                refresh(id, market)
            }
        });
    }

    function analysisAll() {
        analysisIndexAll('000016', 'SH');
        analysisIndexAll('399673', 'SZ');
        analysisIndexAll('399300', 'SZ');
        analysisIndexAll('000688', 'SH');
    }

    function refresh(id, market) {
        let ts_code = id + "." + market;
        $.ajax({
            url: 'http://localhost/api/view/compare',
            type: 'GET',     // 请求类型，常用的有 GET 和 POST
            data: 'tsCode=' + ts_code +"&strategy="+strategy,
            success: function (rsp) { // 接口调用成功回调函数
                let charTsCode = echarts.init(document.getElementById(ts_code));
                let optionTsCode = {
                    title: {
                        text: '折线图堆叠'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['邮件营销']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '邮件营销',
                            type: 'line',
                            stack: '总量',
                            data: [120, 132, 101, 134, 90, 230, 210]
                        }
                    ]
                };
                optionTsCode.legend.data = rsp.lengendData;
                optionTsCode.title.text = rsp.titleName;
                optionTsCode.xAxis.data = rsp.xaxisData;
                optionTsCode.series = rsp.series;
                charTsCode.setOption(optionTsCode)
            }
        });
    }

    function refreshRecord(id, market) {
        let ts_code = id + "." + market;
        $.ajax({
            url: 'http://localhost/api/view/trades',
            type: 'GET',     // 请求类型，常用的有 GET 和 POST
            data: 'tsCode=' + ts_code +"&strategy="+strategy,
            success: function (list) { // 接口调用成功回调函数
                let str = '';
                let head1 = list[0];
                str += "<tr>";
                for (let item in head1) {
                    str += "<th>";
                    str += item;
                    str += "</th>"
                }
                str += "</tr>";
                for(let i=0;i<list.length;i++) {
                    let obj = list[i];
                    if(0 > obj['profit']){
                        str += "<tr style=\"background-color: #ceffce\">"
                    }else if (0 < obj['profit']) {
                        str += "<tr style=\"background-color: #ffa0a6\">";
                    } else {
                        str += "<tr>";
                    }
                    for (let item in obj) {
                        str += "<td>";
                        str += obj[item];
                        str += "</td>"
                    }
                    str += "</tr>"
                }
                $("#table_id").html(str);
            }
        });
    }

    function loadView(strategy_name) {
        strategy = strategy_name;
        refresh('000016', 'SH');
        refresh('399673', 'SZ');
        refresh('399300', 'SZ');
        refresh('000688', 'SH');
    }

    loadView(strategy);
    refreshRecord('000016', 'SH');
</script>

</body>
</html>