要在 Vue 2 项目中使用 mockjs，你可以按照以下步骤进行：

安装 mockjs

使用 npm 或 yarn 安装 mockjs:

npm install mockjs --save-dev

或

yarn add mockjs --dev

创建一个 mock 数据文件

在项目中创建一个文件src/mock/index.js，然后填充我们的数据

import Mock from 'mockjs'

// 接警占比
Mock.mock('/api/proportionOfRespondingPolice', 'get', () => {
  let data = Mock.mock({
    'items|2': [{
      'name|+1': ['电话联络量', '真警数量'],
      'y': '@integer(1, 100)',
    }]
  })
  return {
    status: 200,
    message: 'success',
    data: data.items,
  };
})

在项目的入口文件main.js内引入

 import './mock/index.js'  // 引入模拟API

这样，当你的应用程序启动时，mockjs 将会拦截相应的 API 请求并返回模拟数据。

请求mockjs

这里我们使用封装后的axios请求mockjs模拟数据

// 接警占比
export function proportionOfRespondingPolice(data) {
    return request({
        url: '/api/proportionOfRespondingPolice',
        method: 'get',
        data
    })
}

vue组件请求接口

async getData() {
  try {
    const res = await proportionOfRespondingPolice();
    this.list = res.data;
  } catch (err) {
    console.error(err);
  }
},

这样在vue2中使用mockjs模拟数据的基本流程就走完了。

项目应用

vue2 数据可视化大屏 消防大屏数据可视化展板