本文介绍: 本文主要介绍使用 CSS 实现动态水位球效果(纯 CSS3 样式)。其实在数据可视化应用中,水球图也是一种常见的数据展示形式。关于实现个性化水球,在相当长的一段时间并没有找到比较简洁的实现方式,因此在以往的可视化作品中,大多采用ECharts插件,当然还有其他更多的实现方式。如:CSS + jQuery实现、jQuery实现、Vue + CSS等、纯CSS实现等。
前言
最近接到了某项目首屏业务的开发,交互给了设计原型图后,大概浏览了一下首屏界面。突然脑海里浮现出一个大大的疑问,竟然出现了带有水位比例浮动球的效果。
此刻,进修者结合当前项目用到的技术和技术版本,已确认这个水位球效果组件中是没有的。那么就要考虑其他途径来完成该业务需求了!
进修者在实现该水球图的时候,做了很多功课。在网上搜遍了相关的关键词,发现很多都是大同小异。进修者根据文章内容操作下来,发现基本没有能正常实现功能的,还需要调试。估计网上很多内容是从其他网站拷贝过来,创作者随便改了改就发布了。调试好后,发现很多还不符合业务,不过经过大量的尝试,终于确定了一套符合自己业务的水球图。
正文
在进入今天的内容分享之前,读者伙伴会不会有疑问,进修者是做前端还是后端的?这里告诉大家一下,进修者不是什么大牛,也不在一线大厂,就是一个普普通通的开发人员。和你们很多人差不多,就是一个全栈开发人员(全栈意味着全干,无论什么技术,什么工作,只要需要都能干;基本用到的技术都会但不很精通,项目中的疑难杂症也都能解决)。
需求分析
需求调研
水球图设计
绘制水球容器
绘制水
绘制水纹
定制水位
水球图使用
效果展示
小结
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。