第一步:下载echarts
npm install echarts --save
第二步:在项目中main.js引入
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
第三步:在组件中使用
在template标签中写
<div id="myChart" :style="{ '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个月。默认显示一周。
由于后台直接返回我一个数组
代码如下