charts柱状图，定时刷新
2024-08-31 00:31:29
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 =;
var tablepage =;
var count =tableCount/;
init();
clearInterval(timer1);
timer1 =setInterval(function() {
data_x =[];
data_count_y =[];
size_y=[];
if(tablepage<count){
tablepage+=;
}else{
tablepage=;
}
init();
}, ) function init(){
$.post("init/findImportTables",{page:tablepage,limit:tablelimit},function(msg){
$.each(msg,function(index,val){
data_x.push(val.table_name.insertStrPerIndex(,"\n"));
data_count_y.push(val.data_count!=null?val.data_count:);
if(val.size!=null){
var s =val.size.toUpperCase();
if(s.lastIndexOf("M")>){
s =s.substring(,s.length-)*;
}else if(s.lastIndexOf("K")>){
s =s.substring(,s.length-)*;
}else{
s=s*;
}
size_y.push(s);
}else{
size_y.push();
} })
console.log("y:"+size_y);
dataoptionone.xAxis.data=data_x;
dataoptionone.series[].data=data_count_y;
dataoptionone.series[].data=size_y;
dataStorage_Chart.setOption(dataoptionone);
});
}
})
jsp：
<div id="dataone" style="height: 400px;">
</div>
最新文章
- word-spacing汉字不起作用的解决方法
- Flume官方文档翻译——Flume 1.7.0 User Guide （unreleased version）中一些知识点
- centos7安装python3
- FileSaver.js ////////////////////zzzzzzzzzzzzzz
- php操作xml
- 编译hadoop-2.5.2总结
- 软工实践练习一——使用Git进行代码管理心得
- scala vs java 相同点和差异
- 【BZOJ 2005】[Noi2010]能量采集
- 动态加载JS（css）文件
- App抓包数据包之Paros的安装及使用
- Jsp 中文乱码，解决
- ExtJS 4.2学习（一）——环境搭建
- 给节点设置tag【从零開始cocos3.0final 】
- 聊一聊Javasript继承
- 计算器模拟器中的情怀——Free42简介
- java并发编程 | 线程详解
- Linq sum()时遇到NULL
- C# AutoResetEvent 使用整理
- php接收base64图片并保存