聊聊ECharts和Code Pen

可能是因为我是女孩子，比较喜欢那种好看好玩的东西。在开发方面我也很容易被那种在视觉方面有冲击力，看着酷炫的东西吸引。虽然说编程在底层来说都是0和1组成的序列，但是优秀的视觉效果总是能让人们提起兴趣。有的视觉效果是为了更好的展现数据，比如说ECharts。有的视觉效果则纯粹是前端开发人员的炫技和脑洞，比如说CodePen。这两个好像没什么可比性，但正好最近我两个都接触了一下，就来聊聊~

ECharts

http://echarts.baidu.com/

这个其实不能算什么前端网站。在它的官网上说ECharts是一个纯Javascript的图标库。这个东西出了已经好几年了，好像在我大二还是大三自己写着玩前端的时候就听说过。这个库是百度开发的，好评率很高，基本上现在要在网页上实现图表都会想到ECharts。虽说百度在一些方面不受待见，但是前端技术这块还是很厉害的。

百度EFE出了好几个库和框架什么的，像Zrender也是那时候我看了觉得超级酷炫的。大家感兴趣可以去github上面看看这几个项目https://github.com/ecomfe。

回到ECharts这边。在我看来，这个库如此受欢迎的原因有下面这几个。

BSD License

开源协议的一种。可以商用，可以修改，修改后的代码还可以闭源。反正限制很小。

大家在公司里用开源的库的时候一定要注意协议类型。有的库是不能商用的，商用要给钱，有的库你修改或者用了之后要你把你的那部分也开源。

好久没画图了，画的好丑，请见谅。

图表类型丰富

ECharts的表类型很多，从常用的折线图、柱状图、饼图，再到散点图、雷达图、热力图、关系图什么的。很多类型我都没见过，大家各取所需就好。

官方每个类型都给出了近十种的应用实例可以直接在网站上改改看看效果。我比较喜欢echarts的动画效果，在数据变化或者图标切换的时候那个动态的效果很舒服。

上手简单，可二次开发

官网上有最基础的教程，跟着走完一遍就知道这个东西大概怎么用了。

各种实例可以跟着改改，然后自己写到项目里面去试试看一般就会了。

高阶的运用就要看这种大佬了，我暂时也就看看，我们来欣赏一下官网上大佬的作品。

CodePen

https://codepen.io/

Echarts这边主要是对数据的展现，合适的展现方式可以更好的表达出数据中包含的含义，但是大家也不要为了酷炫而酷炫的用这个库。没有数据的情况下，图表也就失去意义了嘛。那如果还是像搞点酷炫的东西怎么办，推荐大家看看CodePen这个网站。

网站上说这是一个面向前端设计师和开发人员的社交开发环境（social development environment for front-end designers and developers）。所以这个网站上有很多脑洞作品，也有很多炫技作品。

总而言之，上去看看大佬是怎么玩前端的。改改大佬的作品，指不定哪天也能搞个有意思的东西出来。

好几个都是纯css，没有用js写的。上面三块是代码区，下面是效果展示区。

结语

有时候好的效果和实用性是可以兼容的，不过这需要我们有一定的技术能力和脑洞。在没有相应的能力的情况下，先把实用性做好。不过，更好的视觉效果会让用户更喜欢你的作品。所以努力学习成为大佬吧~