echarts怎么實(shí)現(xiàn)動(dòng)態(tài)曲線圖

這篇文章主要介紹“echarts怎么實(shí)現(xiàn)動(dòng)態(tài)曲線圖”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“echarts怎么實(shí)現(xiàn)動(dòng)態(tài)曲線圖”文章能幫助大家解決問題。

echarts動(dòng)態(tài)曲線圖(多條曲線)

ECharts是一個(gè)由百度開發(fā)的開源數(shù)據(jù)可視化工具，能夠提供直觀，生動(dòng)，可交互，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。

本項(xiàng)目基于echarts 2.0版本和jquery-3.4.0版本，可實(shí)現(xiàn)點(diǎn)擊“開始”按鈕，會(huì)顯示兩條動(dòng)態(tài)曲線；點(diǎn)擊“停止”按鈕，曲線清空

項(xiàng)目效果如下圖所示：

HTML部分

<div id="current_A" ></div>
<div class="button_group">
    <input class="button" type="button" value="開始" id="start" >
    <input class="button" type="button" value="停止" id="stop" >
</div>

這部分比較簡(jiǎn)單，第一個(gè)div用于存放曲線圖，第二個(gè)div用于存放兩個(gè)按鈕。

CSS部分

這部分其實(shí)我主要是想保存一個(gè)好看的按鈕樣式…

 .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; 
  }

JS部分

$(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)
   })

每個(gè)部分的功能我都寫在注釋中了，注意HTML中的div對(duì)應(yīng)的id和form類中傳入的參數(shù)應(yīng)保持一致。

真實(shí)值和模型值的更新，這里我用隨機(jī)數(shù)取締了，有需要的話可以根據(jù)自己實(shí)際需求綁定相應(yīng)的數(shù)據(jù)源。

曲線的條數(shù)這里我用兩條為例，如果一條或者三條及以上的情況，大家可以自己查看代碼進(jìn)行相應(yīng)調(diào)整，難度應(yīng)該不是很大。

關(guān)于“echarts怎么實(shí)現(xiàn)動(dòng)態(tài)曲線圖”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。