vue echarts 如果子组件的数据从父组件props拿到，子组件要画echarts图 该如何写？

Question

我想在子组件监听props，把画echarts图的方法写在watch里 但是会报echarts is not defined" 但是写在mounted里又没有数据 请教这块 尤其我接口数据是从父组件拿到 传给子组件 的 这样该如何画图 请教了
代码子组件

<template>
  <div class="clinical">
    <div class="ctitle"><slot></slot></div>
    <div class="cbox">
      <el-row>
        <el-col :span="12">
          <div id="tumorTypeResult" class="tumorTypeResult" :style="{width:'540px',height:'427px'}"></div>
        </el-col>
        <el-col :span="12">2</el-col>
      </el-row>
      <el-row>
        <el-col :span="12">3</el-col>
        <el-col :span="12">4</el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
const chartColors = ["#e69900","#3BAFDA","#2f4554","#00b19d","#25d8f6","#ed3c39","#868e96",'#c23531',  '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'];
export default {
  name:'Clinical',
  data(){
    return{
      tumorTypeResultLegend:[],
      tumorTypeResultData : [],
      tumorTypeResultCount:0
    }
  },
  props:{
    tumorTypeResult:Array
  },
  watch:{
    tumorTypeResult(){
      this.tumorTypeResult.forEach((item,key)=>{
        this.tumorTypeResultLegend.push(item.TUMOR_TYPE);
        let data = {};
        data.value = item.num;
        data.name = item.TUMOR_TYPE;
        this.tumorTypeResultData.push(data);
        this.tumorTypeResultCount += item.num;
      })
      this.drawTumorTypeResult();

    }
  },
  methods:{
    drawTumorTypeResult(){
      let myChart = this.$echarts.init(document.getElementById('tumorTypeResult'));

      myChart.setOption({
        title : {
          text: '肿瘤分布（标准）',
          subtext: '只统计临床且已出报告的订单',
          x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        toolbox : {
          show: true
        },
        legend: {
            type: 'scroll',
            bottom: 10,
            left: 'center',
            data: this.tumorTypeResultLegend,
          formatter: function (name){
            return echarts.format.truncateText(name, 120, '…');
          }
        },
        series : [
              {
                  name: '肿瘤',
                  type: 'pie',
                  selectedMode : true,
                  radius : '55%',
                  center: ['50%', '58%'],
                  label: {
                      normal: {
                        formatter: '{b}\n{d}% ',
                          position: 'outside'
                        },
                      roseType:"area"
                  },
                  labelLine: {
                      normal: {
                          show: true
                      }
                  },
                  data:this.tumorTypeResultData,
                  itemStyle: {
                      emphasis: {
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                  }
              }
          ],
          color:chartColors
      })




    }
  },
  mounted(){
    //console.log(this.tumorTypeResultLegend);
    //this.drawTumorTypeResult();
  }
}
</script>
<style lang="stylus">
.clinical
    .lc
      width 90px
      height 40px
      line-height 80px
    padding-top 100px
    padding-left 40px
    width 1280px
    min-height 160px
    float left
    .ctitle
      width 288px
      height 56px
      background url('../../../assets/dat/rs_5.png') no-repeat
      line-height 56px
      padding-left 30px
      font-size 18px
    .cbox
      width 94%
      margin-top 10px
      padding-bottom 20px
      min-height 100px
      border 1px solid #6AFCFE
      float left
    .tumorTypeResult
      background white
</style>

Answer 1

在this.$nextTick(()=> {}) 里初始化echarts呢？