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树结构

你可能感兴趣的:(echarts的学习与实战大数据首页)