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

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开发的项目看起来会比较高大上一点~