Problem Description:
The child component in vue is the echarts chart. The parent component uses props to pass the value to the child component. The value is passed, but echarts does not render.
The problem phenomenon goes deeper:
Data is not driven to try
Solution:
Use v-if to make a rendering judgment
On the code:
Parent component
<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>
Subassembly:
<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>