vue echarts init undefined问题

echats在图表展示方面效果很好，vue中当然也可以使用，这时候我们就集成vue方法，但是只下载echarts还不行，这样在eccharts init的时候会报错，提示undefined，如何解决这种问题呢，需要安装echarts和v-charts两个模块才行
vue使用echarts不能使用最新的，不然可能图片无法显示或者其它未知报错，如果安装最近的echarts需要降级安装，我安装的是
npm i echarts@4.8.0 -S
安装v-charts 直接安装即可
npm i v-charts -S
安装完成之后可以在vue项目文件package.json中看到

  "dependencies": {
    "echarts": "^4.8.0",
    "element-ui": "^2.15.10",
    "v-charts": "^1.19.0",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },

可以看到已经安装好，版本和我们想要一致
下面贴上HelloWorld.vue文件内容

<template>
  <div class="hello">
   <el-row>
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
</el-row>
<div id="myChart" :style="{width: '100%', height: '1000px'}" >
</div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
    
    }
  },
  mounted(){
    this.drawLine()
  },
  methods: {
    drawLine() {
      console.log("helloworld",this.$echarts)
      this.$echarts.init(document.getElementById('myChart')).setOption({
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [120, 200, 150, 80, 70, 110, 130],
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(220, 220, 220, 0.8)'
                    }
                }]
            })
        }
            
  },
}
</script>

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

</style>

main.js文件

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
import  * as  echarts from 'echarts'
import Vcharts from 'v-charts'
Vue.prototype.$echarts=echarts
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

router目录下的index.js文件

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

app.vue文件

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

接下来我们直接运行看效果

实现想要的效果