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}\n{c}' } } }, data:[] }, { name:"表的空间占有量", type:"bar", itemStyle:{ normal:{ color:"#D070D0", label: { show: true, position: 'top', // formatter: '{c}' formatter: '{b}\n{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,"\n")); 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); }); } })
jsp:
<div id="dataone" style="height: 400px;"> </div>