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.

文档详细介绍请前往 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 布局容器
   关键代码：

<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. 页面显示
   导航栏展开： 导航栏收起：

四、 校园路灯（柱状、环形饼图）

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. 不同城市不同颜色及散点图使用