echarts
/
stock.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: 120px;height:3000px;left:0px;position: absolute;">
    <div><button type="button" style="width: 118px;height: 40px; color: black; font-family: 宋体" onclick="loadView('ema_up')">emaUp</button></div>
    <div><button type="button" style="width: 118px;height: 40px; color: black; font-family: 宋体" onclick="loadView('ma_up')">maUp</button></div>
    <div><button type="button" style="width: 118px;height: 40px; color: black; font-family: 宋体" onclick="loadView('ema_ref0')">emaRef0</button></div>
    <div><button type="button" style="width: 118px;height: 40px; color: black; font-family: 宋体" onclick="loadView('ma_cross')">maCross</button></div>
    <div><button type="button" style="width: 118px;height: 40px; color: black; font-family: 宋体" onclick="loadView('ma_pure')">maPure</button></div>
    <div><button type="button" style="width: 118px;height: 40px; color: black; font-family: 宋体" onclick="loadView('ema_up_complex')">emaUpComplex</button></div>
</div>
<div style="width: 900px;height:3000px;left:120px;position: absolute;">
    <div id="app" style="font-size: larger">
        <div id="strategy_name_id" style="float: left;width: 180px;text-align: center;background-color: brown">123</div>
        时间: <input type="text" id="index_time" value="2016-01-01 00:00:00"/>
        m: <input type="text" id="id_m" value='0'/>
        n: <input type="text" id="id_n" value='0'/>
        <button type="button" onclick="analysisAll()">分析</button>
    </div>
    <div id="main_div" style="width: 900px;height:3000px;">

    </div>
</div>
<div style="width: 900px;height:3000px;left:1020px;position: absolute;">
        <table border="1" cellspacing="0" style="font-size: 10px" id="table_id"></table>
</div>

<script type="text/javascript">

    let elements_full = "";
    //,"000688.SH","399975.SZ",'399967.SZ','000905.SH'
    let ts_codes = ["300498.SZ","000750.SZ","000768.SZ","000776.SZ","000783.SZ","000786.SZ","000789.SZ","000100.SZ","000070.SZ"];
    elements_full += '<div id="000000.00" style="width: 900px;height:300px;background-color: azure"></div>';
    elements_full += '<div style="width: 900px;height:40px;background-color: aliceblue">\n' +
        '                    <table border="1" cellspacing="0" style="font-size: 10px" id="000000_score"></table>\n' +
        '                </div>';
    for (let index_ in ts_codes ) {
        let full_name = ts_codes[index_]
        let ts_code_ = full_name.substring(0,6);
        let mark_ = full_name.substring(7,9);
        let format_str = `
                <div id="${full_name}" style="width: 900px;height:300px;background-color: azure"></div>
                <div style="width: 900px;height:40px;background-color: aliceblue">
                    <table border="1" cellspacing="0" style="font-size: 10px" id="${ts_code_}_score"></table>
                </div>
                <div style="width: 900px;height:40px;font-size:5px;background-color: azure">
                    时间: <input type="text" id="${ts_code_}_time" style="height: 10px;width: 160px;"
                               value="2000-01-01 00:00:00"/>
                    m: <input type="text" id="${ts_code_}_m" value='0' style="height: 10px;width: 60px;"/>
                    n: <input type="text" id="${ts_code_}_n" value='0' style="height: 10px;width: 60px;"/>
                    <button type="button" style="width: 60px;" onclick="analysisIndex('${ts_code_}','${mark_}')">分析</button>
                    <button type="button" style="width: 120px;" onclick="refreshRecord('${ts_code_}','${mark_}')">交易记录</button>
                </div>`;
        elements_full+= format_str;
    }
    $("#main_div").html(elements_full);

    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/stock_analysis/analysis_30',
            type: 'GET',     // 请求类型，常用的有 GET 和 POST
            data: "tsCode=" + ts_code + "&m=" + m + "&n=" + n + "&startTime=" + startTime + "&strategy=" + strategy,
            success: function () { // 接口调用成功回调函数
                refresh(id, market);
                loadParam();
            }
        });
    }

    //置顶的所有分析
    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/stock_analysis/analysis_30',
            type: 'GET',     // 请求类型，常用的有 GET 和 POST
            data: "tsCode=" + ts_code + "&m=" + m + "&n=" + n + "&startTime=" + startTime + "&strategy=" + strategy,
            success: function () { // 接口调用成功回调函数
                refresh(id, market)
            }
        });
    }

    function analysisAll() {
        for (let index_ in ts_codes ) {
            let full_name = ts_codes[index_]
            let ts_code_ = full_name.substring(0,6);
            let mark_ = full_name.substring(7,9);
            analysisIndexAll(ts_code_, mark_);
        }
    }

    function refresh(id, market) {
        let ts_code = id + "." + market;
        $.ajax({
            url: 'http://localhost/api/stock_view/compare',
            type: 'GET',     // 请求类型，常用的有 GET 和 POST
            data: 'tsCode=' + ts_code +"&strategy="+strategy+"&tsCodes="+ts_codes.join(","),
            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)


                let scoreView = document.getElementById(id+'_score');
                let scoreVo = rsp.score;
                let scoreHtml = "";
                let scoreTitle = ["score","drawdownMe","returnRateYearMy","returnRateYearIndex","returnRateYearRelative","drawdownStartTime","drawdownEndTime"]
                let scoreHead = ["评分","回撤","账户年化","指数年化","相对收益(年化)","回撤开始","回撤结束"]

                scoreHtml += "<tr>";
                for (let i in scoreHead) {
                    let item = scoreHead[i];
                    scoreHtml += "<th>";
                    scoreHtml += item;
                    scoreHtml += "</th>"
                }
                scoreHtml += "</tr>";
                scoreHtml += "<tr>";
                for (let i in scoreTitle) {
                    let item = scoreTitle[i];
                    scoreHtml += "<td>";
                    scoreHtml += scoreVo[item];
                    scoreHtml += "</td>"
                }
                scoreView.innerHTML = scoreHtml
            }
        });
    }

    function refreshRecord(id, market) {
        let ts_code = id + "." + market;
        $.ajax({
            url: 'http://localhost/api/stock_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 loadParam() {
        $.ajax({
            url: 'http://localhost/api/stock_view/param',
            type: 'GET',     // 请求类型，常用的有 GET 和 POST
            data: 'tsCodes=' + ts_codes.join(",") +"&strategy="+strategy,
            success: function (obj) { // 接口调用成功回调函数
                document.getElementById("id_n").setAttribute("value",obj["n"]);
                document.getElementById("id_m").setAttribute("value",obj["m"]);
            }
        });
    }
    function loadView(strategy_name) {
        strategy = strategy_name;
        for (let index_ in ts_codes ) {
            let full_name = ts_codes[index_];
            let ts_code_ = full_name.substring(0,6);
            let mark_ = full_name.substring(7,9);
            refresh(ts_code_, mark_);
        }
        $("#strategy_name_id").html(strategy_name);
        loadParam();
        refresh("000000","00");
    }

    loadView(strategy);


</script>

</body>
</html>