基于html5 Canvas圖表庫ECharts怎么用

本篇文章為大家展示了基于html5 Canvas圖表庫ECharts怎么用，內(nèi)容簡明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

　　ECharts開源來自百度商業(yè)前端數(shù)據(jù)可視化團(tuán)隊(duì)，基于html5Canvas，是一個(gè)純Javascript圖表庫，提供直觀，生動(dòng)，可交互，可個(gè)性化定制的數(shù)據(jù)可視化圖表。創(chuàng)新的拖拽重計(jì)算、數(shù)據(jù)視圖、值域漫游等特性大大增強(qiáng)了用戶體驗(yàn)，賦予了用戶對(duì)數(shù)據(jù)進(jìn)行挖掘、整合的能力。——大數(shù)據(jù)時(shí)代，重新定義數(shù)據(jù)圖表的時(shí)候到了

Architecture

　　ECharts(EnterpriseCharts商業(yè)產(chǎn)品圖表庫)

　　提供商業(yè)產(chǎn)品常用圖表庫，底層基于ZRender，創(chuàng)建了坐標(biāo)系，圖例，提示，工具箱等基礎(chǔ)組件，并在此上構(gòu)建出折線圖（區(qū)域圖）、柱狀圖（條狀圖）、散點(diǎn)圖（氣泡圖）、餅圖（環(huán)形圖）、K線圖、地圖、和弦圖以及力導(dǎo)向布局圖，同時(shí)支持任意維度的堆積和多圖表混合展現(xiàn)。

　　混搭的圖表會(huì)更具表現(xiàn)力也更有趣味，ECharts提供的圖表（共9類14種）支持任意混搭：

　　折線圖（區(qū)域圖）、柱狀圖（條狀圖）、散點(diǎn)圖（氣泡圖）、K線圖、餅圖（環(huán)形圖）、雷達(dá)圖、地圖、和弦圖、力導(dǎo)布局圖。

　　包含唯一圖例、工具箱、數(shù)據(jù)區(qū)域縮放、值域漫游模塊，一個(gè)直角坐標(biāo)系（可包含一條或多條類目軸線，一條或多條值軸線，最多上下左右四條）

拖拽重計(jì)算

　　拖拽重計(jì)算特性（專利）帶來了數(shù)據(jù)統(tǒng)計(jì)圖表從未有過的用戶體驗(yàn)，允許用戶對(duì)統(tǒng)計(jì)數(shù)據(jù)進(jìn)行有效的提取、整合，甚至在多個(gè)圖表間交換數(shù)據(jù)，賦予了用戶對(duì)數(shù)據(jù)進(jìn)行挖掘、整合的能力。

數(shù)據(jù)視圖

　　如果你所呈現(xiàn)的數(shù)據(jù)足夠讓用戶所關(guān)心，那么他們將不滿足于查看可視化的圖表，要去逐一迎合他們下載保存，數(shù)據(jù)分享，加工整合已有數(shù)據(jù)等等需求？

　　或許你只要給予一個(gè)","分隔的數(shù)據(jù)文本他們就懂了，這就是ECharts的數(shù)據(jù)視圖！當(dāng)然，你可以重載數(shù)據(jù)視圖的輸出方法，用你獨(dú)特的方式去呈現(xiàn)數(shù)據(jù)。

　　如果你的用戶足夠的高端，你甚至可以打開數(shù)據(jù)視圖的編輯功能，跟拖拽重計(jì)算相比，這可是批量的數(shù)據(jù)修改！

動(dòng)態(tài)類型切換

　　很多圖表類型本身所表現(xiàn)的能力是相似的，但由于數(shù)據(jù)差異、表現(xiàn)需求和個(gè)人喜好的不同導(dǎo)致最終圖表所呈現(xiàn)的張力又大不一樣，比如折線圖和柱狀圖的選擇,系列數(shù)據(jù)是堆疊還是平鋪總是讓人頭疼。

　　ECharts提供了動(dòng)態(tài)類型切換，讓用戶隨心所欲的切換到他所需要的圖表類型和堆疊狀態(tài)。

　　多系列數(shù)據(jù)的同時(shí)展現(xiàn)呈現(xiàn)出豐富內(nèi)容，但如何讓用戶切換到他所關(guān)心的個(gè)別系列上？

　　ECharts提供了方便快捷的多維度圖例開關(guān)，可以隨時(shí)切換到你所關(guān)心的數(shù)據(jù)系列。

數(shù)據(jù)區(qū)域選擇

　　數(shù)據(jù)可以是無限的，但顯示空間總是有限的，數(shù)據(jù)區(qū)域選擇組件提供了大數(shù)據(jù)量中漫游的能力，讓用戶選擇并呈現(xiàn)他所關(guān)心的數(shù)據(jù)區(qū)域。

　　配合隨動(dòng)的均值（極值）標(biāo)線，標(biāo)注展現(xiàn)強(qiáng)大的數(shù)據(jù)剖析能力。

多圖聯(lián)動(dòng)

　　多系列數(shù)據(jù)在同一個(gè)直角系內(nèi)同時(shí)展現(xiàn)有時(shí)候會(huì)產(chǎn)生混亂，但他們又存在極強(qiáng)的關(guān)聯(lián)意義不可分離？

　　ECharts提供了多圖聯(lián)動(dòng)的能力（connect），能做的可不僅僅是鼠標(biāo)劃過的詳情顯示，連接的多個(gè)圖表會(huì)共享組件事件并且實(shí)現(xiàn)了保存圖片時(shí)的自動(dòng)拼接。

值域漫游

　　基于坐標(biāo)的圖表（如地圖、散點(diǎn)圖）通過色彩變化表現(xiàn)數(shù)值的大小能直觀形象的展示數(shù)據(jù)分布。

　　但如何聚焦到我所關(guān)心的數(shù)值上？我們創(chuàng)造了稱為值域漫游的功能，讓你可以輕松進(jìn)行數(shù)值篩選。

上述內(nèi)容就是基于html5 Canvas圖表庫ECharts怎么用，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。