1.安装依赖
npm install echarts -S
//或者是用淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install echarts -S
2.创建图表
首先需要全局引入
在main.js中
//引入echarts
import echarts from 'echarts';
//如果报错改为
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts;
在这里插入代码片
3.Echarts.vue中
<template>
<!-- 创建echarts容器-->
<div id="myChart" :style="{width: '300px', height: '300px'}">
</div>
</template>
<script>
export default {
data() {
return {
msg: 'Welcome to Your Vue.js App',
data: [5, 20, 36, 10, 10, 20],
name: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
}
},
mounted() {
this.drawLine()
},
methods: {
drawLine() {
// 基于准备好的dom,初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('myChart'))
// 绘制图表
myChart.setOption({
title: {text: '在Vue中使用echarts'},
tooltip: {},
xAxis: {
data: this.name
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: this.data
}]
});
}
}
}
</script>
注意:我们要在mounted生命周期函数中实例化echarts对象。因为我们要确保dom元素已经挂载到页面中