多图合并echarts category配置项内容和展示
多种数据图合并
配置项如下
var unit = "%";
var color = "red";
var data = {
"caseInfo": [{
"title": "报修未达标率",
"value": [{
"type": "bar",
"item": [{
"name": "未达标回单率",
"id": "151518",
"xData": ["项目一", "项目二", "项目三", "项目四", "项目五"],
"yData": [20, 30, 40, 47, 12]
}, {
"name": "未达标率",
"id": "151518",
"xData": ["项目一", "项目二", "项目三", "项目四", "项目五"],
"yData": [24, 31, 43, 41, 13]
}]
}, {
"type": "bar",
"item": [{
"name": "未达标及思虑",
"id": "151518",
"xData": ["项目一", "项目二", "项目三", "项目四", "项目五"],
"yData": [10, 20, 44, 42, 65]
}]
}, {
"type": "bar",
"item": [{
"name": "未达标",
"id": "151518",
"xData": ["特约服务类", "投诉类", "建议类", "咨询类", "户内维修类"],
"yData": [20, 30, 40, 47, 12]
}]
}, {
"type": "bar",
"item": [{
"name": "未达标及",
"id": "151518",
"xData": ["特约服务类", "投诉类", "建议类", "咨询类", "户内维修类"],
"yData": [20, 33, 40, 47, 12]
}]
}]
}, {
"title": "投诉未达标",
"value": [{
"stack": "总量",
"type": "bar",
"item": [{
"name": "特约服务类",
"id": "151518",
"xData": ["项目一", "项目二", "项目三", "项目四", "项目五"],
"yData": [1, 12, 11, 12, 15]
}, {
"name": "投诉类",
"id": "151518",
"xData": ["项目一", "项目二", "项目三", "项目四", "项目五"],
"yData": [2, 32, 21, 22, 23]
}, {
"name": "建议类",
"id": "151518",
"xData": ["项目一", "项目二", "项目三", "项目四", "项目五"],
"yData": [12, 14, 16, 21, 24]
}, {
"name": "咨询类",
"id": "151518",
"xData": ["项目一", "项目二", "项目三", "项目四", "项目五"],
"yData": [2, 22, 13, 14, 12]
}, {
"name": "户内维修类",
"id": "151518",
"xData": ["项目一", "项目二", "项目三", "项目四", "项目五"],
"yData": [15, 3, 12, 22, 12]
}]
}, {
"stack": "总量1",
"type": "bar",
"item": [{
"name": "特约服务类1",
"id": "151518",
"xData": ["项目一", "项目二", "项目三", "项目四", "项目五"],
"yData": [1, 12, 11, 12, 15]
}, {
"name": "投诉类1",
"id": "151518",
"xData": ["项目一", "项目二", "项目三", "项目四", "项目五"],
"yData": [2, 31, 21, 22, 23]
}, {
"name": "建议类1",
"id": "151518",
"xData": ["项目一", "项目二", "项目三", "项目四", "项目五"],
"yData": [12, 14, 16, 21, 24]
}, {
"name": "咨询类1",
"id": "151518",
"xData": ["项目一", "项目二", "项目三", "项目四", "项目五"],
"yData": [2, 22, 13, 14, 12]
}, {
"name": "户内维修类1",
"id": "151518",
"xData": ["项目一", "项目二", "项目三", "项目四", "项目五"],
"yData": [15, 3, 12, 22, 12]
}]
}]
}, {
"title": "预收未达标",
"value": [{
"stack": "总量2",
"type": "bar",
"item": [{
"name": "特约服务类2",
"id": "151518",
"xData": ["项目一", "项目二", "项目三", "项目四", "项目五"],
"yData": [1, 12, 11, 12, 15]
}, {
"name": "投诉类2",
"id": "151518",
"xData": ["项目一", "项目二", "项目三", "项目四", "项目五"],
"yData": [2, 31, 21, 22, 23]
}, {
"name": "建议类2",
"id": "151518",
"xData": ["项目一", "项目二", "项目三", "项目四", "项目五"],
"yData": [12, 14, 16, 21, 24]
}, {
"name": "咨询类2",
"id": "151518",
"xData": ["项目一", "项目二", "项目三", "项目四", "项目五"],
"yData": [2, 22, 13, 14, 12]
}, {
"name": "户内维修类2",
"id": "151518",
"xData": ["项目一", "项目二", "项目三", "项目四", "项目五"],
"yData": [15, 3, 12, 22, 12]
}]
}, {
"type": "pie",
"item": [{
"name": "下一",
"value": 20,
"id": "df323df"
}, {
"name": "占比",
"value": 30,
"id": "df323df"
}, {
"name": "天天",
"value": 50,
"id": "df323df"
}, {
"name": "问我",
"value": 60,
"id": "df323df"
}, {
"name": "液体",
"value": 22,
"id": "df323df"
}, {
"name": "问我1",
"value": 33,
"id": "df323df"
}]
}, {
"type": "pie",
"item": [{
"name": "订单",
"value": 20,
"id": "df323df"
}, {
"name": "二额",
"value": 30,
"id": "df323df"
}, {
"name": "水电费",
"value": 60,
"id": "df323df"
}]
}]
}],
"projectList": [
["回单率未达标", "及时率未达标", "回单未达标", "时率未达标"],
["未关闭统计图", "不满意统计图"],
["未关闭明细", "突发事件分类统计图", "质量事故统计图"]
]
}
var title = [];
var series = [];
var subTitle = "";
var grid = [];
var xAxis = [];
var yAxis = [];
var indexOne = -1;
var legend = [];
for (var k = 0; k < data.caseInfo.length; k++) {
var L = data.caseInfo.length;
var datas = data.caseInfo[k];
var y = Math.floor(k * (100 / L));
title.push({
text: datas.title,
y: y + '%',
left: 'left',
textStyle: {
color: color
}
});
var bottom = Math.floor((100 / L) * (L - 1));
for (var index = 0; index < datas.value.length; index++) {
indexOne++
if (datas.value[index].type != "pie") {
grid.push({
top: (y + 8) + "%",
width: Math.floor(100 / datas.value.length) + "%",
left: Math.floor(100 / datas.value.length * index) + "%",
bottom: (bottom - y + 2) + "%",
containLabel: true,
textStyle: {
color: color
}
});
xAxis.push({
type: 'category',
gridIndex: indexOne,
data: datas.value[index].item[0].xData,
axisLine: {
lineStyle: {
color: color
}
},
axisLabel: {
interval: 0,
rotate: (function() {
for (var w = 0; w < datas.value[index].item[0].xData.length; w++) {
if (datas.value[index].item[0].xData[w].length > 3) {
return 30
} else {
return 0
}
}
})()
}
});
yAxis.push({
type: 'value',
gridIndex: indexOne,
axisLabel: {
formatter: '{value}' + unit
},
axisLine: {
lineStyle: {
color: color
}
},
});
for (var m = 0; m < datas.value[index].item.length; m++) {
series.push({
type: datas.value[index].type,
data: datas.value[index].item[m].yData,
stack: (function() {
if (datas.value[index].stack) {
return datas.value[index].stack;
} else {
return "";
}
})(),
name: datas.value[index].item[m].name,
xAxisIndex: indexOne,
yAxisIndex: indexOne,
label: {
normal: {
show: true,
position: (function() {
if (datas.value[index].stack) {
return "inside";
} else {
return "top";
}
})(),
formatter: (function() {
if (datas.value[index].stack) {
return '{c}';
} else {
return '{c}' + unit;
}
})(),
textStyle: {
color: color
}
}
}
});
}
// legend.push({
// width: "25%",
// type: "scroll",
// top: 5 + y + "%",
// left: Math.floor(100 / datas.value.length * index) + "%",
// data: Object.keys(datas.value[index].item).map(function(key) {
// return datas.value[index].item[key].name;
// }),
// textStyle: {
// color: color
// },
// pageTextStyle: {
// color: color
// },
// pageIconColor: color
// })
} else {
series.push({
type: datas.value[index].type,
radius: Math.floor(70 / L) - 3 + '%',
center: [Math.floor((100 / datas.value.length / 2) + (100 / datas.value.length) * index) + "%", Math.floor(y + (70 / L / 1.1)) + "%"],
data: datas.value[index].item,
label: {
normal: {
show: true,
position: 'inner',
formatter: '{c}',
textStyle: {
color: color
}
}
}
});
// legend.push({
// width: "25%",
// type: "scroll",
// top: 5 + y + "%",
// left: Math.floor(100 / datas.value.length * index) + "%",
// data: Object.keys(datas.value[index].item).map(function(key) {
// return datas.value[index].item[key].name;
// }),
// textStyle: {
// color: color
// },
// pageTextStyle: {
// color: color
// },
// pageIconColor: color
// })
}
};
subTitle += '<div style="position:absolute;top:' + (y + 2) + '%;width:100%">';
for (var x = 0; x < data.projectList[k].length; x++) {
subTitle += '<p style="color:' + color + ';float:left;text-align:center;width:' + Math.floor((100 / datas.value.length)) + '%">';
subTitle += data.projectList[k][x];
subTitle += '</p>';
}
subTitle += '</div>';
}
option = {
color: ['#d84d4d', '#4dc7d7', '#fae76a', '#ce76fc', '#fcc15b', '#77fdb9', '#77c6fd', '#d9824d', '#ffada0', '#61c219', '#4d78d8', '#0ad08c', '#fa6aaa', '#48cfab', '#ffd5bc', '#af7eff', '#ffa9e8', '#ffbb91', '#ed6a55', '#5365a2'],
textStyle: {
fontStyle: "normal",
},
tooltip: {
//trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
},
label: {
show: true,
textStyle: {
color: "#333"
}
}
},
showContent: true,
triggerOn: "mousemove"
},
// legend: legend,
grid: grid,
xAxis: xAxis,
yAxis: yAxis,
title: title,
series: series
}
$("#chart-panel").append(subTitle);
截图如下
