html堆叠柱状图脚本,echart 堆叠柱状图

1，实现效果

image.png

2，前端代码实现

var dom = document.getElementById("container");

var myChart = echarts.init(dom);

var app = {};

var qsData =[];

var fkData =[];

var qslvData =[];

var fklvData =[];

option = null;

option = {

tooltip: {

trigger: 'axis',

axisPointer: { // 坐标轴指示器，坐标轴触发有效

type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'

}

},

legend: {

data: ['签收数', '反馈数', '签收率', '反馈率']

},

grid: {

left: '3%',

right: '4%',

bottom: '3%',

containLabel: true

},

xAxis: [

{

type: 'category',

data: []

}

],

yAxis: [

{

type: 'value'

}

],

series: [

{

name: '直接访问',

type: 'bar',

stack: '广告1',

data: []

},

{

name: '直接访问1',

type: 'bar',

stack: '广告1',

data: []

},

{

name: '邮件营销',

type: 'bar',

stack: '广告',

data: []

},

{

name: '联盟广告',

type: 'bar',

stack: '广告',

data: []

}

]

};

{pageContext.request.contextPath}/xx/xx',

data:{},

dataType:'json',

success:function(ret){

if(ret){

var qsList = ret.qsList;

var fkList = ret.fkList;

for(var i =0; i< qsList.length; i++){

qsfkName.push(qsList.Ds);

qsData.push(qsList[i].qs);

qslvData.push(qsList[i]qslv);

fkData.push(fkList[i]..fk);

fklvData.push(fkList[i].fklv);

}

}

}

myChartt.setOption({

xAxis: {

data: qsfkName,

},

series: [

{

data:qsData,

},

{

data:fkData,

},

{

data:qslvData,

},

{

data:fklvData,

}

]

})

}

},

error:function(err){

return;

}

)}

if (option && typeof option === "object") {

myChart.setOption(option, true);

}

}

3，后台代码

controller：

Map map =new HashMap();

List qsList =this.findQsListService();

List fkList =this.findFkListService();

map.put("qsList",qsList);

map.put("fkList",fkList);

return map;