<div id="current_A" style="width: 600px;height:400px;margin-bottom: 100px"></div>
<div class="button_group">
    <input class="button" type="button" value="開始" id="start" style="margin:0 50px 0">
    <input class="button" type="button" value="停止" id="stop" style="margin:0 50px 0">
</div>

 .button_group{
      position: fixed;
      top:400px;
      left: 6%
  }
 .button{
      width: 90px;
      height: 35px; 
      border-width: 0px; 
      border-radius: 3px; 
      background: #1E90FF; 
      cursor: pointer;
      outline: none; 
      font-family: Microsoft YaHei; 
      color: white; 
      font-size: 15px; 
  }

$(function () {
    // 初始化圖表的數(shù)據(jù)輸入數(shù)組
    var data_real = [];
    var data_pre = [];
    var data_length = 30;
    for (i=0;i<data_length;i++){
        data_pre.push(15000);
        data_real.push(15000);
    }
    //初始化全局變量
    var global_status = 0;//加載頁面時(shí)默認(rèn)為0
    //每個(gè)div分別創(chuàng)建一個(gè)form對(duì)象
    var CurrentA = new My_form("current_A");
    
    //頁面加載時(shí)初始化靜態(tài)圖表
    CurrentA.init_static()
   
    //定義form類
    function My_form(element_id){
        //form類所創(chuàng)建在指定的div的id
        this.element_id = element_id
        //初始化圖表，在具體指定元素位置創(chuàng)建圖表，并傳入數(shù)據(jù)列表
        this.init_static = function(){
            this.mychart = echarts.init(document.getElementById(this.element_id));
            // 初始化x軸數(shù)據(jù)
            var _x_axis = [];
            for (var i = 0; i < data_length; i++) {
                _x_axis.push(i)
            }
            // 初始化y軸數(shù)據(jù)
            var real_arr = [];
            var model_arr = [];
            for (var i = 0; i < data_length; i++) {
                real_arr.push(15000);
                model_arr.push(15000);
            }
            //設(shè)置圖標(biāo)配置項(xiàng)
            this.mychart.setOption({
                title: {
                    text: "某工業(yè)過程電流變化曲線",
                    x:'left',
                    textStyle: {
                        "fontSize": 16
                    }
                },
                tooltip: {
                    trigger: 'axis'
                },
                // 調(diào)整圖表在div中的大小
                grid:{
                    top:"35px",
                    left:"50px",
                    right:"10px",
                    bottom:"50px"
                },
                legend: {
                    data: ['real', 'model'],
                    textStyle:{
                        fontSize: getDpr()
                    },
                    x:'center'
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line']},
                        saveAsImage: {show: true}
                    }
                },
                calculable: true,
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: _x_axis
                },
                yAxis: {
                    type: 'value',
                    min:12000,
                    max:18000,
                    splitNumber:3
                },
                series: [{
                    name: '真實(shí)值',
                    type: 'line',
                    color: "red",
                    data: real_arr
                }, {
                    name: '模型預(yù)估值',
                    type: 'line',
                    color: "green",
                    data: model_arr
                }]
            })
    }
        // 更新數(shù)據(jù)函數(shù)
        this.update_data = function(real_data,model_data){
            this.mychart.setOption({
                title: {
                    text: "某工業(yè)過程電流變化曲線",
                    x:'left',
                    textStyle: {
                        "fontSize": 16
                    }
                },
                series: [{
                    name: '真實(shí)值',
                    data: real_data
                }, {
                    name: '模型預(yù)估值',
                    data: model_data
                }]
            });
        }
    }
    //“開始實(shí)驗(yàn)”按鈕點(diǎn)擊事件
    $("input[id='start']").click(function(){
            global_status = 1;
    })
    //“終止實(shí)驗(yàn)”按鈕點(diǎn)擊事件
    $("input[id='stop']").click(function () {
            global_status =0;
            data_real.fill(15000);
            data_pre.fill(15000);
            CurrentA.init_static()
    })
    //legend字體大小
    function getDpr() {
        var windowWidth = $(window).width();
        if (windowWidth < 1920) {
            return 12
        }
        if (windowWidth >= 1920 && windowWidth <= 3840) {
            return 18
        }
        if (windowWidth > 3840 && windowWidth <= 5760) {
            return 30
        }
    };
    // 更新真實(shí)值
    function update_real(shift=true) {
        var real_num = (Math.random()-0.5)*2000+15000;
        data_real.push( real_num );
        if (shift) {
            data_real.shift();
            }
    }
    // 更新模型值
    function update_pre (shift=true) {
        var pre_num = (Math.random()-0.5)*2000+15000;
        data_pre.push( pre_num );
        if (shift) {
            data_pre.shift();
        }
    }
    //計(jì)算均方誤差
    function junfang_error(arr1,arr2){
        var len=arr1.length;
        var sum=0;
        for(var i=0;i<len;i++){
            sum+=Math.pow(arr1[i]-arr2[i],2)
        }
        var ans = Math.sqrt(sum/len);
        return ans.toFixed(2);
    }
    //計(jì)算平均絕對(duì)誤差百分比
    function pingjun_error(arr_real,arr_model){
        var len=arr_real.length;
        var sum=0;
        for(var i=0;i<len;i++){
            sum+= Math.abs(arr_real[i]-arr_model[i]) / arr_real[i]
        }
        var ans = sum/len*100;
        return ans.toFixed(2)+"%"
    }
    //設(shè)置監(jiān)聽函數(shù)每一秒一次
    setInterval(function () {
        if(global_status===0){
            return;
        }
        update_pre();
        update_real();
        CurrentA.update_data(data_real,data_pre)
    },1000)
   })