<template>

     <div class="tubiao">

       <div id="main" style="width: 600px;height:400px;"></div>

     </div>

 </template>

 <script>

   import echarts from 'echarts';

     export default {

         name: 'tubiao',

         data () {

             return {

               chart: null

             }

         },

         methods:{

           drawPie (id) {

             this.chart = echarts.init(document.getElementById('main'));

             this.chart.setOption({

               title: {

                 text: 'ECharts 入门示例'

               },

               tooltip: {},

               legend: {

                 data:['销量']

               },

               xAxis: {

                 data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

               },

               yAxis: {},

               series: [{

                 name: '销量',

                 type: 'bar',

                 data: [5, 20, 36, 10, 10, 20]

               }]

             })

           }

         },

         mounted(){

           this.$nextTick(function() {

             this.drawPie('main');

             var that = this;

             var resizeTimer = null;

             window.onresize = function() {

               if (resizeTimer) clearTimeout(resizeTimer);

               resizeTimer = setTimeout(function() {

                 that.drawPie('main');

               }, 100);

             }

           });

         }

     }

 </script>

 <!-- Add "scoped" attribute to limit CSS to this component only -->

 <style scoped>

 </style>