原因:axios的异步问题,
解决方法:必须先获取到数据再进行画图
解决部分代码:
this.getRes().then(res=>{
// console.log(res)
if(res.code==200){
this.factorRes = res.data.data.factorRes;
this.factorRes.forEach(item => {
this.factorX.push(item.factorName)
this.factorY.push(item.factorScore)
})
this.option.xAxis.data = this.factorX;
this.option.series[0].data = this.factorY;
// console.log(this.option)
var myChart = echarts.init(document.getElementById('echart'));
// 绘制图表
myChart.setOption(this.option, true);
}
})
完全代码:
<template>
<div>
<el-card style="margin: 20px 40px 0px 40px">
<div style="text-align: center;"><h2 style="margin-top: 0px">{{this.scale.scaleName}}测评报告</h2></div>
<div style="justify-content: center;display: flex">
<span style="float: right;font-size: 14px">测试日期:{{this.record.redTime}}</span>
</div>
<div>
<el-icon class="el-icon-s-opportunity" style="color: #0a76a4"></el-icon>
测评结果
</div>
<div style="margin-top: 20px;">
<div style="margin-left: 20px">您的量表总得分为:{{this.record.redScore}}</div>
<div style="margin-left: 20px;margin-top: 10px">具体因子得分为:</div>
<el-table :data="factorRes" border stripe style="width: 500px;margin: 20px auto"
:header-cell-style="getRowClass">
<el-table-column prop="factorName" label="因子名称"></el-table-column>
<el-table-column prop="factorScore" label="因子得分"></el-table-column>
</el-table>
<template>
<div id="echart" style="width:600px;height:400px;margin:0 auto"></div>
</template>
</div>
<div>
<el-icon class="el-icon-s-opportunity" style="color: #0a76a4"></el-icon>
得分说明
</div>
<div style="margin-top: 20px;margin-left: 10px">
<b>【量表结果解释】:</b>{{this.scale.scaleRes}}
</div>
<div style="margin-top: 20px;margin-left: 10px" v-for="item in this.factorRes" :key="item.fcId">
<b>【{{item.factorName}}】:</b>{{item.factorInfo}}
</div>
</el-card>
</div>
</template>
<script>
import request from "@/utils/request";
import moment from 'moment'
import * as echarts from 'echarts'
export default {
name: "StudentRes",
data() {
return {
redId: '',
factorRes: [],
factorX: [],
factorY: [],
record: {},
scale: {},
option: {
tooltip: {},
xAxis: {
type:'category',
data: []
},
yAxis: {
type: 'value',
axisLine: {
show: true, //y轴线显示
}
},
series: [
{
type: 'bar',
data: [],
barWidth: '20%',
barGap:1,
label:{
show:true,
position:'top'
}
},
]
}
}
},
created() {
this.redId = this.$route.params.redId;
// console.log(this.redId)
this.getRes();
},
mounted() {
this.draw()
},
methods: {
draw() {
// 基于准备好的dom,初始化echarts实例
this.getRes().then(res=>{
// console.log(res)
if(res.code==200){
this.factorRes = res.data.data.factorRes;
this.factorRes.forEach(item => {
this.factorX.push(item.factorName)
this.factorY.push(item.factorScore)
})
this.option.xAxis.data = this.factorX;
this.option.series[0].data = this.factorY;
// console.log(this.option)
var myChart = echarts.init(document.getElementById('echart'));
// 绘制图表
myChart.setOption(this.option, true);
}
})
},
//数据自动刷新,必然需要一个监听机制告诉Echarts重新设置数据
async getRes() {
const res = await request.get(`${this.GLOBAL.BASE_URL}/scale/res/${this.redId}`);
// console.log(res)
if (res.code !== 200) return this.$message.error("获取测评结果失败!")
this.record = res.data.data.record;
this.record.redTime = moment(this.record.redTime).format("yyyy年MM月DD日 HH:mm:ss")
const res1 = await request.get(`${this.GLOBAL.BASE_URL}/scale/${this.record.scaleId}`);
if (res1.code !== 200) return this.$message.error("获取量表信息失败!")
this.scale = res1.data.data.scale
return res
},
// eslint-disable-next-line no-unused-vars
getRowClass({row, column, rowIndex, columnIndex}) {
if (rowIndex === 0) {
return 'background:#87CEEB'
} else {
return ''
}
}
}
}
</script>
<style scoped>
</style>