vue 引入echarts（bug：1.不显示；2.报错 “ TypeError: Cannot read property ‘getAttribute‘ of null ”）

1. 首先要安装好echarts

npm install echarts --save

2. 在main.js引入echarts

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

3. 创建好要挂载的节点
   要注意的是，该节点必须设置好宽高，否则即使正常引入也会不显示

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

4. 在组件中初始化echarts，可以先写在methods里，然后在mouted生命周期钩子里使用（不能在 created中使用，因为此时节点还未渲染；）
   但是图标需要的数据要先在created中请求过来，否则图表渲染时没有数据也是不能显示的

mounted () {
    this.initEcharts()
},
methods: {
	initEcharts(){
		var echarts = require('echarts');
		
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));
		// 绘制图表
		myChart.setOption({
		   title: {
		        text: 'ECharts 入门示例'
		    },
		    tooltip: {},
		    xAxis: {
		        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
		    },
		    yAxis: {},
		    series: [{
	       	 	name: '销量',
	       		type: 'bar',
	       		data: [5, 20, 36, 10, 10, 20]
		    }]
		})
		 myChart.setOption(option)
	}
}

这样就可以根据需求选择补贴模板使用echarts啦！

5. 更换图表

比如下面这个图表，复制左边所有代码：
CTRL+C

粘贴
CTRL+V

methods: {
        initEcharts () {
            const myChart = this.$echarts.init(document.getElementById('summary'))
            
            /** 把复制的代码块粘贴在这个部分 */
            
            myChart.setOption(option)
        }
    },
    mounted () {
        this.initEcharts()
    }

这样就okk啦~