vue项目--后台管理系统（day11）

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第20天，点击查看活动详情

上一篇文章中我们引入了echarts图表，同时使用他完成了我们Main.vue组件里面的柱状图，饼状图以及折线图，但这些图表的数据还没有实现定义，接下来我们将使用mock.js来定义模拟数据，Mock.js的官方网址： mockjs.com/

1. 首先我们在项目的终端里面输入npm install mockjs ,等待安装成功，安装完成之后我们再在项目中检查一下是否安装成功了，点开我们的package.json文件，查看dependencies里面是否有mockjs,如下图所示：

2. 上述步骤都完成了之后我们在项目里面新建一个api文件夹，里面新建一个mockServe文件夹，里面再新建一个home.js，在这个文件里面我们将进行数据的模拟

• 首先我们先import引入一下mock, 输入以下代码：

import Mock from 'mockjs'

• 然后创建图表数据并且return一个code,若请求成功就返回个200，具体的数据模拟的代码如下图所示：

这是饼图的数据以及销量品牌名称的数据，同理来说，柱状图的数据 以及折线图的数据也类似，但是折线图的横轴有个时间线的数据要模拟，所以我们在折线图数据里面添加一个date:[],里面通过字符串的形式添加上每一个节点的时间，然后再去模拟tableData图表里面的销量数据，然后模拟数据完成之后我们需要在页面中获取数据，定义一个getData方法来获取，具体的代码如下图所示：

数据模拟完成之后我们的柱状图饼状图折线图也就可以顺利完成了。