一:npm安装
npm install echarts --save
// 或者淘宝镜像安装
cnpm install echarts --save
二:在main.js中引入
import * as echarts from 'echarts'//5.0版本之后要有as echarts这个
Vue.use(echarts);
//或者Vue.prototype.$echarts = echarts
三:vue文件中使用
<!-- .vue文件中的html部分-->
<div id="myChart" style="width: 100%;height: 600px"></div>
// .vue文件中的js部分
export default {
data () {
return {}
},
mounted(){
this.drawLine();//渲染echarts表格
},
methods: {
drawLine(){
let xDataArr = [];// x轴数据(类目轴)
let yDataArr = [];// y轴数据(数据轴)
let echarts = require('echarts');
//初始化echarts实例
let mCharts = echarts.init(document.getElementById('myChart'));
// 绘制图表
myChart.setOption({
title: {
text: '统计数据'
},
xAxis: {
type: 'category',
data: xDataArr ,
},
yAxis: {
type: 'value',
},
series: [{
name: '销量',
type: 'bar',
data: yDataArr
}]
});
mCharts.setOption(option)
}
}
}