D3.js与echart.js的应用场景

7,277 阅读4分钟

什么是D3?

D3.js的全称是Data-Driven Documents,其实就是一个数据驱动的文档的js库,简而言之就是一个数据可视化的库。那什么是数据可视化呢?举个例子:

给出一组数据 [10,80,40,100,30,20,50]

如果我们想要看出这组数据的大小关系,单看数据显然不够直观。那么我们可以将它转换为一种简单易懂的图表的形式(如下图)这样我们就可以更加直观的获取数据所传递给我们的信息。这个过程就叫做数据可视化。

在我们平时的项目开发中经常会遇到这种情况:后端返回给我们一组数据,前端人员需要把数据以一种很舒服、很直观的方式给别人展现出来,最好的选择就是通过图表,图表可以很直观的把庞大的数据以一种合适的方式展现给我们。但是如果通过js,css去自己写出这些图表显然是很麻烦的。所以就有D3.js。

使用D3可以绘制图表可以大大的提升我们的开发速度。而且使用起来比较灵活,换言之(想画什么就画什么)。D3是一种偏函数式编程的方式,这也是他比较复杂的地方,正因为他比较灵活,所以它所涉及的东西比较底层,学习成本就比较大。下面是一些D3.js绘制出的图例:

这些只是官网中的一小部分,感兴趣的同学可以去官网看看。可以看出,使用D3绘制的图表看起来都很灵活。我们在项目中使用的时候只需要将数据和相应的图表结合起来,就可以将图表渲染在页面上了。

什么是echarts?

顾名思义echarts其实也是一个数据可视化的工具,它和D3的作用很类似。echarts是封装好的,所以我们使用起来很方便,只用填写他的配置项就可以使用,但也恰恰因为它被封装好的缘故,所以灵活性较差,我们只能修改它所存在的配置项,如果想要自己添加或修改配置项中不存在的东西是不可以的。下面试echarts的一些图表示例:

echarts和D3的区别

既然echarts和D3的作用相似,那他们有什么不同之处呢?我觉得他们之间最大的不同之处就在于echarts它是使用canvas来绘制图形的,而D3是通过Svg来绘制图形的。这两者的不同之处在于,svg可以操作dom支持事件处理器,想要实现某个操作,直接调用相关的方法实现效果就行,他那个里面存在链式语法,这个和jQuery的链式调用差不多,简单易读。canvas不支持事件处理器所以只能展示数据,而不能修改。

  • D3使用svg绘制图形,echarts使用canvas绘制图形
  • D3兼容IE9及以上主流浏览器,echarts兼容IE6及以上主流浏览器
  • D3使用灵活,学习成本大,echarts封装好的,使用简单,不够灵活

D3与echart的适用场景

因为D3支持事件处理器可以操作dom,所以如果在项目开发中如果有较多用户交互的场景,可以使用D3.如果项目中一般没有用户交互的场景,我们只需要将图表展示给用户看,而不需要更改,可以使用echarts。因为D3它展示的每一个数据都是一个标签,所以当数据发生改变的时候图表会重新渲染,会不停的操作dom,这对性能的消耗是非常大的。

这里只是简单的介绍一下echarts和D3,感兴趣的同学可以去官网查看具体使用方法,官网上都介绍的非常详细,有时间也可以自己实践一下,也会有很大的收获,而且用echarts和D3开发的项目看起来会比较高大上一点~