vue项目中引入echarts及所需注意的小问题

1.npm导入

npm install echarts -S

2.在main.js入口文件引入

// echarts
import * as echarts from 'echarts'  
Vue.prototype.$echarts = echarts

你要只写echarts是访问不到，必须* as echarts，本人在之前遇到过这个问题

3.定义标签

<div id="myChart" style="width:100%;height:300px"></div>

4.基于准备好的dom，初始化echarts实例

//一定要在mounted面调用，因为mounted是dom渲染完毕后调用
mounted() {
  this.statistical1()
 },
 methods: {
    statistical1(){
		const myChart = this.$echarts.init(document.getElementById('myChart'))
	      // 绘制图表
	      myChart.setOption({
	        title: { text: '在Vue中使用echarts' },
	        tooltip: {},
	        xAxis: {
	          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
	        },
	        yAxis: {},
	        series: [{
	          name: '销量',
	          type: 'bar',
	          data: [5, 20, 36, 10, 10, 20]
	        }]
	      })
	 }
  },