
对于服务型的公司来说,需要了解用户的使用趋势,来帮助分析市场的走向,所以说统计在一个管理后台中是必不可少的。
会用到echarts插件 ,其官网网址 http://echarts.baidu.com/
比如我想了解一段时间内所有停车场对于使用某一个功能的使用量,如做到下图的效果
要引入的文件
<script type="text/javascript" src="/../js/echarts.min.js"></script>
前端页面
<div id="totalPicture" class="col-sm-8" style="height: 600px;"></div>
js
var list = {
name : [],
count : []
};
for(var i = 0; i< data.data.length; i++) {
var item = data.data[i];
list.name.push(item._id); //后台得到的数据 push到自己定义的数组中去
list.count.push(item.count);
}
var statisticsEcharts = echarts.init(document.getElementById("totalPicture")); //渲染到前端页面id为totalPicture
//指定图表的配置项和数据
var option = {
title: {
text: $scope.StartDate+'~'+$scope.EndDate+'时间内各停车场月卡续费总数统计图', //设置统计图的名称
x:'center'
},
tooltip : {
trigger: 'axis',
axisPointer : {
type : 'line'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {} //设置是否下载图片
}
},
xAxis: {
type : 'category',
name:'名称', //设置X轴的名称
axisLine: {
lineStyle: { color: 'blue' }
},
splitLine: {
lineStyle: {
opacity: 0.45
}
},
axisTick: {
show: false
},
data : list.name,
axisLabel:{
formatter:function(val){return val.split("").join("\n");} // 设置X轴坐标名称的方向(纵向)
}
},
yAxis: {
name:'使用量',//设置y轴的名称
axisLine: {
lineStyle: { color: 'blue' } //设置y的颜色
}
},
series: [
{
name: '使用量',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'top'
}
},
data:list.count
}
]
};
statisticsEcharts.setOption(option);