可视化 之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,这对性能的消耗是非常大的。

原文地址:https://www.cnblogs.com/xiaoyaoweb/p/15222075.html