1.在vue2.0中使用echarts需要通過npm進(jìn)行安裝
npm install echarts --save
2.在需要使用echarts庫的.vue頁面引用echarts
<template>
<div>
<div id="main" style="width: 600px; height: 400px"></div>
</div>
</template>
<script>
var echarts = require('echarts');
export default{
data(){
return {
option:{
title:{
text:'echarts'
},
toolbox:{
show:true,
feature:{
saveAsImage:{
show:true
}
}
},
legend:{
data:['銷量']
},
xAxis:{
data:["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis:{},
series:[{
name:'銷量',
type:'bar',
data:[5, 20, 36, 10, 10, 20]
} ]
}
}
},
methods:{
set(){
let myChart = echarts.init(document.getElementById('main'));
myChart.clear();//如果圖表有修改需求建議加上此方法先清后畫
myChart.setOption(this.option);
}
},
mounted(){
this.set();
}
}
</script>
<style scoped>
</style>
上面通過var echarts = require('echarts');引入站削，在methods中就可以通過 echarts.init 方法初始化一個(gè) echarts 實(shí)例并通過 setOption 方法生成一個(gè)簡單的柱狀圖
在mounted生命周期的時(shí)候運(yùn)行此方法
