# echart校园智能查询系统
**Repository Path**: zhangchi0119/campus
## Basic Information
- **Project Name**: echart校园智能查询系统
- **Description**: echart校园智能查询系统，Echarts 总览、校园路灯（柱状、环形饼图）、电脑（散点图、仪表盘）、空调采集频率统计（关系图）、校园单相电表（折线图）、 校园三相电表（堆积面积图）、校园照明灯各区统计（雷达图）、中国地图
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 5
- **Created**: 2024-08-13
- **Last Updated**: 2024-08-13
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# campus
## Project setup
```
npm install
npm i element-ui -S
npm install echarts --save
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
### 文档详细介绍请前往 campus.docx 查看
一、 登录页面
1. 外部 CSS 使用
2. Element-ui 使用
(1) 下载并在 main.js 导入 Element-ui
```
npm i element-ui -S
```
(2) El-form 表单应用
3. Router路由跳转
4. 效果展示
二、 主页面展示
1. Container 布局容器
关键代码：
```
Aside
Header
Main
```
2. 头像展示
```
```
3. 退出登录
三、 Echarts 总览
1. Flex 布局
使用flex布局，使行不足放下div时自动换行
2. 外部js 引用
3. 侧边导航栏收起与展开
4. 页面显示
导航栏展开：
导航栏收起：
四、 校园路灯（柱状、环形饼图）
1. el-table 应用及数据滚动
2. 获取JSON文件数据
3. 统计各区开关状态个数及各区路灯个数
4. 柱状图使用
状态包括开、关、未知，地区包括东区、西区、北区，还对各个地区状态显示最大、最小值，设置柱状图柱状宽度（barWidth : 30）、并让图形自适应屏幕显示、数值显示
5. 环形饼图使用
统计各区路灯个数，并显示占比及数值
6. 页面显示
五、 知信楼F214电脑（散点图、仪表盘）
1. 获取电脑数据列表并进行排序
```
computerData: require('../../../assets/json/computer.json')
this.computerData.sort((a,b) => a.duid - b.duid);
```
2. 主题应用
（1）导入主题JSON文件
```
import walden from '../../../assets/json/walden.json'
```
（2）注册主题
```
this.$echarts.registerTheme('walden',walden);
```
（3）主题使用
```
this.$echarts.init(document.getElementById('scatter'),'walden');
```
3. 各电脑电压、电流散点明细图及涟漪动画效果
4. 电脑个数统计仪表盘
5. 页面展示
六、 北区创新楼8楼空调采集频率统计（关系图）
1. 全局导入echarts及使用
2. 数据获取及使用
3. 页面展示
七、 校园单相电表（折线图）
1. 标记最大值、最小值
对电压、电流进行展示，并显示最高电压及最低电流
2. 线条控制（平滑线条）
```
series: [ { ...... smooth: true } ]
```
3. toolBox使用
区域放大与恢复、转换柱形图与折线图、数据视图、保存图片
4. 页面展示
八、 校园三相电表（堆积面积图）
1. 区域面积颜色
```
color: ['#8fffd6', '#007cb6', '#ffb9ac']
```
2. 对年度三相电表各个月功率统计
九、 校园照明灯各区统计（雷达图）
1. 显示数值label
2. 区域面积颜色设置
3. 绘制类型（多边形）
4. 对校园照明灯各区照明每周所耗功率统计展示
十、 中国地图展示
1. JSON文件导入
2. 往 echarts 全局对象注册地图的 json 数据
```
this.$echarts.registerMap('chinaMap', this.chinaJson)
```
3. 地图缩放拖动及名称显示
4. 初始缩放比例及地图中心点
5. 不同城市不同颜色及散点图使用
