Echarts入門學(xué)習(xí)

1、主講人：張興玉2017年3月23日3ECharts，一個(gè)純 Javascript 的圖表庫，可以流暢的運(yùn)行在 PC 和移動(dòng)設(shè)備上，兼容當(dāng)前絕大部分瀏覽器（IE8/9/10/11，Chrome，F(xiàn)irefox，Safari等），底層依賴輕量級的 Canvas 類庫 ZRender，提供直觀，生動(dòng)，可交互，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。ECharts 3 中更是加入了更多豐富的交互功能以及更多的可視化效果，并且對移動(dòng)端做了深度的優(yōu)化。常規(guī)折線圖柱狀圖散點(diǎn)圖餅圖K線圖統(tǒng)計(jì)盒形圖地理數(shù)據(jù)地圖熱力圖線圖BI商業(yè)智能漏斗圖儀表盤關(guān)系數(shù)據(jù)關(guān)系圖treemap多維數(shù)據(jù)可視化的平行坐標(biāo)1、Echarts：一

2、個(gè)純 Javascript 的圖表庫，而且ECharts 3 開始不再強(qiáng)制使用 AMD 的方式按需引入，代碼里也不再內(nèi)置 AMD 加載器。只需要像普通的 JavaScript 庫一樣用 script 標(biāo)簽引入。官方下載界面 http:/ 。2、在繪圖前我們需要為 ECharts 準(zhǔn)備一個(gè)具備高寬的 DOM 容器。3、然后就可以通過 echarts.init 方法初始化一個(gè) echarts 實(shí)例并通過 setOption 方法生成一個(gè)簡單的柱狀圖（如下圖），右側(cè)是完整代碼。簡單介紹一下常用配置項(xiàng)（一）title（標(biāo)題）標(biāo)題）toolbox（工具箱）工具箱）簡單介紹一下常用配置項(xiàng)（二）toolti

3、p（提示）提示）legend（圖例）圖例）dataZoom（數(shù)據(jù)區(qū)域縮放）（數(shù)據(jù)區(qū)域縮放）簡單介紹一下常用配置項(xiàng)（三）dataRange（值域）值域）grid（繪圖網(wǎng)格）（繪圖網(wǎng)格）axis（坐標(biāo)軸）坐標(biāo)軸）121、D3.js Data-Driven Documents 現(xiàn)在提到圖表的時(shí)候，我們第一個(gè)想到的就是 D3.js。作為一個(gè)開源項(xiàng)目，D3.js提供了很多其他現(xiàn)有庫所沒有的強(qiáng)大的功能。D3.js 圖表使用HTML+SVG+CSS渲染。D3.js不支持舊版本的瀏覽器。132、 Google Charts Google Charts 創(chuàng) 建圖表更加的簡單。它提供了很多內(nèi)置的圖表，如：條形圖、

4、日歷圖、餅圖等等。Google Charts 還提供了許多定制選項(xiàng)讓你改變圖表的外觀。它通過HTML5/SVG渲染來支持跨瀏覽器兼容性，并且可以跨平臺(tái)移植到iPads、iPhones、Android。它還包含支持舊版本IE的VML。143、ChartJS ChartJS 為圖表提供了漂亮的平面設(shè)計(jì)風(fēng)格。它通過HTML5的canvas屬性渲染。支持舊版本的瀏覽器如IE7/8。ChartJS 默認(rèn)是響應(yīng)式的，它良好的適應(yīng)手機(jī)端和平板端。154、Highcharts JS Highcharts JS 是另一款非常流行的圖形圖表庫。預(yù)置了很多炫酷的動(dòng)畫效果，是你的網(wǎng)站足夠吸引眼球。跟其他庫一樣，它提供了內(nèi)置的圖形，如：spline, area, areaspline, column, bar, pie, scatter等。 使用Highcharts JS最大的優(yōu)勢是它兼容像IE6這樣的舊版本瀏覽器。標(biāo)準(zhǔn)的瀏覽器使用SVG渲染，而舊版本的IE瀏覽器則使用VML。 個(gè)人免費(fèi)使用，而商業(yè)用戶則需要購買許可證。n3-chartsChartist.jsEmber ChartsSmoothie ChartsCha