vue 趋势图组件动态渲染问题

[牛Kǎi牛牛牛�]

写了一个趋势图组件但是在页面上写该标签渲染不出来了 大佬帮我看看是怎么回事吗

这是在home页面上的标签


这是趋势图文件代码

<template>
  <!--为echarts准备一个具备大小的容器dom-->
  <div id="main" style="width: 600px;height: 400px;"></div>
</template>
<script>
  import echarts from 'echarts'
  import { defineComponent} from '@vue/composition-api'
  export default defineComponent({
    name: '',
    props:{
      legendData: Array,
      firstList: Array,
      firstColor: String,
      secondColor: String,
      secondList: Array,
    },
    data() {
      return {
        charts: '',
        /*	opinion: ["1", "3", "3", "4", "5"],*/
        opinionData: ["3", "2", "4", "4", "5"],
        Datas: ["2", "2", "4", "5", "4"]
      }
    },
    methods: {
      drawLine(id) {
        this.charts = echarts.init(document.getElementById(id))
        this.charts.setOption({
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: legendData
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },

          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ["1","2","3","4","5"]

          },
          yAxis: {
            type: 'value'
          },

          series: [
            {
            name: legendData[0],
            type: 'line',
            stack: '总量',
            data: this.opinionData
          },
            {
              name: legendData[1],
              type: 'line',
              stack: '总量',
              // itemStyle: {
              //   normal: {
              //     color: secondColor,
              //     lineStyle: {
              //       color: secondColor
              //     }
              //   }
              // },
              data: this.Datas
            }
          ]
        })
      }
    },
    //调用
    mounted() {
      this.$nextTick(function() {
        this.drawLine('main')
      })
    }
  })
</script>
<style scoped>
  * {
    margin: 0;
    padding: 0;
    list-style: none;
  }
</style>

[「已注销」]

这也看不出来什么，可以试试逐步排查法，顺藤摸瓜

[lllomh]

你首先看看 你 子组件内 是否有获取到这传过去的值先