需求：
靜態的，動態的，累積疊加的，橫向的，豎向的
上圖：
源代碼來啦
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>bar--實驗 bar圖展示，橫向和豎向的，靜態和動態的，混合色和單色的</title>
<script src="../js/esl.js"></script>
<script src="../js/jquery-1.7.1.js"></script>
<script type="text/javascript">
/**
實驗 bar圖展示，橫向和豎向的，靜態和動態的，混合色和單色的
*/
require.config({
packages:[
{
name:'echarts',
location:'../echarts-master/src',
main:'echarts'
},
{
name:'zrender',
location:'../zrender-master/src',
main:'zrender'
}
]
});
//橫向柱狀圖
var option1 = {
tooltip : {
trigger: 'axis',
axisPointer : { // 座標軸指示器，座標軸觸發有效
type : 'shadow' // 默認爲直線，可選爲：'line' | 'shadow'
}
},
legend: {
data:['***檢測', '惡意軟件']
},
calculable : true,
xAxis : [
{
type : 'value'
}
],
yAxis : [
{
type : 'category',
data : fetchXname()//此處是從數據庫中取出的值
}
],
series : [
{
name:'***檢測',
type:'bar',
stack: '總量',//組合名稱，多組數據的堆積圖時使用
itemStyle : { normal: {label : {show: true, position: 'inside'}}},
data:[320, 302, 301, 334, 390, 330, 320]
},
{
name:'惡意軟件',
type:'bar',
stack: '總量',
itemStyle : { normal: {label : {show: true, position: 'inside'}}},
data:[120, 132, 101, 134, 90, 230, 210]
}
]
};
//豎向柱狀圖
var option2 = {
tooltip : {
trigger: 'axis',
axisPointer : { // 座標軸指示器，座標軸觸發有效
type : 'shadow' // 默認爲直線，可選爲：'line' | 'shadow'
}
},
legend: {
data:['test','併發連接','新建連接']
},
calculable : true,
xAxis : [
{
type : 'category',
data : ['qq','pps','ie','360','msn']
}
],
yAxis : [
{
type : 'value',
splitArea : {show : true}
}
],
series : [
{
name:'test',
type:'bar',
barWidth : 10,
data:[320, 332, 301, 334, 390]
},
{
name:'併發連接',
type:'bar',
barWidth : 15,
stack: '廣告',
data:[120, 132, 101, 134, 90]
},
{
name:'新建連接',
type:'bar',
barWidth : 15,
stack: '廣告',
data:[220, 182, 191, 234, 290]
}
]
};
var option3 = {
title : {
text: '動態數據',
subtext: '純屬虛構'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:[ '預購隊列']
},
dataZoom : {
show : false,
realtime: true,
start : 50,
end : 100
},
xAxis : [
{
type : 'category',
boundaryGap : true,
splitline : {show : true},
data : (function(){
var res = [];
var len = 100;
while (len--) {
res.push(len + 1);
}
return res;
})()
}
],
yAxis : [
{
type : 'value',
scale: true,
name : '預購量',
boundaryGap: [0.2, 0.2]
}
],
series : [
{
name:'預購隊列',
type:'bar',
// xAxisIndex: 0,//有多個座標軸的時候使用，比如這是第二個座標系，所以用的是1，如果只有1個，應該是0
// yAxisIndex: 0,
itemStyle: {
normal: {
color : 'rgba(135,206,205,0.4)'
}
},
data:dataXRand()
}
]
};
var myChart1;
var myChart2;
var myChart3;
require(
[
'echarts',
'echarts/chart/bar'
],
function(ec){
myChart1=ec.init(document.getElementById('main1'));
myChart1.setOption(option1);
myChart2=ec.init(document.getElementById('main2'));
myChart2.setOption(option2);
myChart3=ec.init(document.getElementById('main3'));
myChart3.setOption(option3);
var timeTicket;
clearInterval(timeTicket);
timeTicket = setInterval(function(){
RandANum(ec);
}, 1000);
}
)
//ajax獲取後臺數據，x軸的name從數據庫中讀取
function fetchXname(){
var arr=new Array();
$.ajax(
{
url:"../control/AjaxService.php?method=GetXaxisname",
dataType:"text",
success:function(data)
{
//調用函數獲取值，轉換成數組模式
var ss=eval(data);
for(var i=0;i<ss.length;i++)
{
arr.push(ss[i].name);
}
}
});
return arr;
}
//柱狀圖初始化的值
function dataXRand(){
var dataarr=new Array();
$.ajax({
url:"../control/AjaxService.php?method=RandTest",
dataType:"text",
success:function(data)
{
var ss=eval(data);
for(var i=0;i<ss.length;i++)
{
dataarr.push(ss[i]);
// alert(dataarr[i]);
}
}
});
return dataarr;
}
function RandANum(ec){
$.ajax({
url:"../control/AjaxService.php?method=RandANum2",
dataType:"text",
success:function(data)
{
Rdata=eval(data);
myChart3.addData([
[
0, // 系列索引
Rdata, // 新增數據
false, // 新增數據是否從隊列頭部插入
false, // 是否增加隊列長度，false則自定刪除原有數據，隊頭插入刪隊尾，隊尾插入刪隊頭
// axisData // 座標軸標籤
]
]);
}
});
}
</script>
</head>
<body>
<div id="main1" style="height:350px;width:700px; border:1px solid #ccc; padding:10px;"></div>
<div id="main2" style="height:350px;width:700px; border:1px solid #ccc; padding:10px;"></div>
<div id="main3" style="height:350px;width:640px; border:1px solid #ccc; padding:10px;right:10px;top:9px;position:absolute;"></div>
<div id="main4" style="height:350px;width:640px; border:1px solid #ccc; padding:10px;right:10px;top:380px;position:absolute;"></div>
</body>
</html>