记录一次echarts 柱状图堆叠图以及动态创建二维数组的过程

// 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();
						});
					}

效果