父組件

<bar-graph :opinionData="opinionBarData" :opinion="opinion" style="width: 600px;height: 400px;" id="mainBar"></bar-graph>
<script>
import echarts from 'echarts'
import BarGraph from '../../components/bargraph.vue'

export default {
    name: '',
    data () {
        return {
            opinion:['直接訪問','郵件營銷','聯(lián)盟廣告','視頻廣告','搜索引擎'],
            opinionBarData:[
              {value:[320, 332, 301, 334, 390, 330, 320], name:'直接訪問'},
              {value:[120, 132, 101, 134, 90, 230, 210], name:'郵件營銷'},
              {value:[220, 182, 191, 234, 290, 330, 310], name:'聯(lián)盟廣告'},
              {value:[150, 232, 201, 154, 190, 330, 410], name:'視頻廣告'},
              {value:[862, 1018, 964, 1026, 1679, 1600, 1570], name:'搜索引擎'}
            ]
        }
    },
    components:{
        BarGraph
    }
}

子組件
<template>

  <div :id="id"></div>

</template>
<script>
import echarts from 'echarts'

export default {
    data () {
        return {
            charts: ''
        }
    },
    props:["id","opinion","opinionData"],
    mounted(){
        this.$nextTick(function() {
            this.drawPie(this.id)
        })
    },
    methods:{
        drawPie(id){
           this.charts = echarts.init(document.getElementById(id))
           for(var i = 0;i<this.opinionData.length;i++){
                   this.opinionData[i] = {
                                   type :'bar',
                                   value:this.opinionData[i].value,
                                   name:this.opinionData[i].name
                               }
           }
           this.charts.setOption({
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {            // 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效
                        type : 'shadow'        // 默認(rèn)為直線，可選為：'line' | 'shadow'
                    }
                },
                legend: {
                    data:this.opinion
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : ['周一','周二','周三','周四','周五','周六','周日']
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : this.opinionData
            })
        }
    }
    
}

</script>

這個this.opinionData是可以打印出來的 但是頁面上沒有展示數(shù)據(jù) 應(yīng)該時option里面的series的問題 但是又不知道為什么 因為我把series里面的數(shù)據(jù)換成echarts api文檔的就可以展示的