新需求又来了！在项目验收阶段，遇到用户提新需求，然后不给你结账，对于出差已经了两个礼拜的程序猿---我来说，也是很无奈了！你要是不给做，人家不给钱，你要是做，时间又太紧张。
什么需求呢？做统计图，统计这东西，对于有点经验的开发者来说，如果自己纯纯的写sql,各种关联表查询，组装数据结构，都是很费时间的，工作一天，有时候发现统计数据竟然对不上！！！更奔溃的事，差个1,2百这都好说，应该统计的精度不太对。。。但是就怕你统计出来查1个两个的，你说这什么问题，真的不好说了！很有可能就是那一两条不规范数据倒置的。。。多了不说了，一把辛酸泪。
项目验收阶段，时间本来就紧张，领导的意思是，突出功能。什么意思呢？就是突出，咱们的系统有这个功能，能统计。说实话，出图不是很难，关键是写后台，大家一定要分清主要任务，关注点应该是我们的数据，而不是页面展示。后台代码，各家有各家不一样的地方。但是前台页面，又往往成为客户吐槽的重灾区。公司沿袭了使用echarts的习惯，恰好，公司统计中好多统计图的制作者就是本人，所以给大家介绍一下echarts的简单使用。希望大家快速入门。
第一步：在项目中拷贝echarts的js资源文件。。。（废话）
第二步：在你的页面中引入js。。。（废话）
第三步：拷贝百度eacharts的官方demo。。。
官方实例有很多，自己可以点进去看看。。。
当然效果是真的很朴素，，，要是自己想调一些样式啥的，请看下一步，调样式
第四步，调样式（真的很不在行，但是真得依靠度娘，遇到问题解决问题，代码说明）
$(function() { //页面加载的时候，执行查询，生成统计图
queryDataByNdAndLx();
})
后台返回的数据是这样的
//取得总数
var sum=0;
//取得json中的value，也就是柱状图y轴的值
function getDataValue(json){
var arr = []
for(var i =0 ; i <json.length;i++){
arr.push(json[i].num);
k=parseInt(json[i].num);
sum+=k;
}
return arr;
}
//取得json中的name，也就是柱状图横左边的值
function getDataName(json){
var arr = []
for(var i =0 ; i <json.length;i++){
arr.push(json[i].xzlb);
}
return arr;
}
//ajax发送请求，使用后台数据，生成图
function queryDataByNdAndLx(){
$("页面要放置图表的div").html("");
var url=“返回数据的后台路径‘’
var jsondata;
var myChart = echarts.init(document.getElementById('放置图表的div'));
myChart.dispose();
$.ajax({
type: "POST",
url: url,
async: true, //同步
dataType: "json",
beforeSend:function(XMLHttpRequest){//查询过程中，遮罩效果
$('body').mask("处理中")
},
//后台执行完成后，返回页面处理函数
success: function(result){
$('body').unmask();//返回数据，取消遮罩
if (result!=null&&result != "") {
var values=getDataValue(result);
var names=getDataName(result);
$("#sum").html(sum);
var myChart = echarts.init(document.getElementById('main1'));
option = {
title : {
text :'江苏省',
subtext : '江苏省学校分布情况',
x : 'center'
},
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
toolbox: {//自带的工具
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line']},
restore : {show: true},
saveAsImage : {show: true}
}
},
grid: {//横左边文字太长显式不全，看这里
left: '3%',
right: '4%',
bottom: '35%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : names,
axisTick: {
alignWithLabel: true
},
axisLabel: {//文字倾斜
interval:0,
rotate:40
},
}
],
yAxis : [
{
type : 'value',
name : '学校数(单位：所)'
}
],
series : [
{
name:'直接访问',
type:'bar',
barWidth: '60%',
label: {//将value显式到柱子顶上
normal: {
show: true,
position: 'top'
}
},
data:values,
itemStyle: {//柱子颜色单一，这么办
normal: {
color: function(params) {
var colorList = ['#C33531','#EFE42A','#64BD3D','#EE9201','#29AAE3', '#B74AE5','#0AAF9F','#E89589','#16A085','#4A235A','#C39BD3 ','#F9E79F','#BA4A00','#616A6B','#4A235A','#3498DB' ];
return colorList[params.dataIndex]
}
},
},
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
} else {
$("页面div").html("<p style='color:red;font-size:25px'>未查询到数据</p>");
}
}
});
}
效果出图
欢迎收藏转发，总有用到的时候。