问题描述：
vue中子组件是echarts图表，父组件向子组件利用props传值，值传递过去了，但是，echarts不渲染。
问题现象再深一层次：
数据没有驱动试图
解决办法：
用v-if进行一个渲染判断
上代码：
父组件
<template>
<div class="putongradar_container">
<div class="container_left">
<div class="title">{
{
zonghNengli }}</div>
<zonghe-nengli style="margin: 5px 0 0 3px"
:wheretogos="gotoPath"
:taping-grade="shixiongpingtotalGrade"
:ziping-grade ="zipingtatalGrade"
></zonghe-nengli>
//子组件eacharts图表 重点就在这个flag上
<radar style="margin: 20px 0 0 3px"
v-if="flag"
:self-rating="zipingRadar"
:senior-rating="shixiongpingRadar"
></radar>
<div class="title tupufenxi_title">{
{
putuFenxi }}</div>
<tupu-fenxi style="margin: 10px 0 0 3px"></tupu-fenxi>
</div>
<div class="container_right">
<div class="title" style="margin-left=1px">{
{
shidinneglitufuFenxi }}</div>
<shidi-pingfen style="margin-left=1px;margin-top:13px"></shidi-pingfen>
<shidi-barchart style="margin-left=1px;margin-top:20px"></shidi-barchart>
<div class="title" style="margin: 10px 0 0 1px">{
{
awaitPingjia}}</div>
<div class="awaitevaluate_container">
<giveshidi-pingfen :wheretogos="gotoRouter"></giveshidi-pingfen>
<remind-selfping style="margin: 0 0 0 20px"></remind-selfping>
</div>
</div>
</div>
</template>
<script>
import ZongheNengli from "../../components/common/zonghenengli";
import Radar from "../../components/common/radar"
import TupuFenxi from "../../components/common/tupufenxi";
import ShidiPingfen from "../../components/shixiong/shidipingfen";
import ShidiBarchart from "../../components/shixiong/shidibarchart";
import GiveshidiPingfen from "../../components/shixiong/giveshidipingfen";
import RemindSelfping from "../../components/shixiong/remindselfping";
import {
totalGrade
} from "@/api/ziping";
export default {
components: {
ZongheNengli,
Radar,
TupuFenxi,
ShidiPingfen,
ShidiBarchart,
GiveshidiPingfen,
RemindSelfping
},
data() {
return {
zonghNengli: "综合能力",
putuFenxi: "图谱分析",
shidinneglitufuFenxi: "师弟能力图谱评分",
awaitPingjia: "待评价",
gotoPath: "/shixiongziping",
gotoRouter: "/shixiongpingfen",
//自评和师兄平的总分
zipingtatalGrade: null,
shixiongpingtotalGrade: null,
//雷达图数据
zipingRadar: [],
shixiongpingRadar: [],
flag: false
};
},
created() {
this._getTotalGrade();
},
methods: {
async _getTotalGrade() {
const {
data: res} = await totalGrade()
res.forEach(item => {
if(item.judgesUserId == item.sysUserId) {
this.zipingtatalGrade = item.comprehensive
this.zipingRadar.push(item.software,item.business,item.culture,item.hobby,item.skill)
}
if(item.judgesUserId != item.sysUserId) {
this.shixiongpingtotalGrade = item.comprehensive
this.shixiongpingRadar.push(item.software,item.business,item.culture,item.hobby,item.skill)
}
})
this.flag = true
}
},
computed: {
},
};
</script>
<style lang="less" scoped>
.putongradar_container {
display: flex;
height: 100%;
}
.container_left {
width: 613px;
height: 100%;
padding-left: 20px;
box-sizing: border-box;
}
</style>
子组件：
<template>
<div id="radar_container"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
//重点看这里
props:{
selfRating: {
type: Array,
default: []
},
seniorRating: {
type: Array,
default: []
}
},
data() {
return {
};
},
created() {
},
mounted() {
// this._selfRating = this.selfRating;
// this._seniorRating = this.seniorRating
var radar = echarts.init(document.getElementById("radar_container"));
// 绘制图表
var option = {
tooltip: {
},
//图例
legend: {
type: "plain",
show: true,
data: ["自我评分", "师兄评分"],
right: 40,
top: 230,
orient: "vertical",
itemGap: 29,
itemWidth: 19,
itemHeight: 7,
textStyle: {
fontSize: 18,
fontFamily: "Source Han Sans CN",
fontWeight: "bold",
color: "#333333",
},
},
radar: {
// shape: 'circle',
splitNumber: 4, // 雷达图圈数设置
center:[220,180],
name: {
show: true,
fontSize: 18,
fontFamily: "Source Han Sans CN",
fontWeight: "bold",
color: "#333333",
// padding: [3, 5],
},
axisLine: {
show: false, //不要射线
},
splitLine: {
show: true,
lineStyle: {
type: "dashed"
}
},
splitArea: {
show: true
},
indicator: [
{
name: "软件", max: 100},
{
name: "业务", max: 100 },
{
name: "文化", max: 100 },
{
name: "爱好", max: 100 },
{
name: "技能", max: 100 },
// { name: "市场", max: 25000 },
],
},
series: [
{
type: "radar",
// areaStyle: {normal: {}},
symbol: "circle", // 焦点的样式，还可以取值'rect','angle'等
symbolSize: 0, // 焦点的大小
data: [
{
value: this.selfRating,
name: "自我评分",
itemStyle: {
normal: {
color: "rgba(252, 154, 14, 1)",
lineStyle: {
color: "rgba(252, 154, 14, 1)",
},
},
},
},
{
value: this.seniorRating,
name: "师兄评分",
itemStyle: {
normal: {
color: "rgba(46, 90, 251, 1)",
lineStyle: {
color: "rgba(46, 90, 251, 1)",
},
},
},
},
],
},
],
};
radar.setOption(option);
},
methods: {
},
computed: {
},
};
</script>
<style scoped>
#radar_container {
width: 560px;
height: 328px;
/* FIXME:ZUJIAN WEI ZHI */
/* margin: 20px 0 0 20px; */
background: #ffffff;
box-shadow: 3px 8px 17px 1px rgba(46, 90, 251, 0.2);
border-radius: 10px;
}
</style>