数据可视化工具d3与echarts的区别

超、凢脫俗 2021-11-14 15:18 176阅读 0赞

#### 区别 ####

<table> 
 <thead> 
  <tr> 
   <th>D3</th> 
   <th>Echarts</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>太底层，学习成本大</td> 
   <td>封装好的方法直接调用</td> 
  </tr> 
  <tr> 
   <td>兼容到IE9以上以及所有的主流浏览器</td> 
   <td>兼容到IE6以及以上的所有主流浏览器</td> 
  </tr> 
  <tr> 
   <td>通过svg来绘制图形</td> 
   <td>通过canvas来绘制图形</td> 
  </tr> 
  <tr> 
   <td>可以自定义事件</td> 
   <td>封装好的，直接用，不能修改</td> 
  </tr> 
  <tr> 
   <td>svg</td> 
   <td>canvas</td> 
  </tr> 
  <tr> 
   <td>不依赖分辨率</td> 
   <td>依赖分辨率</td> 
  </tr> 
  <tr> 
   <td>基于xml绘制图形，可以操作dom</td> 
   <td>基于js绘制图形</td> 
  </tr> 
  <tr> 
   <td>支持事件处理器</td> 
   <td>不支持事件处理器</td> 
  </tr> 
  <tr> 
   <td>复杂度高，会减慢页面的渲染速度</td> 
   <td>能以png或者jpg的格式保存图片</td> 
  </tr> 
 </tbody> 
</table>

#### 使用场景 ####

一般是根据计算数据量的大小来进行分析：  
1）对于客户的需求要求的图表拥有大量的用户交互场景，用d3比较方便，因为d3中的svg画图支持事件处理器，是基于dom进行操作的。想要实现某个操作，直接调用相关的方法实现效果即可。  
2）对于大量的数据展示并且对于用户交互场景没什么要求，就只是展示数据，建议使用echarts，如果使用d3展示的每一个数据都是一个标签，当数据发生改变时图表会重新渲染，会不停的操作dom。  
3）兼容性方面：echarts兼容到IE6及以上的所有主流浏览器，d3兼容IE9及以上所有的主流浏览器。

**参考**  
[d3与echarts的区别][d3_echarts]

[d3_echarts]: https://blog.csdn.net/ysj1218/article/details/80523474