echarts如何实现动态曲线图(多条曲线)

目录

• echarts动态曲线图(多条曲线)
• HTML部分
• CSS部分
• JS部分

echarts动态曲线图(多条曲线)

ECharts是一个由百度开发的开源数据可视化工具，能够提供直观，生动，可交互，可高度个性化定制的数据可视化图表。

本项目基于echarts 2.0版本和jquery-3.4.0版本，可实现点击“开始”按钮，会显示两条动态曲线；点击“停止”按钮，曲线清空

项目效果如下图所示：

废话不多说，直接上代码

HTML部分

<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>

这部分比较简单，第一个div用于存放曲线图，第二个div用于存放两个按钮。

CSS部分

这部分其实我主要是想保存一个好看的按钮样式…

 .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 () {
    // 初始化图表的数据输入数组
    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;//加载页面时默认为0
    //每个div分别创建一个form对象
    var CurrentA = new My_form("current_A");
    
    //页面加载时初始化静态图表
    CurrentA.init_static()
   
    //定义form类
    function My_form(element_id){
        //form类所创建在指定的div的id
        this.element_id = element_id
        //初始化图表，在具体指定元素位置创建图表，并传入数据列表
        this.init_static = function(){
            this.mychart = echarts.init(document.getElementById(this.element_id));
            // 初始化x轴数据
            var _x_axis = [];
            for (var i = 0; i < data_length; i++) {
                _x_axis.push(i)
            }
            // 初始化y轴数据
            var real_arr = [];
            var model_arr = [];
            for (var i = 0; i < data_length; i++) {
                real_arr.push(15000);
                model_arr.push(15000);
            }
            //设置图标配置项
            this.mychart.setOption({
                title: {
                    text: "某工业过程电流变化曲线",
                    x:'left',
                    textStyle: {
                        "fontSize": 16
                    }
                },
                tooltip: {
                    trigger: 'axis'
                },
                // 调整图表在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: '真实值',
                    type: 'line',
                    color: "red",
                    data: real_arr
                }, {
                    name: '模型预估值',
                    type: 'line',
                    color: "green",
                    data: model_arr
                }]
            })
    }
        // 更新数据函数
        this.update_data = function(real_data,model_data){
            this.mychart.setOption({
                title: {
                    text: "某工业过程电流变化曲线",
                    x:'left',
                    textStyle: {
                        "fontSize": 16
                    }
                },
                series: [{
                    name: '真实值',
                    data: real_data
                }, {
                    name: '模型预估值',
                    data: model_data
                }]
            });
        }
    }
    //“开始实验”按钮点击事件
    $("input[id='start']").click(function(){
            global_status = 1;
    })
    //“终止实验”按钮点击事件
    $("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
        }
    };
    // 更新真实值
    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();
        }
    }
    //计算均方误差
    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);
    }
    //计算平均绝对误差百分比
    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)+"%"
    }
    //设置监听函数每一秒一次
    setInterval(function () {
        if(global_status===0){
            return;
        }
        update_pre();
        update_real();
        CurrentA.update_data(data_real,data_pre)
    },1000)
   })

每个部分的功能我都写在注释中了，注意HTML中的div对应的id和form类中传入的参数应保持一致。

真实值和模型值的更新，这里我用随机数取缔了，有需要的话可以根据自己实际需求绑定相应的数据源。

曲线的条数这里我用两条为例，如果一条或者三条及以上的情况，大家可以自己查看代码进行相应调整，难度应该不是很大。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持自由互联。