请问一下axios得到后台的数据，怎么将数据返回到前台echarts的堆叠面积图里面呀(需要循环将数据返回到series.data里面哎)
js代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>可视化测试</title>
<script type="module" src="./js/echarts.min.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/vue.main.js"></script>
<script src="./js/element-ui/element-ui.min.js"></script>
</head>
<body>
<div id="app">
<span>月清理量：{{clearAll.monthFinish}}</span>
<span>年清理量：{{clearAll.yearFinish}}</span>
<span>总清理量：{{clearAll.allFinish}}</span>
<div id="main" style="width: 1450px;height:650px;"></div>
</div>
</body>
<script>
var app = {
// 动态数据
data() {
return {
/* clearAll: {
monthUnfinished: "",
monthFinish: "",
yearUnfinished: "",
yearFinish: "",
allUnfinished: "",
allFinish: "",
}, */
clearAll: [],
// echarts1展示数据
series1: [],
// 里面的数据
seriesData1: [],
// 得到最近十二个月的月份(当前的月份+前十一个月的月份)
month: [],
// clearData ['月未清理', '月已清理', '年未清理', '年已清理', '总未清理', '总已清理']
clearData1: [],
}
},
// 函数
methods: {
initEcharts() {
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
var month = "三月";
option = {
title: {
text: '清运总数据',
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
// data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
data: this.clearData1,
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
// data: ['五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月', '一月', '二月', month, '四月']
data: this.month,
}
],
yAxis: [
{
type: 'value'
}
],
// 得到数据
series: this.series1,
/* series: [
{
name: '月未清理',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [152, 65, 130, 80, 100, 120, 132, 101, 134, 90, 230, 50]
},
{
name: '月已清理',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [80, 80, 80, 80, 100, 220, 182, 191, 234, 290, 330, 300]
},
{
name: '年未清理',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [80, 80, 80, 80, 100, 150, 232, 201, 154, 190, 330, 500]
},
{
name: '年已清理',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [80, 80, 80, 80, 100, 150, 232, 201, 154, 190, 330, 420]
},
{
name: '总未清理',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [80, 80, 80, 80, 100, 320, 332, 301, 334, 390, 330, 651]
},
{
name: '总已清理',
type: 'line',
stack: 'Total',
label: {
show: true,
position: 'top'
},
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [80, 80, 80, 80, 100, 344, 425, 251, 300, 286, 350, 400]
}
]*/
};
option && myChart.setOption(option);
},
// 折线图中的数据
series(clearAll) {
console.log(clearAll);
this.clearData();
// 展示series里面data的数据
this.getMonthDate();
var index = 0; //clearData1=6
for (let i = 0, index = 0; i < this.clearData1.length; i++, index++) {
//push向series1数组添加数据
this.series1.push(
{
// name: keyword[countMax],
// type: 'bar',
// data: data.Maxdata[key],
// 最新数据
name: this.clearData1[index],
type: 'line',
stack: 'Total',
label: {
show: true,
position: 'top'
},
areaStyle: {},
emphasis: {
focus: 'series'
},
// 这里data的数据展示有错误
data: [clearAll[i].monthUnfinished, clearAll[i].monthFinish, clearAll[i].yearUnfinished, clearAll[i].yearFinish, clearAll[i].allUnfinished, clearAll[i].allFinish]
}
);
}
console.log('数据1');
console.log(this.series1[0].data);
},
// 得到十二个月的日期
getMonthDate() {
var date = new Date();
var month = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月",];
var getMonth = [];
// 因为日期实际得到的日期月份是小于当前一个月，所以正好做入数组索引放入。
var monthDate = date.getMonth();
// 通过循环重新排序月份数组放入新数组
for (let index = month.length - 1; index >= 0; index--) {
getMonth[index] = month[monthDate];
monthDate--;
// 如果索引到-1的时候，就跑到数组的最后一个元素
if (monthDate == -1) {
monthDate = month.length - 1;
}
}
// 将返回到month数组对象
this.month = getMonth;
},
// 战术数据: ['月未清理', '月已清理', '年未清理', '年已清理', '总未清理', '总已清理']
clearData() {
var data = ['月未清理', '月已清理', '年未清理', '年已清理', '总未清理', '总已清理'];
this.clearData1 = data;
},
getData() {
axios.get('http://localhost:8888/clearAlls/getAllData')
.then(res => {
console.log('数据：');
// console.log(res.data);
this.clearAll = res.data.clearAll;
// 得到数据
this.series(res.data.clearAll);
this.initEcharts();
console.log('数据返回');
}).catch(err => {
console.log(err);
console.log('数据报错');
return;
})
}
},
mounted() {
this.getData();
}
}
var Ctor = Vue.extend(app);
new Ctor().$mount('#app');
</script>
</html>
效果展示图如下：
问题如下：
循环数据的时候有点问题，唉，我是刚入门，有好心人士帮忙解决一下嘛？
