echart校园智能查询系统: echart校园智能查询系统，Echarts 总览、校园路灯（柱状、环形饼图）、电脑（散点图、仪表盘）、空调采集频率统计（关系图）、校园单相电表（折线图）、校园三相电表（堆积面积图）、校园照明灯各区统计（雷达图）、中国地图

# 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.	效果展示
 ![输入图片说明](https://images.gitee.com/uploads/images/2021/1026/105804_639dc34f_9243479.png "login.png")
二、 	主页面展示
1.	Container 布局容器  
关键代码：  
```
<el-container>
  <el-aside width="200px">Aside</el-aside>
  <el-container>
    <el-header>Header</el-header>
    <el-main>Main</el-main>
  </el-container>
</el-container>
 ```
2.	头像展示
```
<el-avatar :src="imgSrc" ></el-avatar>
```
3.	退出登录

三、 	Echarts 总览
1.	Flex 布局  
使用flex布局，使行不足放下div时自动换行
2.	外部js 引用
3.	侧边导航栏收起与展开
4.	页面显示  
导航栏展开：
![输入图片说明](https://images.gitee.com/uploads/images/2021/1026/172228_9f9d4004_9243479.png "login.png")
导航栏收起：
![输入图片说明](https://images.gitee.com/uploads/images/2021/1026/172330_48d1b6c8_9243479.png "login.png")

四、 	校园路灯（柱状、环形饼图）
1.	el-table 应用及数据滚动
2.	获取JSON文件数据
3.	统计各区开关状态个数及各区路灯个数
4.	柱状图使用  
状态包括开、关、未知，地区包括东区、西区、北区，还对各个地区状态显示最大、最小值，设置柱状图柱状宽度（barWidth : 30）、并让图形自适应屏幕显示、数值显示   
5.	环形饼图使用  
统计各区路灯个数，并显示占比及数值
6.	页面显示
![输入图片说明](https://images.gitee.com/uploads/images/2021/1026/110212_bb6b5c7c_9243479.png "login.png")

五、 	知信楼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.	页面展示
![输入图片说明](https://images.gitee.com/uploads/images/2021/1026/110518_8387474e_9243479.png "login.png")

六、 	北区创新楼8楼空调采集频率统计（关系图）
1.	全局导入echarts及使用
2.	数据获取及使用
3.	页面展示
![输入图片说明](https://images.gitee.com/uploads/images/2021/1026/110637_f8537dbe_9243479.png "login.png")

七、 	校园单相电表（折线图）
1.	标记最大值、最小值  
对电压、电流进行展示，并显示最高电压及最低电流
2.	线条控制（平滑线条）
```
series: [ { ...... smooth: true } ]
```
3.	toolBox使用  
区域放大与恢复、转换柱形图与折线图、数据视图、保存图片
4.	页面展示
![输入图片说明](https://images.gitee.com/uploads/images/2021/1026/110814_b94f9402_9243479.png "login.png")

八、 	校园三相电表（堆积面积图）
1.	区域面积颜色
```
color: ['#8fffd6', '#007cb6', '#ffb9ac']
```
2.	对年度三相电表各个月功率统计
![输入图片说明](https://images.gitee.com/uploads/images/2021/1026/110933_ca34ec58_9243479.png "login.png")

九、 	校园照明灯各区统计（雷达图）
1.	显示数值label
2.	区域面积颜色设置
3.	绘制类型（多边形）
4.	对校园照明灯各区照明每周所耗功率统计展示
![输入图片说明](https://images.gitee.com/uploads/images/2021/1026/111111_b3cf607a_9243479.png "login.png")

十、 	中国地图展示
1.	JSON文件导入
2.	往 echarts 全局对象注册地图的 json 数据
```
this.$echarts.registerMap('chinaMap', this.chinaJson)
```
3.	地图缩放拖动及名称显示
4.	初始缩放比例及地图中心点
5.	不同城市不同颜色及散点图使用
![输入图片说明](https://images.gitee.com/uploads/images/2021/1026/111234_b8a3806d_9243479.png "login.png")

LindsayQi/echart校园智能查询系统

简介

发行版

贡献者

近期动态

LindsayQi/echart校园智能查询系统 .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

LindsayQi/echart校园智能查询系统