在Vue-cli脚手架中项目中使用echarts

我的示例是在vue-cli搭建

安装echarts依赖

npm install echarts -S
或者使用淘宝的镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install echarts -S

创建图表

首先需要全局引入
在main.js中

// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

在Echarts.vue中（自己需要使用Echart的vue页面）

export default {
  name: 'hello',
  data () {
    return {
      msg: '每月销售额'
    }
  },
  mounted(){
    this.drawLine();
  },
  methods: {
    drawLine(){
    // 基于准备好的dom，初始化echarts实例
				let myChart = this.$echarts.init(document.getElementsByClassName('canves2')[0])
				// 绘制图表
				myChart.setOption({
					title: {
						text: '每月销售额'
					},
					tooltip: {},
					xAxis: {
						type: 'category',
						data: ["1月", "2月", "3月", "4月", "5月", '6月', '7月', '8月', '9月', '10月', '11月', '12月']
					},
					yAxis: {
						name: '销量',
						type: 'value',
						scale: true
					},
					series: [{
						type: 'line',
						data: this.saleList(查询出来的数据源)
					}]
				});
    
  }
}

注意：我们要在mounted生命周期函数中实例化echarts对象。因为我们要确保dom元素已经挂载到页面中

可以发现我们明明有很多个类型，这里只显示了三个，原因是我设置的宽度不够，只要把宽度设置大一点就可以了。