在vue中使用echarts.vue

<template>
 <div class="echarts">
       <div ref="main" id='main' :style="{width: '300px', height: '300px'}">
         <!-- echart实例将在这里展现 -->
       </div>
 </div>
</template>

<script>
var echarts = require('echarts');

// 基于准备好的dom，初始化echarts实例
export default {
 data(){
   return {
     option : {
         color: ['#3398DB'],
         tooltip : {
             trigger: 'axis',
             axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                 type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
             }
         },
         grid: {
             left: '3%',
             right: '4%',
             bottom: '3%',
             containLabel: true
         },
         xAxis : [
             {
                 type : 'category',
                 data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                 axisTick: {
                     alignWithLabel: true
                 }
             }
         ],
         yAxis : [
             {
                 type : 'value'
             }
         ],
         series : [
             {
                 name:'直接访问',
                 type:'bar',
                 barWidth: '60%',
                 data:[10, 52, 200, 334, 390, 330, 220]
             }
         ]
     }

   }
 },
 mounted(){
   console.log('mounted...')
   this.initChart()
 },
 methods: {
   initChart(){
     const myChart = echarts.init(document.getElementById('main'));
     myChart.setOption(option)
   }
 }

}
</script>