d3與echarts的區別


1. 目前各大公司的大數據平台多使用d3還是echarts?什么時候適合用echarts,什么時候適合用d3?

在我看幾種數據可視化平台多使用折線圖,面積圖和柱狀圖,條圖居多,對於echarts和d3都有使用。 對於使用d3還是echarts還得從用戶需求,計算數據的量的大小來進行分析:

(1) 對於客戶需求要求的圖表擁有大量的用戶交互場景,用d3比較方便,因為d3中svg畫圖支持事件處理器,他是基於dom進行操作的。想要實現某個操作,直接調用相關的方法實現效果就行,他那個里面存在鏈式語法,這個和jQuery的鏈式調用差不多,簡單易讀。

(2) 對於大量的數據展示並且對於用戶交互場景沒什么要求,就只是展示數據,那我建議使用echarts,如果使用d3的話展示的每一個數據都是一個標簽,那么當數據發生改變的時候這時候圖表會重新渲染,會不停的操作dom,操作dom是很耗費性能的。

(3) 從兼容性方面考慮:echarts兼容到IE6及以上的所有主流瀏覽器,而d3兼容IE9及以上以及所有的主流瀏覽器,如果項目考慮兼容IE6,建議使用echarts。

2. D3和echarts的區別?

D3:

     太底層,學習成本大

兼容到IE9以上以及所有的主流瀏覽器

D3通過svg來繪制圖形

可以自定義事件

Svg:

不依賴分辨率

基於xml繪制圖形,可以操作dom

支持事件處理器

復雜度高,會減慢頁面的渲染速度

Echarts:

        封裝好的方法直接調用

兼容到ie6以及以上的所有主流瀏覽器

echarts通過canvas來繪制圖形

封裝好的,直接用,不能修改

Canvas:

依賴分辨率

基於js繪制圖形

不支持事件處理器

能以png或者jpg的格式保存圖片

3. 一般的交互都用在哪些方面上?

一般的數據交互,后台返回數據,前端將數據通過圖表的形式展示給用戶。對於這種只是展示數據的話我比較常用的是echarts

而像一些鼠標、鍵盤、觸屏事件操作的話,是用d3實現的。因為svg支持事件處理器

                          當某個事件被監聽到時,d3會把當前的事件存到d3.event對象,里面保存了當前事件的各種參數。

 

 

4. 不同圖表之間的對比:

 

柱狀圖(常用)

二維數據集,有一維需要比較,適合中小規模數據集,不超過12條數據

對比分類數據的數值大小

柱圖用高度反映數據差異,用來展示有多少項目(頻率)會落入一個具有一定特征的數據段中,比如分析公司人員構成是否存在老齡化現象,可以通過柱圖看到25歲以下的員工有多少,25歲到35歲之間員工有多少等這種年齡的分布情況。同時,柱圖還可以用來表示含有較少數據值的趨勢變化關系。

條形圖主要是用於觀測進程,分類比較,柱形圖按照一定的區間將數據進行分組。其操作方法基本相似

 

條圖

 

 

條圖表達比較關系,按照強調的方式可以排列任何順序,如在零售行業中統計暢銷品的銷售情況就是很好的應用。它是最通用的一種圖表

折線圖(常用)

二維數據集,適合大量的數據展示,不注重數據的具體大小,注重在某一個時間段的數據的變化趨勢

觀察數據的變化趨勢

關心數據如何隨着時間變化而變化,每周、每月、每年的變化趨勢是增長、減少、上下波動或基本不變,這時候使用線圖更好地表現指標隨時間呈現的趨勢

 

面積圖(常用)

二維數據集

在折線圖的基礎上,進行運用

 

與折線圖較為類似,面積圖強調變量隨時間而變化的程度,也可用於引起人們對總值趨勢的注意。用填充了顏色或圖案的面積來顯示數據,面積片數不宜超過5片

 

餅圖(常用)

 

對比分類數據的占比情況

構成比例關系時,最好使用餅圖

如果你想表達的信息包括:“份額”、“百分比”以及“預計將達到百分之多少”,這時候可以用到餅圖。為了使餅圖盡量發揮作用,在使用中不宜多於6種成分。

 

 

 

 

氣泡圖(少用)

 

 

三維數據集

 

通過每個點的面積大小,以及位置坐標來展示信息

比如展示某一個具體的地點風的強度,有三個維度:精度,維度和風的強度,風的強度用圓的面積大小表示,圓越大,代表風的強度越大,但是人一般不善於判斷面積,那么這個就適用於那些對於其中有一維辨識度沒有那么高的三維數據的展示,但是具體的用的地方比較少,平時很少用

 

雷達圖(平時用的不多)

多維數據集,四維以上,但是數據點有限(<=6),所以他的適用場景也有限,平時用的也少

 

雷達圖可以用來表現一個周期數值的變化,也可以用來表現特定對象主要參數的相對關系。

雷達圖多用於在財務分析中,用來分析企業負債能力、運營能力、盈利和發展能力等指標。

 

 

 

在使用方面:

Echarts里面的方法封裝比較好,用的時候直接調用就能實現效果,

對於echarts的使用比較簡單,引入echarts.js,然后就可以通過 echarts.init 方法初始化一個 echarts 實例並通過 setOption 方法設置圖表實例的配置項以及數據,萬能接口,所有參數和數據的修改都可以通過setOption完成,ECharts 會合並新的參數和數據,然后刷新圖表。如果開啟動畫的話,ECharts 找到兩組數據之間的差異然后通過合適的動畫去表現數據的變化

 

而d3需要自己添加畫布,繪制圖形,繪制的每一個圖形都為一個對象,可以添加相應的事件操作,操作dom


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM