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

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

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

    <div id="main2" style="width: 2400px; height: 700px">
        <div id="left2" style="width: 1200px; height: 700px">div>
        <div id="right2" style="width: 1200px; height: 700px">div>
    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

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

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

<script type="text/javascript">
        var myChart2 = echarts.init(document.getElementById('right'),
                'customed');
        var i = 1;//设置标志位  来进行循环判断
        setInterval("myInterval()", 5000);//1000为1秒钟

        function myInterval() {
            if (i % 3 == 0) {
                myChart2.clear();//注意清除表格数据缓存
                myChart2.setOption(getlinebar());//年度表格
            } else if (i % 3 == 1) {
                myChart2.clear();
                myChart2.setOption(getdoubleline2());//月度表格
            } else if (i % 3 == 2) {
                myChart2.clear();
                myChart2.setOption(getbar());//日表格
            }
            i++;
            console.log(i)//方便查看日志
        }
    script>

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

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

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

可以正常显示