1.在vue2.0中使用echarts需要通过npm进行安装
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 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图
在mounted生命周期的时候运行此方法
