layui+echarts+动态数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<link rel="icon" href="img/dnico.ico" />
</head>
<body>
<div style="padding: 20px; background-color: #F2F2F2;">
<div class="layui-row layui-col-space15">
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header">折线图</div>
<div class="layui-card-body">
<div id="main" style="width: 600px;height:400px;"></div>
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header">柱形图</div>
<div class="layui-card-body">
<div id="main2" style="width: 600px;height:400px;"></div>
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header">饼图</div>
<div class="layui-card-body">
<div id="main3" style="width: 600px;height:400px;"></div>
</div>
</div>
</div>
</div>
</div>
<script src="layui/layui.js"></script>
<script type="text/javascript" src="js/common.js" ></script>
<script type="text/javascript" src="js/cookie.js" ></script>
<script type="text/javascript" src="echarts/echarts.js" ></script>
<script type="text/javascript">
layui.use(['table','element'], function(){
var table = layui.table;
var element = layui.element;
var $ = layui.jquery;
// 统计图 开始
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var myChart1 = echarts.init(document.getElementById('main1'));
var myChart2 = echarts.init(document.getElementById('main2'));
var myChart3 = echarts.init(document.getElementById('main3'));
// 指定图表的配置项和数据
var data1=[];
var data2=[];
var data5=[];
var data6=[];
var data7=[];
var data8=[];
requestPost("/index/zhexiangtu",{}, function(data){
if(data.code == 0){
var zhexiangtu = data.data.zhexiangtu;
var zhuxingtu = data.data.zhuxingtu;
var bingtu = data.data.bingtu;
if(zhexiangtu.length > 0){
//折线图
for (var j = 0; j < zhexiangtu.length; j++) {
data1.push(zhexiangtu[j].order)
data2.push(zhexiangtu[j].ordercount)
}
myChart.setOption(option);
}
if(zhuxingtu.length > 0){
//柱形图
for (var h = 0; h < zhuxingtu.length; h++) {
data5.push(zhuxingtu[h].hosname)
data6.push(zhuxingtu[h].device)
}
myChart2.setOption(option2);
}
/*if(bingtu.length > 0){
//饼图
for (var n = 0; n < bingtu.length; n++) {
data7.push(bingtu[n].value)
data8.push({
value:bingtu[n].value,
name:bingtu[n].name
})
}
myChart3.setOption(option3);
}*/
}
});
var option = {
color: ['#3398DB'],
tooltip: {
trigger: 'axis'
},
xAxis:{
type: 'category',
data:data1
} ,
yAxis: {
type: 'value'
},
series: [{
data:data2,
type: 'line',
smooth: true
}]
};
var option1 = {
color: ['#3398DB'],
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: data3
},
yAxis: {
type: 'value'
},
series: [{
data:data4,
type: 'line'
}]
};
var option2 = {
color: ['#3398DB'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data:data5,
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
type: 'bar',
barWidth: '60%',
data:data6
}
]
};
var option3 = {
color: ['#008200','#3398DB'],
title: {
text: '设备使用类别情况',
subtext: '小时/长租',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
data: data7
},
series: [
{
name: '使用数据',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data:data8,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
});
</script>
</body>
</html>
