Vue中父组件向子组件echarts传值问题

问题描述：

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>