- 使用了Vue作为构建框架，考虑PC端兼容性，布局采用float布局，设置了最小宽度以防出现样式错乱。
- 导航栏的子菜单采用递归组件完成，显示隐藏通过css的display完成。
- 主体左侧采用vue的动态组件实现，添加transition过渡效果。
- 页面的显示是由数据驱动，修改只需配置参数。
根据试题要求分为3个界面
- 日值的周趋势图 - 对应要求(2)
- 日流量图 - 对应要求(3)
- 日峰值流量分布图 - 对应要求(4)(5)
采用 Vue 作为页面构建框架
采用 echarts 作为数据展示绘图的框架
需求: 关注日值的周趋势，最好是有按运营商的对比展示
- 信息展示 - 展示所选运营商在选中日期后7天的周峰值
- 图表 - 一周日峰值流量的折线图
- 参数选择 - 选择日期，要关注的运营商
- 选中日期后生成该日期后的7天的日峰值数据，数据通过自定的random函数生成
- 通过表单控件可以增加/删除运营商 (运营商对比)
- 点击生成图表按钮可以刷新图表
- 左侧信息展示根据表单控件的输入动态变化
需求: 关注当日1分钟粒度的数据趋势，最好是有按运营商的对比展示
- 信息展示 - 展示所选运营商在选中日期的日峰值
- 图表 - 当日流量数据的折线图
- 参数选择 - 选择日期，要关注的运营商
- 由于数据量较大，采用请求json文件获取
- 图表下方由滑动条可调整时间粒度 (默认为1分钟)
- 通过表单控件可以增加/删除运营商 (运营商对比)
- 点击生成图表按钮可以刷新图表
- 左侧信息展示根据表单控件的输入动态变化
需求:
- 关注当日峰值流量在各省份的分布情况
- 关注当日峰值流量在各运营商的分布情况
- 信息展示 - 展示所选运营商在选中日期后7天的周峰值
- 图表 - 根据所选信息动态生成折线图
- 参数选择 - 选择日期，要关注的运营商
- 通过单选按钮选择该按运营商/按省份查看日峰值流量分布情况
- 按运营商即查看 当日峰值流量在各运营商的分布情况
- 按省份即查看 当日峰值流量在各省份的分布情况