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;