需求:
静态的,动态的,累积叠加的,横向的,竖向的
上图:
源代码来啦
<!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>
转载于:https://blog.51cto.com/baigungun/1313467