vue中使用echarts（简单上手，最直接）

1.看了一些教程，感觉不是很清晰，主要新手第一次用报错，分享出来（ps，我也是新手）

<template>
  <div>
    <el-card>
      <!-- 2.为Echarts准备一个大小合适的Dom -->
      <div id="main" style="width: 600px;height:400px;"></div>
    </el-card>
  </div>
</template>
<script>
// 1.导入echarts
import * as echarts from 'echarts'
export default {
  data () {
    return {
    }
  },
  // 此时页面元素已经渲染完毕
  mounted () {
    // 3.基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'))
    // 4.指定图表的配置项和数据
    var option = {
      title: {
        text: '第一个 ECharts 实例'
      },
      tooltip: {},
      legend: {
        data: ['销量']
      },
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }]
    }
    // 5.使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
  },
  created () {},
  methods: {}
}
</script>
<style scoped>
</style>

2.引用网上教程可能会报错 "export 'default' (imported as 'echarts') was not found in 'echarts'

主要问题出现在代码中第一步的位置导入echarts的问题

参考教程 改为我上面

import * as echarts from 'echarts';
// 或
const echarts = require('echarts');

还有一个问题：为什么把页面上的    

// 3.基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'))

放在mounted()里面

 

初始化图表必须在页面上的dom元素被初始化完毕之后

在生命周期函数中有一个函数调用是在Dom完成之后执行，mounted()

所以可以初始化图表了