利用Vue+Echarts完成可视化任务_vue 可视化流程-优快云博客

本文链接：https://blog.youkuaiyun.com/howard2005/article/details/134430065

任务一：用柱状图展示消费额最高的省份

（一）提出任务

编写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
选择Default ([Vue 3] babel, eslint)

7、安装axios模块

进入app目录，执行命令：npm install axios

8、启动vue项目

在app目录里，执行命令：npm run serve
服务启动成功
访问项目首页

（三）完成任务

1、利用VSCode打开项目

打开文件夹/opt/app

2、修改vue配置脚本

在vue.config.js文件里配置开发服务器

module.exports = {
  lintOnSave: false,  // 保存文件时不会触发ESlint检查
  devServer: { // 配置开发服务器
    proxy: {  // 配置代理，使开发服务器可以将请求代理到另一台服务器
      '/api' :{
        target: 'http://192.168.23.89:8999',  // 目标服务器地址（后台接口）
        ws: false, // 禁用WebSocket代理
        changeOrigin: true,  // 修改请求头的Origin字段，解决跨域引起的问题
        pathRewrite: {'^/api': '' } // 路径重写，将前端应用的路径映射到后端服务器不同的路径上
      }
    }
  }
}

3、给vue应用目录设置权限

执行命令：sudo chown -R bigdata:bigdata /opt/app

4、拷贝echarts脚本到assets目录

执行命令：cp /home/bigdata/echarts.min.js /opt/app/assets
在app项目里查看拷贝的文件

6、创建page1.vue页面组件

在components目录里，将HelloWorld.vue更名为page1.vue

7、编辑应用程序根组件

应用程序根组件 - app.vue

<!-- 模板 -->
<template>
  <div>
    <page1 />
  </div>
</template>

<!-- 脚本 -->
<script>
  import page1 from "./components/page1.vue";
  export default {
    name: 'App',
    compontents: {
      page1
    }
  }
</script>

<!-- 样式 -->
<style>
  * {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
  }
</style>