echarts通过ajax加载数据渲染图表（堆叠条形图）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/xiongdaandxiaomi/article/details/80997396

堆叠条形图

• 堆叠条形图 官网示例
• 后台返回数据类型
• 实现echarts效果要求的数据类型
• 代码部分
• 最终展示效果

官网示例

官网示例链接

后台返回数据类型

实现echarts效果要求的数据类型

代码部分

分析：X轴月数据
Y轴申请数量
填充数据为—每个月中测试、正式数据量堆叠图形
HTML

<div class="applicationSituation">
<div class="applicationSituationTop">License申请情况</div>
<div class="applicationSituationMain" id="barAsm"></div>
</div>

JS

var barEchartsAsm = echarts.init(document.getElementById('barAsm'));
barEchartsAsm.setOption({
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c}"
},
legend: {
data: []
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis:  {
type: 'category',
data: []
},
yAxis: {
type: 'value',
},
series: [
]
});
/**licence申请情况 ajax S */
barEchartsAsm.showLoading();    //数据加载完之前先显示一段简单的loading动画
var applynames=[];//用来盛放x轴坐标值
var applycata=[];//用来盛放申请类型
$.ajax({
url: $treeBasePath+"/count/queryApplicationuseGroupByMon",
data: {},
datatype: "json",
type: "post",
async: true,
success: function (result) {
console.log("首页licence申请情况==",result);
if(result.STATUS=="success") {
var resdata=result.RESULT.list;
var colordata = ['#73ccd6','#77a8e2']
var seriesdata = []; //用于拼接到echarts图形里面的数据
if(resdata.length>0){
//取出 x轴显示月份和分类类型
$.each(resdata,function(index,element){
//去重,没有返回-1 indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
if(applycata.indexOf(element.applicationuse) == -1){
applycata.push(element.applicationuse);
}
if(applynames.indexOf(element.months) == -1){
applynames.push(element.months);
}
});
//tmpo 需要往series中拼接的数据
$.each(applycata,function (index,elemennt) {
var json = {};
var tmpo = {
name:elemennt,
type:'bar',
stack: '总量',
label:{
normal: {
show: true,
position: 'insideRight'
}
},

};
//循环所有数据，判断每条数据所属类型
$.each(resdata,function (index,ele) {
if(ele.applicationuse == elemennt){
//如果属于当前类型，给这个x轴赋对应数据
json[ele.months] =ele.num;
}
});
//循环x轴数据，如果这个数据没有对应的x轴，则为0
$.each(applynames,function (index,month) {
if(!json[month]){
json[month] = 0;
}
});
//相当于排序输出结果
var data = [];
$.each(applynames,function (index,month) {
for(var k in json){
if(k == month){
data.push(json[month]);
}
}
});
tmpo.data = data;
seriesdata.push(tmpo);
})
console.log("applynames--",applynames);
console.log("applycata--",applycata);
barEchartsAsm.hideLoading();    //隐藏加载动画
barEchartsAsm.setOption({
color:colordata,
legend: {
data: applycata
},
xAxis:  {
type: 'category',
data: applynames
},
series: seriesdata
})
}
}
}
});
/**licence申请情况 ajax E*/

最终展示效果

阅读更多