本文主要是介绍Echars 生成柱状图，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
导包<!-- echart -->
<script type="text/javascript" src="${ctxStatic}/echarts-2.2.7/build/dist/echarts-all.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
var h = $(document).height();
var w = $(document).width();
$("#oBar").attr("style","width:"+w*0.33+"px;height:"+h*0.68+"px;margin-top: 0px;");
echartData();
});
function echartData(){
var barxValue = new Array();
var baryValue = new Array();
$.post("${ctx}/sys/m/feeBar",
function(data) {
barxValue.length=0;
baryValue.length=0;
var json = data;
$(json).each(function(index, obj) {
baryValue.push(obj.userName);
barxValue.push(-obj.fee);
});
var title = "欠费电量（度）";
// baryValue.sort(function(a,b){return a-b})
barChart(barxValue.sort(function(a,b){return a-b}),baryValue.sort(function(a,b){return a-b}),title);
});
}
function barChart(xArray,yArray,title){
var x = xArray;var y = yArray;
var title = title;
if(title == "欠费电量（度）"){
var barChart1 = document.getElementById("oBar");
var barechart = echarts.init(barChart1);
}else if(title == "使用电量（度）"){
var barChart = document.getElementById("sBar");
var echart = echarts.init(barChart);
}
var option = {
color : ['#3cb371', '#b8860b', '#30e0e0'],//修改图形颜色
title : {
// text: '世界人口总量',
// subtext: '数据来自网络'
// link:'www.baidu.com' // 主标题超链接
},
tooltip : {
trigger: 'item',
formatter: "{a} : {c} "
},
legend: {
data:[title],
y:"top",
padding:15
},
toolbox: {
show : false,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
// calculable : true, //是否启用拖拽重计算特性，默认关闭，
grid: {
borderWidth: 0,
x:95,
x2:40,
y: 50,
y2: 40
},
xAxis : [
{
type : 'value',//设置x为纵轴 来实现横向显示柱状图 value=纵轴
boundaryGap : [0, 0.01]
// boundaryGap : false
}
],
yAxis : [
{
type : 'category',
data : y,
axisLabel:{//让Y轴自动换行
formatter:function(params){
var newParamsName = "";//返回的字符串
var paramsNameNumber = params.length;//获得字符串长度
var provideNumber = 7;//每行显示的长度
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
}
}
// data : ["掌握主动","博大网通","罗伯特","燕园校友","脉极客","中华科技","logYaoDa","头条","德州","水族馆"]//这里放前十名用户名desc
}
],
series : [
{
name: title,
type: 'bar',
data: x ,// 这里放电量数据
itemStyle: {
normal: {
color: 'tomato',
label : {
show: true, position: 'insideRight'
}
}
}
}
]
};
if(title == "欠费电量（度）"){
barechart.setOption(option);
}else if(title == "使用电量（度）"){
echart.setOption(option);
}
};
</script >
JSP 写
<div id="oBar" >
</div>
这篇关于Echars 生成柱状图的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
