// vue 中使用
handelLoadingEcharts() {
var list = [{
"不合格(0, 19.8]":"102",
"中等(19.8, 24.75]":"506",
"优秀(28.05, 33]":"181",
"低分(0, 13.2]":"40",
"良好(24.75, 28.05]":"305",
"项目":"高三周测"
},{
"不合格(0, 19.8]": "30",
"中等(19.8, 24.75]": "55",
"优秀(28.05, 33]": "103",
"低分(0, 13.2]": "39",
"良好(24.75, 28.05]": "362",
"项目": "53"
},{
"不合格(0, 19.8]":"83",
"中等(19.8, 24.75]":"233",
"优秀(28.05, 33]":"151",
"低分(0, 13.2]":"29",
"良好(24.75, 28.05]":"208",
"项目":"高三联考2"
}]
var itemList = []
var yAxisData = [];
var xAxisData = []
var legend = []
var colors = ['#4C98FB', '#83CCE7', '#26C7C8', '#73DEBD', '#7390BD'];
for(var j = 0; j < list.length; j++) {
// 获取考试项目名称
xAxisData.push(list[j].项目)
// 删除“项目”字段
delete list[j].项目
// 获取返回数据对象的键
for(item in list[j]) {
itemList.push(item)
}
}
// 获取返回数据对象的键集合去重
for (var p = 0; p < itemList.length; p++) {
if (legend.indexOf(itemList[p]) === -1) {
legend.push(itemList[p])
}
}
// 根据评价项和分数创建二维数组
for(var i = 0; i < legend.length; i++) {
yAxisData.push([])
for (var j = 0; j < list.length; j++) {
yAxisData[i].push(list[j][legend[i]])
}
}
this.$nextTick(function() {
var option;
var chartDom = document.getElementById('main');
this.myChart = echarts.init(chartDom);
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'none'
}
},
color: colors,
legend: {
top: 10,
left: 200,
itemWidth: 10,
itemHeight: 10,
textStyle: {
fontSize: 14,
padding: [3, 0, 0, 0]
},
data: legend
},
grid: {
left: '3%',
right: '4%',
bottom: '13%',
containLabel: true,
},
xAxis: {
type: 'category',
data: xAxisData
},
yAxis: {
type: 'value',
axisLine: {
width: 5
},
splitLine: {
show: false
},
},
series: []
};
for (var i = 0; i < legend.length; i++) {
option.series.push({
name: legend[i],
type: 'bar',
stack: '总量',
barWidth: '45%',
label: {
show: false,
position: 'insideRight',
},
data: yAxisData[i]
});
}
this.myChart.clear();
this.myChart.setOption(option);
this.myChart.resize();
});
}
效果