vue中引用echarts，自适应

子组件：

<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)
       
            })
            let _this=this;
   window.addEventListener("resize",function (event) {
         _this.charts.resize();
    })
        },
        methods:{
            drawPie(id){
                this.charts = echarts.init(document.getElementById(id))
               for(var i = 0;i<this.opinionData.length;i++){//修改数据  每一条添加一个type:'bar'
                this.opinionData[i] = {
                type :'bar',
                data:this.opinionData[i].data,
                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>
<style scoped>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

</style>

 

父组件：

<template>
  <!--为echarts准备一个具备大小的容器dom-->
<div >
  <bar-graph :opinionData="opinionBarData" :opinion="opinion"  style="width: 100%;height: 400px;" id="mainBar"></bar-graph>
</div>
 
</template>
<script>
  import echarts from 'echarts'
  import BarGraph from '../../components/bargraph.vue'
    export default {
        name: '',
        data () {
            return {
                opinion:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'],
                opinionBarData:[
                  {data:[320, 332, 301, 334, 390, 330, 320], name:'直接访问'},
                  {data:[120, 132, 101, 134, 90, 230, 210], name:'邮件营销'},
                  {data:[220, 182, 191, 234, 290, 330, 310], name:'联盟广告'},
                  {data:[150, 232, 201, 154, 190, 330, 410], name:'视频广告'},
                  {data:[862, 1018, 964, 1026, 1679, 1600, 1570], name:'搜索引擎'}
                ]
            }
        },
        components:{
        BarGraph
        }
    }

</script>

 

注意：自适应  需要给echarts色值宽100% 坑

去掉x,y轴的刻度线  

 xAxis : [
          {
             type : 'category',
             data :this.xDate,
             axisTick: {
                     show: false
                     }
                }
           ],

设置legend

 legend: {
          data:this.opinion,
          orient: 'vertical',
          itemWidth:10,
          itemHeight:10,
          right: 10,
          top: 20,
          bottom: 20
         },

git地址https://github.com/yyk316507/vue-demo