文章目录
- 任务一:用柱状图展示消费额最高的省份
- (一)提出任务
- (二)准备工作
- 1、利用postman访问接口数据
- 2、安装node.js
- 3、输入更换镜像源为淘宝源
- 4、清除npm缓存
- 5、安装vue脚手架
任务一:用柱状图展示消费额最高的省份
(一)提出任务
- 编写Vue工程代码,根据接口,用柱状图展示2020年消费额最高的5个省份,同时将用于图表展示的数据结构在浏览器的console中进行打印输出,将图表可视化结果和浏览器console打印结果分别截图并粘贴至对应报告中。
(二)准备工作
1、利用postman访问接口数据
- 采用POST提交方式 -
http://192.168.23.89:8999/dataVisualization/selectOrderInfo
- 提交参数是JSON格式
{
"startTime": "2020-01-01 00:00:00",
"endTime": "2020-12-30 00:00:00"
}
- 通过设置startTime和endTime值,可以筛选出2020年的消费数据
- data是个json数组,里面的每一个json对象就是一条消费数据
{
"id": 78506,
"finalTotalAmount": 305062.00,
"outTradeNo": "756847726439369",
"provinceName": "北京",
"regionName": "华北",
"userName": "华馥"
}
2、安装node.js
- 执行命令:
sudo apt install nodejs
- 查看node.js版本
- 测试node运行环境
3、输入更换镜像源为淘宝源
- 查看npm版本,执行命令:
npm --version
- 执行命令:
npm config set registry https://registry.npm.taobao.org
4、清除npm缓存
- 执行命令:
npm cache clean --force
5、安装vue脚手架
- 执行命令:
sudo nmp install -g @vue/cli
- 检验vue是否安装成功,执行命令:
vue --version