第一步：下载echarts
npm install echarts --save
第二步：在项目中main.js引入
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
第三步：在组件中使用
在template标签中写
<div id="myChart" :style="{width: '300px', height: '300px'}"></div>
在script标签中
export default {
name: 'test',
data(){
return{
}
},
mounted(){
this.drawLine();
},
methods: {
drawLine(){
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('myChart'),'light')
// 绘制图表
myChart.setOption({
title: { text: '这里是表格的标题，自带加粗' },
tooltip: {},
// 图标中x轴的内容
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
// 图标中y轴的内容
yAxis: {},
// 数据
series: [
{ name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
});
}
}
}
注意：我们要在mounted生命周期函数中实例化echarts对象。因为我们要确保dom元素已经挂载到页面中
这是想要达到的要求
当点击年时图表的x轴显示5个年份。点击月时图表的x轴显示12个月。默认显示一周。
由于后台直接返回我一个数组
代码如下