vue 引入Echarts
(1)下载Echarts
WebStorm打开创建好的vue项目,打开cmd,进入到项目所在文件夹,输入命令下载Echarts:
npm install echarts -S
(2)全局引入Echarts
在/src/main.js中加入:
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
(3)创建一个图表
绘制柱状图:
<template>
<div id="histogramChart">
</div>
</template>
<script>
export default {
name:'Histogram',
data(){
return {}
},
mounted() {
//在mounted生命周期函数中实例化echarts对象
this.drawHistogarm();
},
methods:{
drawHistogarm(){
//初始化echarts实例
let histogram = this.$echarts.init(document.getElementById('histogramChart'))
let option = {
title: {
text: '柱状图示例',
left: 'center'
},
tooltip: {
trigger:'axis'
},
xAxis: {
type: 'category',
data: ["星期一","星期二","星期三","星期四","星期五","星期六","星期日"]
},
yAxis: {
type: 'value'
},
series: [{
name: '数量',
type: 'bar',
barWidth: '50%',//设置柱子的宽度
data: [204,106,190,230,100,170,201]
}]
};
histogram.setOption(option);
}
}
}
</script>
<style scoped>
#histogramChart {
width: 500px;
height: 500px;
}
</style>
页面效果如下:
参考链接:
https://www.jianshu.com/p/cf0a54374419
https://blog.csdn.net/guozhangqiang/article/details/82379306