# Echarts-VUE

**Repository Path**: HSJXYH/Echarts-Vue

## Basic Information

- **Project Name**: Echarts-VUE
- **Description**: Vue+Node+后台数据可视化大屏显示
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 5
- **Forks**: 3
- **Created**: 2021-10-27
- **Last Updated**: 2025-06-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, koa2, Echarts, WebSocket, JSON

## README

# Echarts-VUE

#### 详细介绍

1.利用node中的koa2框架先将后端服务器搭建起来，封装koa中间件（middleware）中koa_response_data.js（读取文件配置）,koa_response_duration（设置响应头响应时间参数）,koa_response_header（请求头信息，允许跨域配置）。
2.封装Ajax请求axios(vue中最好用的)将json数据取出，对页面数据进行渲染，封装websocket进行数据实时更新。
3.前端是vue框架实现页面echarts图表的渲染并定制，分别为柱状图横向（商家销售统计），饼图（库存和销量分析），饼图（热销商品的占比），折线图（地区销量趋势），中国地图（商家分布），柱状图竖向（地区销售排行）。
4.VueX主要配置的是主题（图表共有）。
5.vueRouter配置路由。
6.uitls文件封装了地图数据（全国，省），websocket连接服务器响应数据，主题背景的两种属性。
7.view前期视图为了调用每个图表，方便实现和配置。
8.devServer配置代理简单实现跨域配置，如果运行成功并自动打开浏览器。

#### 软件架构
Vue框架（全家桶）+Node.js+Koa2+WebSocket+Echarts+json电商大数据可视化大屏显示。

#### 后台服务器安装教程

1.  进入Echarts-server文件（后台服务器）
2.  打开终端或者cmd安装依赖npm run install 或 npm run i
3.  启动服务node app.js 或者（nodemon app.js前提是安装了nodemon依赖）
#### 前端页面安装教程

1.  进入echarts-show文件（前端页面）
2.  打开终端或者cmd安装依赖npm run install 或 npm run i
3.  启动服务npm run serve或者 cnpm run serve（前提是安装设置了淘宝镜像）
#### 页面预览

1.  全屏页面
![输入图片说明](showimg/20211202195715.png)
2.  单个图表放大视图跟随窗口按比例变化
![输入图片说明](showimg/20211202195906.png)
![输入图片说明](showimg/20211202195942.png)
![输入图片说明](showimg/20211202200019.png)
![输入图片说明](showimg/20211202200032.png)
![输入图片说明](showimg/20211202200047.png)
![输入图片说明](showimg/20211202200100.png)
![输入图片说明](showimg/20211202200155.png)
3.   主题切换
![输入图片说明](showimg/20211202200311.png)

#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request


#### 特技

1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)