Nhiệm vụ 1: Tạo biểu đồ cột hiển thị 5 tỉnh có doanh thu cao nhất năm 2020

(1) Đặt vấn đề

• Viết ứng dụng Vue, kết nối API để hiển thị biểu đồ cột 5 tỉnh có doanh thu cao nhất năm 2020. Đồng thời in ra cấu trúc dữ liệu sử dụng trong biểu đồ tại console trình duyệt. Lưu lại hình ảnh kết quả biểu đồ và nội dung console để đưa vào báo cáo.

(2) Chuẩn bị

1. Kiểm tra API bằng Postman

• Gửi yêu cầu POST đến http://192.168.23.89:8999/dataVisualization/selectOrderInfo
• Dữ liệu gửi là JSON:

{
    "startTime": "2020-01-01 00:00:00",
    "endTime": "2020-12-30 00:00:00"
}

• Kết quả trả về là mảng JSON chứa các giao dịch:

{
	"id": 78506,
    "finalTotalAmount": 305062.00,
    "outTradeNo": "756847726439369",
    "provinceName": "Hà Nội",
    "regionName": "Hà Bắc",
    "userName": "Hoàng Phúc"
}

2. Cài đặt Node.js

• Thực thi lệnh: sudo apt install nodejs
• Kiểm tra phiên bản Node.js
• Kiểm tra môi trường Node.js

3. Cấu hình npm sử dụng nguồn Trung Quốc

• Kiểm tra phiên bản npm: npm --version
• Thực thi lệnh: npm config set registry https://registry.npm.taobao.org

4. Xóa bộ nhớ đệm npm

• Thực thi lệnh: npm cache clean --force

5. Cài đặt Vue CLI

• Thực thi lệnh: sudo nmp install -g @vue/cli
• Kiểm tra cài đặt thành công: vue --version

6. Tạo dự án Vue

• Thực thi lệnh: vue create app
• Chọn tùy chọn mặc định (Vue 3, Babel, ESLint)

7. Cài đặt thư viện axios

• Vào thư mục app, chạy lệnh: npm install axios

8. Khởi động dự án

• Trong thư mục app, chạy lệnh: npm run serve
• Kiểm tra dịch vụ hoạt động
• Truy cập trang chủ dự án

(3) Triển khai nhiệm vụ

1. Mở dự án bằng VSCode

• Mở thư mục /opt/app

2. Cấu hình server Vue

• Sửa file vue.config.js:

module.exports = {
  lintOnSave: false,
  devServer: {
    proxy: {
      '/api': {
        target: 'http://192.168.23.89:8999',
        changeOrigin: true,
        pathRewrite: {'^/api': ''}
      }
    }
  }
}

3. Cấp quyền cho thư mục dự án

• Thực thi lệnh: sudo chown -R bigdata:bigdata /opt/app

4. Sao chép ECharts vào thư mục assets

• Chạy lệnh: cp /home/bigdata/echarts.min.js /opt/app/assets
• Kiểm tra file đã sao chép

5. Tạo component page1.vue

• Đổi tên HelloWorld.vue thành page1.vue trong thư mục components

6. Cập nhật component chính

• Sửa file App.vue:

<template>
  <div>
    <page1 />
  </div>
</template>

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

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

7. Cấu hình component page1.vue

(1) Giao diện

• Hiển thị biểu đồ trực quan

(2) Định dạng

• Thiết lập kích thước vùng hiển thị biểu đồ

(3) Logic xử lý

• Sử dụng cú pháp <script setup> mới trong Vue 3
• Trích xuất dữ liệu năm 2020 từ console
• Thực thi lệnh: npm run serve
• Truy cập http://localhost:8080 kiểm tra console
• Xử lý mảng 6727 giao dịch
• Nhóm theo tỉnh, tính tổng doanh thu
• Sắp xếp theo thứ tự giảm dần
• Lấy 5 tỉnh đầu tiên
• Tạo dữ liệu biểu đồ (tên tỉnh - doanh thu)
• Vẽ biểu đồ cột

8. Gửi kết quả

• Dữ liệu sử dụng cho biểu đồ
• Hình ảnh biểu đồ cột hiển thị kết quả