CSS实现个性化水球图

在可视化应用中,水球图也是一种常见的数据展示形式,关于使用CSS实现个性化水球,在相当长的一段时间并没有找到比较简洁的实现方式,因此在以往的可视化作品中,大多采用echarts插件-Liquid Fill Chart来实现,本章节结合CSS相关属性及SVG知识点,将实现水球图的思路简单讲解一下,以便在实际的项目中能够拿来即用、提高开发效率,同时能够对一些不常见的CSS属性有一个回顾。在了解本章节之前,需要对Vue框架、CSS变量、SVG相关知识点有一定程度的了解,具体展示效果如下

实现水球图的难点之处在于如何模拟水面的波纹?从实现效果上看,水面波纹其实就是一个平滑的曲线,这个使用CSS属性很难绘制出来,因此需要采用其他的方式实现,这就涉及到贝塞尔曲线的相关概念,这里不做过多阐述,具体使用的时候可以不用关注这一点。 本案例采用了SVG中的路径属性,通过绘制贝塞尔曲线来模拟水面波纹效果

实现原理讲解:我们将水球图进行简单拆分,可以看成是由外边框+内部水球+中间文字组成,往更细的地方分,内部水球=两个水面波纹+下方颜色填充区域构成。如果需要实现不同形状的水球图,只需要结合css属性clip-path进行裁剪即可。基于以上思路,我们封装一个水球图组件,代码如下




组件中提供默认色值及属性配置,defaultConfig中的属性均可通过父子组件传值的方式在config属性中进行覆盖、从而实现个性化的配置方案,以下贴一下父组件中的实现方案,以供大家参考



为了省事儿,最后三个图的裁剪样式,直接写在组件的style中了。关于裁剪的形状可以根据需要进行设置,目前也有不少的网站提供在线的路径裁剪,非常简单方便。大家有什么疑问,可以在评论区留言,随时回复

 

你可能感兴趣的:(css,数据可视化,动画,前端,vue.js)