Vue中使用Echarts建立图表

随着大数据时代的来临，更多的数据要求可视化操作，图表的应用需求也不断提高。那么在Vue中该怎样使用图表呢？
一、安装Echarts

npm install echarts -S

二、在main.js引入，以便于全局使用

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

三、绘制图表

<template>
<div>
<header>这是销量展示页面</header>
<div id="volume"></div>
<foottab></foottab>
</div>
</template>
<script>
//引入底部导航组件
import foottab from '../components/footTab.vue'
export default {
methods:{
drawBar(){
//基于准备好的dom，初始化echarts实例
let volume = this.$echarts.init(document.getElementById('volume'));
//绘制图表
volume.setOption({
title:{text:'商品销量'},
tooltip:{},
legend: {
data:['销量']
},
xAxis: {
data: ['衣服','裤子','帽子','鞋子','领带']
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [40,30,20,60,10]
}]

})
}
},
mounted(){//模板或el对应的html渲染完成后再调用里面的方法
this.drawBar()
},
components: {
foottab
}
}
</script>
</script>
<style lang="scss" scoped>
#volume{
width:20em;
height:20em;
}
</style>

这样即完成了绘制，绘制效果如下：