echarts的学习与实战大数据首页

ふわり from pixiv

关于echarts项目用到挺多，柱状图，折线图，进度图，指针图和饼图
echarts的配置项比较多，用起来比较繁琐和复杂，所以边写边看文档是必需的（吐槽）
实战时而比较推荐的是在echarts社区找一个与需求差不多的实例，再去修改其中的配置项，这样效率是最快的

echarts最近被apache收购了，换了一个官网，我们可以在这查看配置项
ECharts Gallery 是重中之重，里面有众多开发者的贡献的实例，能大幅提高开发的效率（重点!!!）
补充：Makeapie最近被墙了，现在找一些备用的网站
DataInsight isqqw PPChart 快速获取区域json
不好说哪一天需求给个地狱级图表的需求，我们束手无策的时候可以逛逛社区，可能会找到社区大神贡献过的类似的实例

大数据首页

项目做的大概是这种大数据首页的效果，为了方便维护，封装了vue组件

Echarts

页面使用

思路是获取数据之后修改原有的配置项,然后在调用echarts的reLoadOption把心的配置项传进去更新

胡桃

大数据首页

1. 项目的分辨率控制，平时项目用的单位一般是px，而这种首页用的是rem或者vh，这里用的rem
2. 页面布局比较复杂，一般页面图片会比较多，纵横交错，一些echarts会展示在部分图片上面，因此页面会划分层数来堆叠，项目纵向分了底层（展示地图），顶层（css定位），横向进一步用了左中右，上下布局（上部分显示标题，下部分展示主体）
3. 项目的背景图片的大小问题，过大的图片可能会很占用网络，导致首屏加载速度变慢，这边的策略是将小图片通过webpack转成base64，减少网络请求次数，并且在webpack配置中做好切片，而大的图片经过压缩后放进cdn(如果是内网项目，直接当做静态资源不做cdn也无可厚非，局域网更注重稳定)
4. 项目的背景图片放置问题，图片放置用的background,而background-size都是用100%覆盖
   background: url('~@/assets/dashboard/left-panel02.png') no-repeat;
   background-size: 100% 100%;
5. 大数据首页不止是echarts的运用，css特效部分也有浓墨重彩的一笔，目前项目做的css特效有冒泡特效，光环特效，波纹特效，气球特效，动态光圈特效，浮动特效等等。

页面布局

骨架图

dom树结构