vue中引入echarts，柱形图没有显示数据

Question

父组件

<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:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'],
            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:'联盟广告'},
              {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 : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'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是可以打印出来的 但是页面上没有展示数据 应该时option里面的series的问题 但是又不知道为什么 因为我把series里面的数据换成echarts api文档的就可以展示的

Answer 1

柱形图 series里面的数据 属性必须是data 坑 绝对的坑 之前踩过 好沮丧

Answer 2

  series : this.opinionData
  // this指向有问题

{
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    legend: {
        data:this.opinion
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            data : ['周一','周二','周三','周四','周五','周六','周日']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : null
    }
    配置文件在子组件data中声明   
    修改的时候
    this.xxx.series=你要赋值的数据