1.安装echarts
npm install echarts -S
2.全局引入
首先在main.js中引入echarts,将其绑定到vue原型上:
-
// 引入Echarts
-
import * as echarts from 'echarts'
-
Vue.prototype.$echarts = echarts //挂载在vue中
3.在准备好的容器里创建<div>并赋高度和宽度和id
<div id="main" style="height: 290px; width: 550px;"></div>
4.在methods里创建一个函数
initCharts(){
// 基于准备好的dom,初始化echarts实例
var myChart = this.$echarts.init(document.getElementById("main"));
// 指定图表的配置项和数据
var option = {
title: {
text: '月销量'
},
// 提示框
tooltip: {},
// 图例
legend: {
data: ['销量']
},
// 表示x轴坐标
xAxis: {
data: ['oppo', 'vivo', 'iphone', '小米', '三星', '魅族']
},
// 表示y轴坐标
yAxis: {},
//
series: [
{
name: '销量',
type: 'bar',
data: [3500, 2200, 4500, 6500, 200, 3000]
}
]
};
myChart.setOption(option);
},
然后创建一个mounted()生命周期,在里面调用函数
mounted () {
this.initCharts()
}