charts柱状图,定时刷新

option:

var dataoptionone = {
        title : {
            text: '数据存储情况',
            subtext: '数据表',
            x:'center'
        },
        tooltip: {
              show: true
             },
        toolbox: {
              show: true,
              feature: {
                  dataView: { show: true, readOnly: false },
//                   magicType: { show: true, type: ['line', 'bar'] },
                  restore: { show: true },
                  saveAsImage: { show: true }
             }
         },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['表的记录数','表的空间占有量']
        },
        xAxis: {
            type: 'category',
//             boundaryGap: false,//加上x轴会是个点
            data: []
        },
        yAxis: {
            type: 'value'
        },
        series : [
           {
               name:"表的记录数",
               type:"bar",
               itemStyle:{
                   normal:{
                       color:"#1C90DB",
                       label: {
                           show: true,
                           position: 'top',
//                            formatter: '{c}'
                           formatter: '{b}
{c}'
                       }
                   }
               },
               data:[]
           }, {
               name:"表的空间占有量",
               type:"bar",
               itemStyle:{
                   normal:{
                       color:"#D070D0",
                       label: {
                           show: true,
                           position: 'top',
//                            formatter: '{c}'
                           formatter: '{b}
{c}K'
                       }
                   }
               },
               data:[]
           }
        ]
    };

js:代码

//查询表的记录数以及表的空间占有量
    $(function(){
        //第一个图
        var dataStorage_Chart = echarts.init(document.getElementById('dataone')); 
        var data_x =[];
        var data_count_y =[];
        var size_y=[];
        var tableCount ='${tableCount}';
        var tablelimit =4;
        var tablepage =1;
        var count =tableCount/4;
        init();
        clearInterval(timer1);
        timer1 =setInterval(function() {
            data_x =[];
            data_count_y =[];
            size_y=[];
            if(tablepage<count){
                tablepage+=1;
            }else{
                tablepage=1;
            }
            init();
        }, 5000)
        
        function init(){
            $.post("init/findImportTables",{page:tablepage,limit:tablelimit},function(msg){
                $.each(msg,function(index,val){
                    data_x.push(val.table_name.insertStrPerIndex(10,"
"));
                    data_count_y.push(val.data_count!=null?val.data_count:0);
                    if(val.size!=null){
                        var s =val.size.toUpperCase();
                        if(s.lastIndexOf("M")>0){
                            s =s.substring(0,s.length-1)*1024;
                        }else if(s.lastIndexOf("K")>0){
                            s =s.substring(0,s.length-1)*1;
                        }else{
                            s=s*1;
                        }
                        size_y.push(s);
                    }else{
                        size_y.push(0);
                    }
                    
                })
                console.log("y:"+size_y);
                dataoptionone.xAxis.data=data_x;
                dataoptionone.series[0].data=data_count_y;
                dataoptionone.series[1].data=size_y;
                dataStorage_Chart.setOption(dataoptionone); 
            });
        }
    })
View Code

jsp:

<div id="dataone" style="height: 400px;">
                                </div>
原文地址:https://www.cnblogs.com/hy928302776/p/7065335.html