ECharts4是一個使用JavaScript實現(xiàn)的做圖表必備的神器，由百度EFE數(shù)據(jù)可視化團隊推出，可以流暢的運行在PC和移動設備上，兼容當前絕大部分
瀏覽器（IE8/9/10/11，Chrome，火狐等），底層依賴輕量級的矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定制的數(shù)據(jù)可視化圖表。要徹底掌握它，你只需要掌握一點前端開發(fā)的知識，如html、css、javascript。
使用說明
1、引入 ECharts
引入方式很簡單，只需要像普通的 JavaScript 庫一樣用 script 標簽引入就可以了
2、繪制一個簡單的圖表
1)在繪圖前我們需要為軟件準備一個具備高寬的 DOM 容器
2)然后就可以通過 echarts.init 方法初始化一個實例并通過 setOption 方法生成一個簡單的柱狀圖
3)這樣你的第一個圖表就誕生了！
軟件特性
1、豐富的可視化類型
提供了常規(guī)的折線圖、柱狀圖、散點圖、餅圖、K線圖，用于統(tǒng)計的盒形圖，用于地理數(shù)據(jù)可視化的地圖、熱力圖、線圖，用于關系數(shù)據(jù)可視化的關系圖、treemap、旭日圖，多維數(shù)據(jù)可視化的平行坐標，還有用于 BI 的漏斗圖，儀表盤，并且支持圖與圖之間的混搭。
除了已經(jīng)內置的包含了豐富功能的圖表，軟件還提供了自定義系列，只需要傳入一個renderItem函數(shù)，就可以從數(shù)據(jù)映射到任何你想要的圖形，更棒的是這些都還能和已有的交互組件結合使用而不需要操心其它事情。
你可以在下載界面下載包含所有圖表的構建文件，如果只是需要其中一兩個圖表，又嫌包含所有圖表的構建文件太大，也可以在在線構建中選擇需要的圖表類型后自定義構建。
2、多種數(shù)據(jù)格式無需轉換直接使用
內置的 dataset 屬性（4.0+）支持直接傳入包括二維表，key-value 等多種格式的數(shù)據(jù)源，通過簡單的設置 encode 屬性就可以完成從數(shù)據(jù)到圖形的映射，這種方式更符合可視化的直覺，省去了大部分場景下數(shù)據(jù)轉換的步驟，而且多個組件能夠共享一份數(shù)據(jù)而不用克隆。
為了配合大數(shù)據(jù)量的展現(xiàn)，軟件還支持輸入 TypedArray 格式的數(shù)據(jù)，TypedArray 在大數(shù)據(jù)量的存儲中可以占用更少的內存，對 GC 友好等特性也可以大幅度提升可視化應用的性能。
3、千萬數(shù)據(jù)的前端展現(xiàn)
通過增量渲染技術（4.0+），配合各種細致的優(yōu)化，軟件能夠展現(xiàn)千萬級的數(shù)據(jù)量，并且在這個數(shù)據(jù)量級依然能夠進行流暢的縮放平移等交互。
幾千萬的地理坐標數(shù)據(jù)就算使用二進制存儲也要占上百 MB 的空間。因此軟件同時提供了對流加載（4.0+）的支持，你可以使用 WebSocket 或者對數(shù)據(jù)分塊后加載，加載多少渲染多少！不需要漫長地等待所有數(shù)據(jù)加載完再進行繪制。
4、移動端優(yōu)化
針對移動端交互做了細致的優(yōu)化，例如移動端小屏上適于用手指在坐標系中進行縮放、平移。 PC 端也可以用鼠標在圖中進行縮放（用鼠標滾輪）、平移等。
細粒度的模塊化和打包機制可以讓軟件在移動端也擁有很小的體積，可選的 SVG 渲染模塊讓移動端的內存占用不再捉襟見肘。
5、多渲染方案，跨平臺使用
支持以 Canvas、SVG（4.0+）、VML 的形式渲染圖表。VML 可以兼容低版本 IE，SVG 使得移動端不再為內存擔憂，Canvas 可以輕松應對大數(shù)據(jù)量和特效的展現(xiàn)。不同的渲染方式提供了更多選擇，使得軟件在各種場景下都有更好的表現(xiàn)。
除了 PC 和移動端的瀏覽器，軟件還能在 node 上配合 node-canvas 進行高效的服務端渲染（SSR）。從 4.0 開始我們還和微信小程序的團隊合作，提供了軟件對小程序的適配！
社區(qū)熱心的貢獻者也為我們提供了豐富的其它語言擴展，比如 Python 的pyecharts，R 語言的 recharts, Julia 的 ECharts.jl 等等。
我們希望平臺和語言都不會成為大家使用這款軟件實現(xiàn)可視化的限制！
6、深度的交互式數(shù)據(jù)探索
交互是從數(shù)據(jù)中發(fā)掘信息的重要手段。“總覽為先，縮放過濾按需查看細節(jié)”是數(shù)據(jù)可視化交互的基本需求。
一直在交互的路上前進，我們提供了 圖例、視覺映射、數(shù)據(jù)區(qū)域縮放、tooltip、數(shù)據(jù)刷選等開箱即用的交互組件，可以對數(shù)據(jù)進行多維度數(shù)據(jù)篩取、視圖縮放、展示細節(jié)等交互操作。
7、多維數(shù)據(jù)的支持以及豐富的視覺編碼手段
開始加強了對多維數(shù)據(jù)的支持。除了加入了平行坐標等常見的多維數(shù)據(jù)可視化工具外，對于傳統(tǒng)的散點圖等，傳入的數(shù)據(jù)也可以是多個維度的。配合視覺映射組件 visualMap 提供的豐富的視覺編碼，能夠將不同維度的數(shù)據(jù)映射到顏色，大小，透明度，明暗度等不同的視覺通道。
8、動態(tài)數(shù)據(jù)
由數(shù)據(jù)驅動，數(shù)據(jù)的改變驅動圖表展現(xiàn)的改變。因此動態(tài)數(shù)據(jù)的實現(xiàn)也變得異常簡單，只需要獲取數(shù)據(jù)，填入數(shù)據(jù)，軟件會找到兩組數(shù)據(jù)之間的差異然后通過合適的動畫去表現(xiàn)數(shù)據(jù)的變化。配合 timeline 組件能夠在更高的時間維度上去表現(xiàn)數(shù)據(jù)的信息。
9、絢麗的特效
針對線數(shù)據(jù)，點數(shù)據(jù)等地理數(shù)據(jù)的可視化提供了吸引眼球的特效。
10、通過 GL 實現(xiàn)更多更強大絢麗的三維可視化
想要在 VR，大屏場景里實現(xiàn)三維的可視化效果？我們提供了基于 WebGL 的 ECharts GL，你可以跟使用普通組件一樣輕松的使用它繪制出三維的地球，建筑群，人口分布的柱狀圖，在這基礎之上我們還提供了不同層級的畫面配置項，幾行配置就能得到藝術化的畫面！
11、無障礙訪問（4.0+）
當我們說到“可視化”的時候，我們往往很自然地將它與“看得?”聯(lián)系在一起，但其 實這是片面的。W3C制定了無障礙富互聯(lián)網(wǎng)應用規(guī)范集(WAI-ARIA，the Accessible Rich Internet Applications Suite)，致力于使得網(wǎng)?內容和網(wǎng)?應 用能夠被更多殘障人士訪問。
遵從這一規(guī)范，支持自動根據(jù)圖表配置項智能生成描述，使得盲人可 以在朗讀設備的幫助下了解圖表內容，讓圖表可以被更多人群訪問
常見問題
一、坐標軸
1、坐標軸標簽顯示空間不夠怎么辦？
可以用 interval 控制每隔多少顯示標簽，設為 0 則顯示所有標簽。
或者，可以設置 axisLabel.rotate，將標簽旋轉一定角度。
2、把坐標軸設置在右側好像沒有效果？
需要將 onZero 設為 false 才行。
3、如何強制顯示坐標軸第一個/最后一個標簽？
3.5.2 版本起，支持 axisLabel.showMinLabel 以及 axisLabel.showMaxLabel，分別用來控制第一個和最后一個標簽是否強制顯示，設為 true 則強制顯示。
如果不方便更新版本，可以參考這個例子實現(xiàn)同樣的效果。
二、圖例 legend
1、圖例區(qū)域太大導致遮擋住圖表怎么辦？
可以設置 grid 控制圖表區(qū)域位置。如，將 grid.top 設置得大一些，可以將繪圖區(qū)域下移。
在未來的版本中，我們計劃會將布局做得更智能，自動處理這些遮擋問題。
三、提示框 tooltip
1、如何實現(xiàn)上下兩個圖表的提示框聯(lián)動？
3.5 版本開始支持這一功能，效果參見這個例子。
四、折線圖
1、坐標軸刻度好像和數(shù)據(jù)不匹配？
請檢查一下是否設置了 stack，如果不是想做堆積折線圖的話，應該將其去掉。
五、柱狀圖
1、數(shù)據(jù)值很小的時候，y 軸刻度會消失？
3.5.2 版本修復了該問題。
六、地圖
1、省份名稱重疊，如何修改名稱的位置？
可以修改地圖文件（JS 或 JSON）中對應省份的 cp 坐標，或者通過 echarts.getMap('china') 修改已加載的地圖數(shù)據(jù)。/2、如何獲取地圖的縮放事件？
首先，需要將系列的 roam 設置為 true，然后可以監(jiān)聽 'georoam' 事件。
0條評論