参考：Echarts官网、Vue项目中使用Echarts展示图表数据、Vue 爬坑之路（八）—— 使用 Echarts 创建图表
1. 安装echarts依赖
cnpm install echarts --save-dev
2. 引入echarts依赖并创建图表
由于echarts不能通过Vue.use()进行全局引用，所以可以：在对应vue页面直接引入；或者将echarts存到原型中，然后在vue页面通过 this.$echarts 访问使用。
(1) vue页面直接引入并创建图表
- vue页面直接引入 :
import echarts from 'echarts' - 创建图表：直接通过
echarts访问使用
<template>
<div>
<!-- 折线图 -->
<div id="chartmainline" style="width:600px; height:400px;"></div>
<!-- 柱状图 -->
<div id="chartmainbar" style="width:600px; height:400px;"></div>
</div>
</template>
export default({
data(){
return{
optionline:{
title:{
text:'总稼动率趋势'
},
color: ['#00a9e2'],
tooltip:{},
legend:{
data:['日期']
},
xAxis:{
data:['05-16', '05-17', '05-18', '05-19', '05-20', '05-21', '05-22']
},
yAxis:{
},
series:[{
name:'稼动率',
type:'line', //设置图表主题
data:[0.3, 0.5, 0.47, 0.65, 0.2, 0.4, 0.78]
}]
},
optionbar:{
title:{
text:'机器耗能成本'
},
color: ['#00a9e2'],
tooltip:{},
legend:{
data:['班组']
},
xAxis:{
data:['班组1', '班组2', '班组3', '班组4', '班组5', '班组6', '班组7']
},
yAxis:{
},
series:[{
name:'成本',
type:'bar', //设置图表主题
data:[500, 200, 360, 100, 300, 560, 700]
}]
}
}
},
mounted() {
this.drawLine()
},
methods: {
drawLine: function(){
//基于准本好的DOM，初始化echarts实例
let chartmainline = echarts.init(document.getElementById("chartmainline"));
let chartmainbar = echarts.init(document.getElementById("chartmainbar"));
//绘制图表
chartmainline.setOption(this.optionline);
chartmainbar.setOption(this.optionbar);
}
}
})
(2) 全局引入并创建图表
- 将echarts存到原型中：在main.js中进行全局引入
import echarts from 'echarts'
Vue.prototype.$echarts = echarts //将echarts存到 Vue 原型中
- 创建图表：在vue页面通过
this.$echarts访问使用
<template>
<div>
<!-- 折线图 -->
<div id="chartmainline" style="width:600px; height:400px;"></div>
<!-- 柱状图 -->
<div id="chartmainbar" style="width:600px; height:400px;"></div>
</div>
export default({
data(){
return{
optionline:{
title:{
text:'总稼动率趋势'
},
color: ['#00a9e2'],
tooltip:{},
legend:{
data:['日期']
},
xAxis:{
data:['05-16', '05-17', '05-18', '05-19', '05-20', '05-21', '05-22']
},
yAxis:{
},
series:[{
name:'稼动率',
type:'line', //设置图表主题
data:[0.3, 0.5, 0.47, 0.65, 0.2, 0.4, 0.78]
}]
},
optionbar:{
title:{
text:'机器耗能成本'
},
color: ['#00a9e2'],
tooltip:{},
legend:{
data:['班组']
},
xAxis:{
data:['班组1', '班组2', '班组3', '班组4', '班组5', '班组6', '班组7']
},
yAxis:{
},
series:[{
name:'成本',
type:'bar', //设置图表主题
data:[500, 200, 360, 100, 300, 560, 700]
}]
}
}
},
mounted() {
this.drawLine()
},
methods: {
drawLine: function(){
//基于准本好的DOM，初始化echarts实例
let chartmainline = this.$echarts.init(document.getElementById("chartmainline"));
let chartmainbar = this.$echarts.init(document.getElementById("chartmainbar"));
//绘制图表
chartmainline.setOption(this.optionline);
chartmainbar.setOption(this.optionbar);
}
}
})
3. 效果展示
折线图.png
柱状图.png
