可视化 之D3 与echarts 对比以及应用场景

可视化：我们想要看出一组数据的大小关系，单看数据显然不够直观。那么我们可以将它转换为一种简单易懂的图表的形式，就可以更加直观的获取数据所传递给我们的信息。这个过程就叫做数据可视化。
可视化常用2个前端库echarts和D3.

echarts: 和 D3 js很相似，是封装好的，配置好即可使用，方便，上手快，成本低，但是不够灵活。只能修改配置项，不能自己添加和操作不存在的配置项。

d3：全称Data-Driven Documents，其实就是一个数据驱动的文档的js库，简而言之就是一个数据可视化的库。

区别

echarts 底层是使用canvas绘制图形，canvas不支持事件处理器，所以只能展示数据，而不能修改。
D3  底层是通过svg绘制图形的，二者不同之处在于svg可以操作dom，支持事件处理器，可以调用相关方法直接操作，支持链式语法，和JQuery链式调用差不多。

小结：

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

D3与echart的适用场景

因为D3支持事件处理器可以操作dom，所以项目开发中有较多用户交互的场景，可以使用D3

.如果没有与用户交互的场景，只需要将图表展示给用户看，而不需要更改，可以使用echarts。因为D3它展示的每一个数据都是一个标签，所以当数据发生改变的时候图表会重新渲染，会不停的操作dom，这对性能的消耗是非常大的。