echarts柱状图

<div style="height: 30px; margin-top :10px; width: 100%;">
<ul class="intMenu">
<li id="SetTime" style="float: right;width: 40px;" title="设置">
<i class="glyphicon glyphicon-cog"></i>
</li>
</ul>
</div>
<!-- 生产状态 -->
<div class="psmdiv" style="">
<div class="col-sm-12 col-md-12 col-lg-12" style="padding: 0px;">
<div class="bdiv" >
<!-- 柱状图 -->
<div id="bar" class="bar" ></div>
</div>
</div>
</div>
<!-- 生产状态 end-->
<script type="text/javascript">
var listOrg2Str = new Array();
var listPrintStr = new Array();
var listSignStr = new Array();
function startRequestData() {
$.ajax({
type : "POST",
async : false,
url : '<%=basePath%>dataStatistics/dStatistics',
data : {
"type0Day" : $("#type0Day").val(),
"type1Day" : $("#type1Day").val()
},
dataType : "json",
error : function(){
var Str ="<div style=\"color:#E0040E;font-size:30px;width:700px;height:40px;position:absolute;top:50%;left:50%;margin-left:-350px;margin-top:-20px;\">柱状图获取数据异常！！！</div>";
$("#bar").empty();
$("#bar").append(Str);
},
success : function(results){
var w = $("#ps").width();
var h = $("#ps").height()-70;
$(".bar").width(w);
$(".bar").height(h);
var len = results.length
console.log(results);
if(len > 0){
for(var i = 0;i<results.length;i++){
listOrg2Str[i] = results[i].ORG_NAME;
listPrintStr[i] = results[i].printNum;
listSignStr[i] = results[i].signNum;
}
}
}
});
require.config({
paths : {
echarts : './static/zgjb' //echarts.js的路径
}
});
require([ 'echarts', 'echarts/chart/bar', ], DrawEChart);
//渲染ECharts图表
function DrawEChart(ec){
//图表渲染的容器对象
var chartContainer = document.getElementById("bar");
//加载图表
var myChart = ec.init(chartContainer);
myChart
.setOption({
tooltip : {
// trigger: 'axis'//显示双柱状图数据
show: true//显示选中柱子的数据
},
grid: {show:'true',borderWidth:'0' ,bottom : '20%'},//不显示是最外层边框
legend: {
data:['接收到打印超过'+$("#type0Day").val()+'天','打印到签收超过'+$("#type1Day").val()+'天'],
textStyle : {
color : '#fff',
fontSize : 18,
fontWeight : 'bold'
}
},
calculable : false,
xAxis : [
{
splitLine:{show: false},//去除横向网格线
type : 'category',
data : listOrg2Str,
name : '分公司',
nameTextStyle : {
color : '#fff',
},
axisLabel : {
rotate: '30',//x轴文字倾斜60度
textStyle : {
color : '#fff',
// fontSize : 18,
// fontWeight : 'bold'
},
formatter:function(params) {
var newParamsName = "";
var paramsNameNumber = params.length;
var provideNumber = 5; //一行显示几个字
var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
if (paramsNameNumber > provideNumber) {
for (var p = 0; p < rowNumber; p++) {
var tempStr = "";
var start = p * provideNumber;
var end = start + provideNumber;
if (p == rowNumber - 1) {
tempStr = params.substring(start, paramsNameNumber);
} else {
tempStr = params.substring(start, end) + "\n";
}
newParamsName += tempStr;
}

} else {
newParamsName = params;
}
return newParamsName
},
},
},
],
yAxis : [
{
splitLine:{show: false},//去除纵向网格线
name : '件',
nameTextStyle : {
color : '#fff',
},
type : 'value',
axisLabel : {
textStyle : {
color : '#fff',
// fontSize : 18,
// fontWeight : 'bold'
}
}
}
],
series : [
{
name:'接收到打印超过'+$("#type0Day").val()+'天',
type:'bar',
data:listPrintStr,
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: '#fff'
}
}
}
},
},
{
name:'打印到签收超过'+$("#type1Day").val()+'天',
type:'bar',
data:listSignStr,
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
}
}
},
}
]
});
}
}
startRequestData();

var timer;
var delayTime=5000; //5s
function startTimer(){
timer = setInterval(startRequestData,delayTime*1000);
}
startTimer();

只需要改变变量即可,背景自己添加.有助解的地方都有可能有坑 ....效果图:

 

如果还有其他的要求可以参考http://echarts.baidu.com/api.html