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

目录

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

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

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

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

项目效果如下图所示：

废话不多说，直接上代码

HTML部分

这部分比较简单，第一个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= 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 
 

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

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

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

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。