Echarts周期刷新图表（显示年、月、日表格）

「爱情、让人受尽委屈。」 2022-06-13 12:07 469阅读 0赞

最近的项目需要求表格每一分钟都要刷新 且表格内容需要按照年月日周期变化  
最终通过封装图表option设置 配置js定时器一分钟调用加载option函数来实现这个效果

# 1.定义图表所需div 设置其位置 #

在body中设置div属性使得两个图表并排显示

div { float: left;//向左对齐 }

在排放好div的位置之后 开始编写option注入函数 新建js/getchange.js  
图表数据通过ajax请求来获取

data : (function() { 
                    var data = [];
                    $.ajax({
                        url : 'http://localhost:8080/Demo01/hello.do',
                        type : 'get',
                        async : false,
                        dataType : "json",
                        success : function(json) { 
                            if (json) {
                                for (var i = 0; i < json.length; i++) {
                                    console.log(json[i].month);
                                    data.push(json[i].month);
                                }
                            }
                        }
                    })
                    return data;
                })()

以上是从后台获取数据的函数 由于数据不全 只完成了一个div的周期变化，三个函数中也只有一个函数是从后台获取数据 的 其他函数类似的改写可以完成相同功能  
echarts前后台交互可以参考我之前写的文章 [Echarts 通过注解@ResponseBody返回json][Echarts _ResponseBody_json]

最关键的是周期性变化表格数据

## **考虑到一分钟变化一次 可以使用js定时器来完成这个功能** ##

# 2.在表格重新加载 周期变化中 遇到了数据显示异常的现象 #

这是由于在同一个div中 echarts会you数据缓存机制来减少表格重新加载的时间 在我们更换数据格式之后就会导致数据显示异常

## **在使用mycharts.clear()后 表格内部缓存都已经清除** ##

可以正常显示

[Echarts _ResponseBody_json]: http://blog.csdn.net/sinat_29774479/article/details/74537451