vue2中使用echarts，无法渲染出来页面

vue2中使用echarts，无法渲染出来页面

![img](http

你没有调用draw这个方法啊 在mounted里面调用一下就好了

• 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/1091529
• 这篇博客你也可以参考下：vue2中使用echarts
• 除此之外, 这篇博客: [配置]Vue项目配置ECharts的两种方法中的 方法一，注册echarts到vue的原型对象中，指定某个div作为echarts的画布： 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• 1，npm安装

  npm install echarts --save

  2，main.js增加设置

  // 引入echarts
  import echarts from 'echarts'
  // 将echarts注册到Vue组件的原型对象中去
  Vue.prototype.$echarts = echarts

  3，组件内使用

  （1）创建charts文件夹，文件夹内创建index.vue文件

  （2）在router文件夹的index.js文件内引入第一步建立的vue文件，并为其设置访问路径

  //引入图表组件
  import chart from '@/page/charts/index'

     {
     //为图表组件设置访问路径 
        path: '/chart',
        name: 'chart',
        component: chart
      } 

  （3）在charts文件夹，index.vue里面加入如下代码

  <template>
      <div class="line" id="line" :style="{width: '300px', height: '300px'}"></div>
  </template>
  
  <script>
  export default{
    mounted(){
        // 调用方法绘制图表
        this.drawLine();
    },
    methods:{
        drawLine(){
            // 为charts选定父容器并初始化charts画布
            let myChart = this.$echarts.init(document.getElementById('line'));
            // 为图表添加数据
            myChart.setOption({
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                    type: 'line'
                }]
            })                
        }
    },
  }
  </script>

  4，验证

  npm run dev 跑起来项目，在地址栏路径后加入/chart访问

  备注：此设置已验证OK，需要看源码的同学，可以克隆如下项目查看：
  demo的github地址：https://github.com/tom-wong666/model.git

• 您还可以看一下 jason老师的vue通用后台管理课程中的 echarts表格的基本使用小节, 巩固相关知识点