利用Vue+Echarts完成可视化任务

文章目录

• 任务一：用柱状图展示消费额最高的省份
• • （一）提出任务
  • （二）准备工作
  • • 1、利用postman访问接口数据
    • 2、安装node.js
    • 3、输入更换镜像源为淘宝源
    • 4、清除npm缓存
    • 5、安装vue脚手架
    • 6、创建vue项目
    • 7、启动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
  

6、创建vue项目

• 执行命令：vue create app，选择手动选择功能（Manually select features）
  
• 选择项目需要的模块：Babel、Router、Vuex、CSS Pre-processor、Linter / Formatter
  
• 选择vue版本3.x
  
• 默认选择只报错和提醒
  
• 选择保存校验格式
  
• 选择保存位置为默认的独立文件
  
• 不保存当前配置以备将来使用，Save this as a preset for future projects? (y/N)N，然后开始创建项目
  

7、启动vue项目

cd app
npm run serve

• 执行上述两个命令
  
• 服务启动成功
  
• 访问项目首页