echart柱状图实现实时更新（柱状图部分自动上升以及下降）
- 首先柱状图的图标x轴使用离散type：category
- y抽连续性： type: ‘value’
option = {
title: {
text: '裕林吊挂各组吊挂产量',
subtext: ''
},
xAxis: {
name: '各小组名称',
type: 'category',
data: ['测试1','测试2','测试3','测试4','测试5','测试6','测试7','测试8']
},
yAxis: {
name:
type: 'value'
},
series: {
data: [120,349,239,345,280,234,567,213],
type: 'bar',
barWidth: '40%' ,
label: {
show: true,//是否展示
position: 'top',//在顶端
textStyle: {
fontWeight:'bolder',
fontSize : '12',
fontFamily : '微软雅黑',
// color: 'black'
}
}
}
}
- 上述代码是基本的图标option，具体实现在下列代码中setInterval方法中。
setInterval(function(){
option.title.subtext=new Date().toLocaleTimeString()
option.series.data.splice(0,1,(Math.random() * 100 + 5).toFixed(1) - 0)
myChart.setOption(option);
},2000)
周期函数可以不断地项数据库发送请求，不断获取最新数据。
下面贴上完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="echarts.js"></script>
<script src="dark.js"></script>
<script src="jquery.js"></script>
</head>
<body>
<div id="main" style="width: 1000px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'),'dark');
option = {
title: {
text: '裕林吊挂各组吊挂产量',
subtext: '',
textStyle: {
fontFamily: 'monospace',
fontSize: 28,
}
},
xAxis: {
name: '各小组名称',
type: 'category',
data: ['测试1','测试2','测试3','测试4','测试5']
},
yAxis: {
name: '各小组产量',
type: 'value'
},
series: {
data: [120,349,239,345,280],
type: 'bar',
barWidth: '40%',
label: {
show: true,//是否展示
position: 'top',//在顶端
textStyle: {
fontWeight:'bolder',
fontSize : '12',
fontFamily : '微软雅黑',
// color: 'black'
}
}
}
}
//ajax读取数据
function readDataAst(sql) {
var strURL = "";
var result;//{"SL":"999"}
$.ajax({
type:"POST",
url:strURL,
data: {
StrSql:sql,
WRBZ:"READ"
},
async:false,
success: function(data){
result = data;
}//成功执行方法
});
return result;
}
var sl;
sl = readDataAst("select xx,sum(CL01) from yl_dg_clmx_vw where rq = (select to_char(sysdate,'yyyy-mm-dd') from dual ) group by xx");
console.log(sl)
option.xAxis.data.splice(0,1,'shishi')
setInterval(function(){
option.title.subtext=new Date().toLocaleTimeString()
option.series.data.splice(0,1,(Math.random() * 100 + 5).toFixed(1) - 0)
myChart.setOption(option);
},2000)
</script>
</body>
</html>