初次接觸 web 圖表開(kāi)發(fā)的工程師，面對(duì)眾多的可視化工具庫(kù)難免會(huì)有疑惑鲸湃，比如說(shuō)：
這庫(kù)的產(chǎn)品定位赠涮？
哪個(gè)更好學(xué)？
哪個(gè)更強(qiáng)大暗挑？
讓我們帶著問(wèn)題笋除，從這三個(gè)庫(kù)的命名出發(fā)，比較一下：
簡(jiǎn)述：
該庫(kù)為百度團(tuán)隊(duì)開(kāi)發(fā)炸裆，因其開(kāi)源免費(fèi)又容易手上垃它，所以很快流行起來(lái)。
正如其名 Echarts烹看，亦如其它的 xxCharts 類庫(kù)一樣国拇，該庫(kù)中封裝了絕大多數(shù)常規(guī) chart，用戶通過(guò)配置 options 參數(shù)惯殊，就可很容易繪制指定圖表酱吝。
優(yōu)勢(shì)：
容易上手：其語(yǔ)法類似 css 的參數(shù)配置型語(yǔ)法，學(xué)習(xí)門(mén)檻較低土思。
圖表種類較豐富：因其發(fā)布較早且有百度團(tuán)隊(duì)維護(hù)务热，其提供的圖表類型已能滿足絕大部分常規(guī)性的業(yè)務(wù)需求。
劣勢(shì)：
自由度差：參數(shù)配置型語(yǔ)法庫(kù)的本質(zhì)是調(diào)用現(xiàn)成的繪圖函數(shù)己儒，所以此類庫(kù)的通病就是定制化能力差崎岂，想做出開(kāi)發(fā)者未封裝的圖表非常難。
代碼復(fù)用率低：因?yàn)榇祟悗?kù)封裝程度已非常高址愿，所以很難對(duì)其進(jìn)一步抽象和封裝该镣。
產(chǎn)品受眾：
無(wú)數(shù)據(jù)可視化知識(shí)的前端工程師
簡(jiǎn)述：
該庫(kù)由螞蟻金服 antV 團(tuán)隊(duì)開(kāi)發(fā)，其設(shè)計(jì)理念更有學(xué)術(shù)性响谓，走出了一條與 echarts 不同的產(chǎn)品線路损合。
正如其名 The?Grammar of?Graphics -可視化圖形語(yǔ)法，該庫(kù)有著被稱為可視化圣經(jīng)的《The Grammar of Graphics》作理論支撐娘纷，將可視化理論與web技術(shù)做了非常好的結(jié)合嫁审。
優(yōu)勢(shì)：
自由度較高：由可視化理論做基礎(chǔ)，沒(méi)有類似 Echart 的 chart 概念赖晶，可用“可視化語(yǔ)法”繪制想要的圖表律适，非常靈活辐烂。
例如一根堆積柱形圖的坐標(biāo)系由笛卡爾坐標(biāo)系改為極坐標(biāo)系，堆積柱形圖就變?yōu)榱藞A環(huán)圖捂贿。
代碼復(fù)用率較高：因其有一套完善的可視化語(yǔ)法纠修，所以團(tuán)隊(duì)或公司可根據(jù)自己的 UI 需求，用 g2 做底層庫(kù)厂僧，封裝自己的 charts 庫(kù)扣草。
劣勢(shì)：
學(xué)習(xí)成本稍高：g2 有理論的加持既是優(yōu)勢(shì)也是劣勢(shì)；優(yōu)勢(shì)是更高效了颜屠，卻也提高了可視化小白的使用門(mén)檻辰妙。
比如理解 g2 的繪圖原理至少要知道數(shù)據(jù)可視化的五種“視覺(jué)通道”：數(shù)據(jù)可以映射到 position, size, color, shape, opacity 五個(gè)維度等等。
產(chǎn)品受眾：
數(shù)據(jù)可視化工程師
希望向數(shù)據(jù)可視化領(lǐng)域發(fā)展的前端工程師
簡(jiǎn)述：
該庫(kù)幾乎憑 Mike Bostock?一人之力完成甫窟，且在學(xué)術(shù)界密浑、專業(yè)團(tuán)隊(duì)中享有極大聲譽(yù)。(想自學(xué) D3 的同學(xué)請(qǐng)戳 《如何自學(xué) D3》)
該庫(kù)更接近底層粗井，與 g2尔破、echarts 不同，d3 能直接操作 svg背传，所以擁有極大的自由度呆瞻，幾乎可以實(shí)現(xiàn)任何 2d 的設(shè)計(jì)需求。
正如其名 Data?Driven?Documents径玖，其本質(zhì)是將數(shù)據(jù)與 DOM 綁定痴脾，并將數(shù)據(jù)映射至 DOM 屬性上(這時(shí)視覺(jué)通道、比例尺轉(zhuǎn)換等理論就可發(fā)揮作用嘍～)梳星。
同時(shí)赞赖，如下圖，d3 長(zhǎng)于可視化冤灾，而不止于可視化前域，還提供了數(shù)據(jù)處理、數(shù)據(jù)分析韵吨、DOM 操作等諸多功能匿垄。?
優(yōu)勢(shì)：
掌握 d3 后，限制作品水平的只會(huì)是想象力而不再是技術(shù)归粉。
劣勢(shì)：
學(xué)習(xí)門(mén)檻較高椿疗，對(duì)用戶的 web 技術(shù)、可視化理論糠悼、數(shù)學(xué)邏輯都一定要求届榄。
產(chǎn)品受眾：
希望向中高水平進(jìn)階的可視化工程師
希望向中高水平進(jìn)階的前端工程師
題外話：
任何一款工具型產(chǎn)品，在產(chǎn)品設(shè)計(jì)時(shí)都遇到“自由度”和“簡(jiǎn)便性”兩者間的權(quán)衡與取舍倔喂，而往往這兩者很難兼得铝条，我將這種情況稱之為“蹺蹺板難題”靖苇。?
這也是為什么 echarts 使用簡(jiǎn)單而自由度差， d3 自由度好而學(xué)習(xí)門(mén)檻高的原因了班缰。
所以贤壁，回到 “哪個(gè)更強(qiáng)大” 的問(wèn)題，這個(gè)問(wèn)題鲁捏，從不同角度看芯砸，會(huì)有不同答案。
在我看來(lái)给梅，這三款可視化庫(kù)各有優(yōu)劣，沒(méi)有哪款更強(qiáng)大双揪，只有哪款更適合动羽。
就像美圖秀秀與 PhotoShop，分別滿足了不同人群渔期，不同場(chǎng)景的需求运吓。
以上
