文作者:HelloGitHub-kalifun
圖表庫千萬個今天 HelloGitHub 給大家推薦個很有“特色”的圖表庫:一個手繪風格的 JS 圖表庫 —— Chart.xkcd,快收起你緊繃、嚴肅的面容讓我們一起看看用手繪風格展示數據的效果。
一、介紹
項目地址:https://github.com/timqian/chart.xkcd
Chart.xkcd 是一個圖表庫,可繪制“非精細”、“卡通”或“手繪”樣式的圖表。
效果是不是很可愛?那下面就跟著 HelloGitHub 發起的《講解開源項目》[1]的教程一起學習、上手使用起來吧!
二、快速入手
使用 Chart.xkcd 很容易,只需頁面中包含庫的引用和一個用于顯示圖表的 <svg> 節點即可。
2.1 代碼示例
先用一段簡短的代碼,讓大家了解下基本的參數和代碼的樣子,后面會有可運行的代碼示例片段供大家學習和使用 。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--將 SVG 元素直接嵌入 HTML 頁面中--> <svg class="line-chart"></svg> <!--引入 JS 庫--> <script src="https://cdn.jsdelivr.net/npm/chart.xkcd@1.1/dist/chart.xkcd.min.js"></script> <script> //關鍵代碼塊 const svg=document.querySelector('.line-chart') new chartXkcd.Line(svg, { title: '', xLabel: '', yLabel: '', data: {...}, options: {}, }); </script> </body> </html>
2.2 參數說明
三、圖表類型
Chart.xkcd 支持多樣的圖表類型,下面將逐一講解和實現:折線圖、XY 圖、條形圖、圓餅/甜甜圈圖、雷達圖,實現的示例代碼完整可運行、注釋完整、包含參數說明。
tips:下文中的示例代碼均可直接運行,保存為 html 文件便可在本機查看效果。
3.1 折線圖
折線圖以折線形式顯示一系列數據點,它可以用于顯示趨勢數據或不同數據集的比較。
示例代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--將 SVG 元素直接嵌入 HTML 頁面中--> <svg class="line-chart"></svg> <!--引入 JS 庫--> <script src="https://cdn.jsdelivr.net/npm/chart.xkcd@1.1/dist/chart.xkcd.min.js"></script> <script> // querySelector() 方法返回文檔中匹配指定 CSS 選擇器的一個元素。獲取文檔中 class=".line-chart" 的元素。 const svg=document.querySelector('.line-chart'); // chartXkcd.Line 創建一個折線圖 const lineChart=new chartXkcd.Line(svg, { //圖表的標題 title: 'Monthly income of an indie developer', // 圖表的 x 標簽 xLabel: 'Month', // 圖表的 y 標簽 yLabel: '$ Dollors', // 需要可視化的數據 data: { // x 軸數據 labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'], // y 軸數據 datasets: [{ // 第一組數據 label: 'Plan', data: [30, 70, 200, 300, 500, 800, 1500, 2900, 5000, 8000], }, { // 第二組數據 label: 'Reality', data: [0, 1, 30, 70, 80, 100, 50, 80, 40, 150], }], }, // 可選配置以自定義圖表的外觀 options: { // 自定義要在 y 軸上看到的刻度號(默認為 3) yTickCount: 3, // 指定要放置圖例的位置 legendPosition: chartXkcd.config.positionType.upLeft } }); </script> </body> </html>
參數說明
效果展示
3.2 XY 圖
XY 圖表用于通過指定點的 XY 坐標來繪制點,您也可以通過連接這些點來繪制 XY 折線圖。
示例代碼
<script> // querySelector() 方法返回文檔中匹配指定 CSS 選擇器的一個元素。獲取文檔中 class=".xy-chart" 的元素。 const svg=document.querySelector('.xy-chart'); //chartXkcd.XY 創建一個XY圖 new chartXkcd.XY(svg, { //圖表的標題 title: 'Pokemon farms', // 圖表的 x 標簽 xLabel: 'Coodinate', // 圖表的 y 標簽 yLabel: 'Count', // 需要可視化的數據 data: { datasets: [{ // 第一組數據 label: 'Pikachu', data: [{ x: 3, y: 10 }, { x: 4, y: 122 }, { x: 10, y: 100 }, { x: 1, y: 2 }, { x: 2, y: 4 }], }, { // 第二組數據 label: 'Squirtle', data: [{ x: 3, y: 122 }, { x: 4, y: 212 }, { x: -3, y: 100 }, { x: 1, y: 1 }, { x: 1.5, y: 12 }], }], }, options: { // 自定義要在 x 軸上看到的刻度號(默認為 3) xTickCount: 5, // 自定義要在 y 軸上看到的刻度號(默認為 3) yTickCount: 5, // 指定要放置圖例的位置 legendPosition: chartXkcd.config.positionType.upRight, // 用線連接點(默認 false) showLine: false, // 指定時間格式 timeFormat: undefined, // 更改點的大?。J為 1) dotSize: 1, }, }); </script>
參數說明
效果展示
如果你想將這些點連接起來,讓數據對比更加明顯的話。請修改 showLine:true 再刷新頁面你就可以看到連線的效果了。
3.3 條形圖
條形圖提供了一種顯示以豎條表示的數據值的方式。
示例代碼
<script> // querySelector() 方法返回文檔中匹配指定 CSS 選擇器的一個元素。獲取文檔中 class=".bar-chart" 的元素。 const svg=document.querySelector('.bar-chart'); // chartXkcd.Bar 創建一個條形圖 const barChart=new chartXkcd.Bar(svg, { // 圖表的標題 title: 'github stars VS patron number', // xLabel: '', // optional // yLabel: '', // optional // 圖表數據 data: { labels: ['github stars', 'patrons'], datasets: [{ data: [100, 2], }], }, options: { // 自定義要在 y 軸上看到的刻度號(默認為 3) yTickCount: 2, }, }); </script>
參數說明
效果展示
3.4 圓餅/甜甜圈圖
餅圖廣泛得應用在各個領域,用于表示不同分類的占比情況,通過弧度大小來對比各種分類。餅圖通過將一個圓餅按照分類的占比劃分成多個區塊,整個圓餅代表數據的總量,每個區塊(圓?。┍硎驹摲诸愓伎傮w的比例大小,所有區塊(圓弧)的加和等于 100%。
示例代碼
<script> // querySelector() 方法返回文檔中匹配指定 CSS 選擇器的一個元素。獲取文檔中 class=".pie-chart" 的元素。 const svg=document.querySelector('.pie-chart'); // chartXkcd.Pie 創建一個圓餅圖 const pieChart=new chartXkcd.Pie(svg, { // 圖表的標題 title: 'What Tim made of', // 需要可視化的數據 data: { labels: ['a', 'b', 'e', 'f', 'g'], datasets: [{ data: [500, 200, 80, 90, 100], }], }, options: { // 指定空的餅圖半徑 innerRadius: 0.5, // 指定要放置圖例的位置 legendPosition: chartXkcd.config.positionType.upRight, }, }); </script>
參數說明
效果展示
3.5 雷達圖
雷達圖(Radar Chart)又被叫做蜘蛛網圖,適用于顯示三個或更多的維度的變量。雷達圖是以在同一點開始的軸上顯示的三個或更多個變量的二維圖表的形式來顯示多元數據的方法,其中軸的相對位置和角度通常是無意義的。
示例代碼
<script> // querySelector() 方法返回文檔中匹配指定 CSS 選擇器的一個元素。獲取文檔中 class=".radar-chart" 的元素。 const svg=document.querySelector('.radar-chart'); // chartXkcd.Radar 創建一個雷達圖 const radarChart=new chartXkcd.Radar(svg, { // 圖表的標題 title: 'Letters in random words', // 需要可視化的數據 data: { labels: ['c', 'h', 'a', 'r', 't'], datasets: [{ label: 'ccharrrt', data: [2, 1, 1, 3, 1], }, { label: 'chhaart', data: [1, 2, 2, 1, 1], }], }, options: { // 在圖表中顯示圖例 showLegend: true, // 點的大小 dotSize: 0.8, // 在每行附近顯示標簽 showLabels: true, // 指定要放置圖例的位置 legendPosition: chartXkcd.config.positionType.upRight, // unxkcdify: true, }, }); </script>
參數說明
效果展示
四、最后
以上就是講解的全部內容,相信教程至此 Chart.xkcd 庫的基本用法你已經基本掌握,后面就可以用來今天學到的東西,提高自己項目的顏值了。
有了 Chart.xkcd 讓數據可愛地展示出來并不難,快動手自己實現一個吧~
參考資料
[1]《講解開源項目》: https://github.com/HelloGitHub-Team/Article
[2]CHART.XKCD 官方文檔: https://timqian.com/chart.xkcd/
[3]CHART.XKCD 項目地址: https://github.com/timqian/chart.xkcd
『講解開源項目系列』——讓對開源項目感興趣的人不再畏懼、讓開源項目的發起者不再孤單。跟著我們的文章,你會發現編程的樂趣、使用和發現參與開源項目如此簡單。歡迎留言聯系我們、加入我們,讓更多人愛上開源、貢獻開源~
日常項目建設和實施過程中,經常會遇到類似數據可視化的實現場景。對于數據可視化已經從簡單的統計圖表展現,擴展到類似監控大屏,拓撲圖,流程編排圖,集成架構圖等方面的呈現。而這些往往不是簡單的使用圖表就能夠解決的。
因此今天總結下對于數據可視化和圖形繪制方面的工具整理。
推薦首先閱讀知乎的關于有哪些可視化工具推薦的回答,內容已經相當全面了
https://www.zhihu.com/question/19929609
要注意的是當前主流的仍然是基于javasrcirpt開發的圖表庫,對于偏重的flex不應該作為選擇的基礎。下面對一些選擇的思路做些簡單的說明。
首先可選的主流圖表庫包括了百度的Echart,Highchart,D3.js這三個。
這三個可視化圖表庫的使用客戶也相當多,能夠應對的常見可視化場景也足夠。對于百度的Echart又推出有新的V4.0版本,雖然支撐的圖表擴展沒有大的變化,但是在性能上有明顯改進。當然從支持的圖表類型種類和開放性來談,最強大的還是D3.js,但是前面兩種已經能夠基本滿足實際的圖表層面使用的需要。
對于百度Echart,對里面的關系圖做了詳細分析后,實際上沒有找到用來做網絡拓撲圖的工具,系統集成關系圖的組件。當然百度Echart里面有的關系圖,?;鶊D,地圖,熱力圖遷徙圖,矩陣圖,日歷圖,樹圖等功能已經足夠強大。
采用百度Echart也很容易自己來實現類似監控大屏這種前端應用。
對于網絡關系圖,在可視化里面常見的一種類型,其中主流的應該是Gephi,Gephi是一款開源免費跨平臺基于JVM的復雜網絡分析軟件, 其主要用于各種網絡和復雜系統,動態和分層圖的交互可視化與探測開源工具。其次是R語言中的iGraph和networkD3包,功能也足夠強大。還有就是基于python語言實現的networkx,是專門進行網絡可視化呈現的一個小工具。
Gephi地址和例子參考:https://gephi.org/
對于商用的圖表和可視化工具當然是Tableau,據Gartner魔力象限,2014年的測評,tableau可執行速度最快,整體市場表現也在前列。在Tableau官方網站可以免費下載到桌面試用版進行試用。
如果僅僅是提供常用的畫圖API接口,自己完全根據需要繪制SVG渲染圖,對于這種場景你仍然可以選擇Echart和Highcharts來實現,在官方網站也有制作SVG渲染圖的例子。
當然還有一類即經常用于網管類,日志類監控分析的前端圖表展示軟件,在ELK日志分析系統 Logstash+ElasticSearch+Kibana4里面會使用Kibana4進行前端圖表展現。
Grafana是另外一個基于JavaScript的前端展示工具,Grafana provides a powerful and elegant way to create, explore, and share dashboards and data with your team and the world。對于Grafana支持Graphite, Elasticsearch, Prometheus, InfluxDB, OpenTSDB and KairosDB各種數據采集源。
對于Grafana當前和類似InfluxDB時序數據庫結合的很緊密,可以很容易是基于時序數據的可視化圖表展示,包括當前在Kurbernetes里面用的很多的Prometheus監控方案,仍然是基于時序數據庫和Grafana來實現資源性能監控。
Grafana的官方地址:https://grafana.com/
最后說下Processing,功能相當強大,但是要有一定的開發基礎和學習門檻,Processing 在 2001 年誕生于麻省理工學院(MIT)的媒體實驗室,主創者為 Ben Fry 和 Casey Reas,當然還有來自 Carnegie Mellon、洛杉磯的加利福尼亞大學以及邁阿密大學等的貢獻。
具體例子可以參考:https://processing.org/examples/
數據可視化和圖表僅僅是前端呈現的工具,對于數據可視化最重要的還是首先要搞清楚你當前有哪些數據,數據本身的結構和數據間關系是如何的?其次搞清楚數據呈現的場景和模式,其次才是呈現問題。
對于ESB服務總線,特別是涉及到兩級架構集成的時候,采用類似拓撲圖的可視化思路來進行集成架構和部署架構圖的可視化是一個可選的方案。基于拓撲圖可視化為關鍵字搜索,搜索到兩個可視化工具軟件,雖然都是付費軟件,但是對于拓撲圖,部署架構,集成關系圖等方面的展示能力還是相當強。
TWaver工具:http://www.servasoft.com/
TWaver關注于數據的圖形展示,它是面向開發人員的,需要進行二次開發。
TWaver的圖形組件庫中提供了拓撲組件、地圖組件、設備圖組件,以及表格、樹圖、屬性表、圖表等豐富的通用圖形界面組件,為電信運營支撐系統(OSS)的開發提供“一站式”的組件產品和解決方案,是快速設計、開發和部署OSS的利器。
可以看到TWaver本身的功能相對強大,完全可以勝任復雜的資源拓撲圖的設計,但是如果僅僅用于拓撲圖展示的話有點大材小用。
對于TWaver,實際上可以看到對于數據中心資源和資產的全三維可視化建模是另外一個做的相當好的地方。這個軟件可以實現數據中心內所有設備對象的虛擬仿真,以完全3D模式構建整個數據中心環境,并將數據中心內的監控子系統,如視頻、動環、門禁等,納入到可視化機房管理平臺中來,實時分析查看監控信息。 軟件采用B/S架構,無需安裝任何插件即可在瀏覽器中流暢漫游數據中心三維場景,實現數據中心級、機房級、機柜級、設備級和端口級管理和監控。
類似下圖:
Qunee工具:http://qunee.com/
Qunee是一套基于HTML5的網絡圖組件。其使用HTML5 Canvas技術,繪制清新、流暢的網絡圖,可用于社交網絡圖、拓撲圖、流程圖、地圖等需求, JS組件封裝,藏繁瑣于簡潔,輕松構建優雅的互聯網應用與企業應用,讓數據的在線可視化變得容易。
在網站上有詳細的例子可以參考,可以看到Qunee相對來說輕量些,用于實現一些簡單的網絡拓撲,集成架構圖展示完全可以滿足去。
類似上圖,可以很方便的通過Qunee提供的可視化設計工具實現。
基于這些可視化拓撲設計工具,結合ESB服務總線集成實際的集成場景來說,初步考慮可以應用的點包括如下。
1. 實現兩級架構的拓撲圖效果展示和接口服務集成監控。
布局原來一直太強調結合地圖進行展示,實際上效果并不一定太好。這里可以直接自己定義布局模式,初步想法就是中心為集團,四邊方框來線上各個省或子公司。形成完整的兩級集團展示效果。這種展示方式也方便直接線上到大屏上去。
2. 對于當前ESB平臺本身的資源和服務狀態監控可視化
這套可視化工具很容易實現這點,我們只需要先可視化的設計出部署架構布局,然后再將實際對數據庫,應用中間件資源,包括服務運行的各種狀態信息,異常信息直接顯示到整體部署邏輯架構圖上即可。這樣可以更加可視化的監控到資源當前的運行狀態和異常發生情況。
3. 服務集成架構展示
在最早我們做自研ESB產品的時候,采用Flash實現了一個集成架構的展示效果,但是整體效果并不是很好。而通過這套可視化工具,可以用來實現這種集成架構的效果展示。同時可以展示出兩級架構的集成效果。即可以分層展開效果。
集成架構不需要提前進行設計,而是需要在后臺提取了集成關系后,自動進行拓撲生成和自動化布局。集成架構中的連線可以用來表示當前系統間的接口服務連通性和接口服務調用流量等信息。但是上圖實際上離我們需要的集成架構圖可視化設計仍然有具體,具體見后面集成架構圖設計部分的一些思考。
4. 端到端流程監控可視化設計
基于服務間的集成關系和調用先后順序來實現端到端的流程監控,這個我在博客前面多次提到,也一直在尋找比較好的前端設計工具來做。比如對我們已有的流程平臺流程建模工具前端進行適度改進來支持等。
對于這類需求也可以用前面提到的工具來實現,先進行端到端監控流程圖的設計,然后在進行運行展示。其中最主要的還是在運行態的各類信息,比如運行狀態,數量,是否有異常等是否很容易疊加到已有的設計圖上。只要能夠解決這個問題,那么就能夠很好的應用到端到端流程監控的可視化設計中。
對于集成架構圖的繪制一直是我關注的一個點,也看了類似百度Echart,D3和HighChart等,基本都沒有發現適合用來做類似集成架構圖繪制的工具。同時集成架構圖往往都不是自動繪制,而需要提前進行集成架構的圖形布局設計,布局好后才能夠用JS去繪制。
因此更多我們需要的是一個JS繪圖工具庫,能夠匯總線條,矩陣,圓等基礎圖形形狀即可。我們可以看下一個簡單的集成架構圖,經過設計排版后布局可能如下:
對于這類圖可以看到實際上各類可視化圖表庫并不太容易實現。原來我們采用過Flash來進行集成架構圖的繪制,但是Flash相對偏重不太合適。因此還是需要找一個JS繪圖庫來實現這種簡單的集成架構圖的繪制工作。
基于這個思路我們在網上找了下比較好的一些JS繪制工具庫。
jsPlumb開源流程圖繪制工具庫
那么如果你應該使用它取決于你想用jsPlumb做什么。該框架適用于必須繪制圖表的Web應用程序,例如類似于Visio的應用程序或工作流程設計器等。由于圖表項目和連接的所有參數都是非常精細可控的,因此您可以繪制您可以想到的任何類型的圖表。
該開源庫的GitHub地址為:https://github.com/wangduanduan/jsplumb-chinese-tutorial
在該地址也有詳細的中文使用教程,根據教程的一些截圖可以看到,該工具庫很適合用來繪制我們上面的集成架構圖,因為這種圖本身也就是形狀和線條的一些簡單組合,而且來拖拽功能都不需要。
當然基于該工具庫,我們也可以用來實現更加復雜的集成架構圖,即將兩個業務系統間的所有關鍵集成接口全部以連線的方式表示出來。這種集成架構圖也是無法自動生成,需要首先進行整體部版設計,然后再通過jsPlumb工具庫進行繪制即可。
如果要連接多條線條,需要整個節點作為source或者target, 并且將錨點設置成Continuous,那么錨點就會隨著節點的位置改變而改變自己的位置。這個功能特性可以很方便我進行多線條設置。
注意在這個網址,https://jsplumbtoolkit.com/community/doc/anchors.html, 這個工具庫是存在License費用的,因此如果這個工具庫用于商業用途,按道理會涉及到License的購買問題。
一篇關于該工具庫的使用參考:https://www.cnblogs.com/xcj26/p/9870734.html
另外一個用該工具庫實現的流程設計器和表單設計器: http://formdesign.leipi.org/
付費JS繪制工具庫:GoJS
GoJS是一套基于JavaScript的付費圖形繪制工具庫,地址:https://gojs.net/latest/index.html
這套工具庫有免費版本,也有收費版本,收費版本比jsPlumb工具庫來說就強大了很多,特別是動態Port圖和動態分組圖,這兩個用來繪制我們集成架構圖,應用架構圖等都相當有用。
所有Demo演示地址參考:https://gojs.net/latest/samples/regrouping.html
JointJS工具庫
這個也是常用的繪圖工具庫,地址在:https://www.jointjs.com/
這個庫官方介紹的例子都感覺比較重,而實際其它搜索到的一些使用介紹來看,用于簡單從集成架構圖,流程圖類繪制還是沒有太大問題的?;具€是標準的新建畫板,畫布,然后進行各種圖形的定義和繪制。
jointJS是一個基于svg的圖形化工具庫,在畫布上畫出支持拖動的svg圖形,而且可以導出JSON,也能通過JSON配置導入直接生成圖形。由于這個工具庫是基于SVG的,因此也不太推薦使用。
一篇使用參考:https://segmentfault.com/a/1190000015972176
Quick V 是一套數據可視化大屏展示方案。在大數據時代,Quick V 將數據全面、直觀地呈現在用戶眼前,幫助管理者在面臨業務復雜度的急劇變化時,即刻擁有海量有序的決策支持信息,滿足會議展覽、業務監控、風險預警、地理信息分析等多種業務的展示需求。
參考:http://www.uileader.com/quickui_display.html
大家可以先看下上面這個大屏可視化效果,感覺整體還是做的相當不錯。這個工具本身商用收費,比較好的就是對于我們常見的大屏監控已經固化為各種模板,基本都可以直接使用。
基于百度Echart自己實現可配置的監控大屏
在前面我也談到,實際上對于監控大屏實現,當前我們完全可以采用百度Echart來定制實現,而這篇文章主要想談下如何對監控大屏可視化做到靈活可配置。
首先我們看到監控大屏可視化,實際上跟我們前面談到的自定義報表相當類似,其核心仍然是單面板設計,多面板組合?;谶@個思路我們逐一展開進行描述。
在講自定義報表的時候,我們單面板設計數據集和實際的數據呈現是耦合在一起的,而實際上更好的思路是數據集和數據呈現進行分離?;谶@個思路,逐一展開講關鍵功能點實現。
數據集設計
數據源定義,對于數據源定義,最好也進行獨立,一個報表前端呈現本身也可能涉及到多個數據源。數據集設計,即返回一個二維的數據集合,可以有多列。我們需要通過配置的方式來實現,即首先選擇數據源,然后自定義Sql語句,然后返回具體的數據集對象。在sql過程中我們可以對字段標題名稱等進行轉義。
更加解耦的方法是數據集可以直接選擇具體的WS服務,由服務返回一個二維的數據集對象。這種方式可以進一步實現報表平臺和底層數據庫的解耦。
單面板設計
單面板設計簡單來說就是將前端的呈現方式,究竟是折線圖,餅圖還是雷達圖等,和后端的數據集進行綁定。在這個過程中重點是要確認具體的圖表呈現的一些關鍵配置,包括X,Y軸顯示,圖表名稱,圖例是否顯示等關鍵配置,都需要在單面板設計的是配置完成。
單面板設計完成后,最好提供預覽功能按鈕,可以馬上體驗到單面板展示的效果。
大屏設計
對于大屏設計,實際上里面有幾個關鍵點,首先就是大屏展示需要有一個CSS模板,這個模板決定了所有的單面板圖表的配色風格,包括具體的底色,前端的色系選擇等。選擇模板就是確保最終的大屏展示各個單面板風格能夠完全保持一致。
大屏版面設計,仍然采用標準的Grid布局模式即可,可以看到所有的大屏展示基本都采用Grid布局模式。每個單面板你唯一要確定的就是橫向跨幾行,縱向跨幾列即可。類似上面的圖,我們采用4*4Grid進行布局,中間的地圖展示則是橫向跨3行,縱向跨兩列。
大屏整體的展示動態刷新能力
在以上設計完成后,我們整個大屏展示效果也就出來了。在該大屏設計中我們沒有考慮動態查詢功能。但是大屏監控仍然需要動態進行刷新。因此在設計大屏的時候需要具備動態刷新能力,為了考慮后續具備一定的擴展性,我們需要能夠將關鍵的一些變量參數傳遞到圖表展示中。
最關鍵的參數就是當前時間,當前的時間需要能夠傳遞到每一個數據集Sql中,方便我們根據時間進行數據過濾。同時對于大屏我們需要配置定時刷新頻率,基于該頻率對展示內容進行動態刷新。
前沒有使用過前端java Script插件,所以一直認為很難來著,今天突然在網上搜尋了一波,21種前端java Script插件,我選擇的是Echarts。點擊打開鏈接
ECharts,縮寫來自Enterprise Charts,商業級數據圖表,一個純Javascript的圖表庫,可以流暢的運行在PC和移動設備上,兼容當前絕大部分瀏覽器(IE6/7/8/9/10/11,chrome,firefox,Safari等),底層依賴輕量級的Canvas類庫ZRender,提供直觀,生動,可交互,可高度個性化定制的數據可視化圖表。創新的拖拽重計算、數據視圖、值域漫游等特性大大增強了用戶體驗,賦予了用戶對數據進行挖掘、整合的能力。
支持折線圖(區域圖)、柱狀圖(條狀圖)、散點圖(氣泡圖)、K線圖、餅圖(環形圖)、雷達圖(填充雷達圖)、和弦圖、力導向布局圖、地圖、儀表盤、漏斗圖、事件河流圖等12類圖表,同時提供標題,詳情氣泡、圖例、值域、數據區域、時間軸、工具箱等7個可交互組件,支持多圖表、組件的聯動和混搭展現。
1.創建一個index.html,如下:
[html] view plain copy
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<scriptsrc="echarts.js"></script>
</head>
<body>
<!-- 為ECharts準備一個具備大?。▽捀撸┑腄om -->
<divid="main"style="width: 600px;height:400px;"></div>
<scripttype="text/javascript">
// 基于準備好的dom,初始化echarts實例
var myChart=echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數據
var option={
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
其中需要導入echarts,這個從官網上下,尋找適合的,鏈接在上面。
2.然后通過修改上面一列的屬性,構建圖標,上述圖表如下:
*請認真填寫需求信息,我們會在24小時內與您取得聯系。