HTML5新特性 day_07(8.15) ECharts、Vue项目的首屏优化、Google浏览器中性能检测工具的使用

一、ECharts

ECharts是一款非常优秀的基于JS的图形图表库。

绘制Echarts图表的基本步骤

1. 先获取需要绘制的数据集。

2. 判断该数据集适合用什么图表显示。

3. 去echarts官方文档中寻找，看一看哪一个例子比较适合当前需求。

4. 把它复制粘贴到项目中显示出来。

5. 整理所需要的参数，修改图表：标题、图例、提示等基本信息，最重要的修改数据。

6. 微调。

案例：实现北京二手房3组数据的网页图表可视化。

如何在vue项目中引入echarts

1. 在脚手架项目根目录下安装echarts。

   npm install echarts --save

2. 在组件内部使用import引入echarts，就可以直接使用。

   import * as echarts from 'echarts';
   ​
   // 基于准备好的dom，初始化echarts实例
   var myChart = echarts.init(document.getElementById('main'));
   let option = {...}
   myChart.setOption(option)

二、Vue项目的首屏优化

当Vue项目写好之后，需要进行打包，上线。执行npm run build命令后，将会声明dist目录，部署完成后即可提供静态页面的访问。

当访问项目首页时，需要加载完整的Vue环境，如果需要下载的文件太大，就会导致首页白屏，很长时间浏览器才会显示响应页面。主要体现在app.js / Chunk-vecdors.js两个文件。如果希望首屏快速加载则建议：

1. 路由设置尽量懒加载。

2. 能不在main.js中引入的第三方模块，就不再main.js中引入。随用随引入。例如：elementUI/amap/echarts/socket.io等

三、Google浏览器中性能检测工具的使用

network面板

network中可以检测网页中每一个请求所花的时间，以及资源大小。

performance面板

监控某一个时间段浏览器的状态：网络状态、显示帧状态。

Memory面板

针对当前页面所使用的内存情况打个快照，监控内存状态。