微信二维码
微博二维码
qq号二维码

Apache-echarts

王伟平 2021.12.15 2413人浏览
超级好用的动态图标库~

对于我们前端开发来说,尤其是做数据可视化领域的同学,对于echarts的使用可以说是家常便饭,echarts可以帮助我们轻松的将数据用各种图形作展示,助力数据的可读性。但是同时我也发现大多数同学对于echarts的理解并不深入,当然也是因为大多时候业务需求上面的要求可能也不是特别的高,只要求程序员实现一些简单柱形图、折线图或者饼图之内的,这些都只是echarts的皮毛,可以说是有手就行的操作。我还是建议大家可以学习更深入一些,将这些进阶性的操作放入自己的武器库中,有备无患。

鄙人上一份工作恰好遇到过一些比较刁钻的需求,当时经常做一些数据可视化相关的项目,例如一些可视化的大屏等等,对于界面的效果要求算是比较高了,我在这个时候花过一些时间用以提升自身的echarts水平,有过不少的收获,在这里简单拿一些进阶案例作一下总结.


立体柱图:pictorialBar

Apache-echarts配置实例:https://www.makeapie.com/editor.html?c=xvh81yeAKa

pictorialBar(象形柱图)是echarts的一个高阶用法,象形柱图可以被想象为:它首先是个柱状图,但是柱状图的柱子并不显示。这些柱子我们称为『基准柱(reference bar)』,根据基准柱来定位和显示各种象形图形(包括图片)。

我们在这个示例配置中使用到了四个象形柱图配置,分别是圆柱上下椭圆和底部的环状装饰物,然后配置柱图的渐变色等等这些配置都可以借鉴


多边体柱图:path

Apache-echarts

查看示例:https://link.juejin.cn/?target=https%3A%2F%2Fwww.makeapie.com%2Feditor.html%3Fc%3DxwS4cOjbiX

path的使用可以说是我研究echarts最大的收获了,配置简单实用易于理解,感觉可以用它来实现很多不同的需求,使用过svg的同学对于path路径不会陌生,echarts中也可以使用path实现一些图形然后应用在配置中。



分享到:
天津UI设计培训-CleanPNG免抠素材网站
  • 2020.11.30
  • "天津IT培训适应经济新常态:中日职场比较 - 探索工作时长减少、生活质量提升的程序员"
  • 2024.04.23