ECharts數據圖表系統？ 5分鐘上手！

【ECharts簡介】

ECharts開源來自百度商業前端數據可視化團隊，基于html5 Canvas，是一個純Javascript圖表庫，提供直觀，生動，可交互，可個性化定制的數據可視化圖表。創新的拖拽重計算、數據視圖、值域漫游等特性大大增強了用戶體驗，賦予了用戶對數據進行挖掘、整合的能力。

支持折線圖（區域圖）、柱狀圖（條狀圖）、散點圖（氣泡圖）、K線圖、餅圖（環形圖）、雷達圖（填充雷達圖）、和弦圖、力導向布局圖、地圖、儀表盤、漏斗圖、事件河流圖等12類圖表，同時提供標題，詳情氣泡、圖例、值域、數據區域、時間軸、工具箱等7個可交互組件，支持多圖表、組件的聯動和混搭展現。

好了，咱們重點不是介紹哈，后面我會詳細講解這個報表系統的使用，這里就不做過多的描述了，下面開始進入正題：“5分鐘上手寫ECharts的第一個圖表”。

【方法一：模塊化單文件引入(推薦)】

1. 新建一個echarts.html文件，為ECharts準備一個具備大小(寬高)的Dom：

<!DOCTYPE html>
<head><meta charset="utf-8"><title>ECharts - 孤影'Blog</title>
</head><body><!-- 為ECharts準備一個具備大小（寬高）的Dom --><div id="main" style="height:400px"></div>
</body>

2. 新建<script>標簽引入模塊化單文件echarts.js：

<!DOCTYPE html>
<head><meta charset="utf-8"><title>ECharts - 孤影'Blog</title>
</head>
<body><!-- 為ECharts準備一個具備大小（寬高）的Dom --><div id="main" style="height:400px"></div><!-- ECharts單文件引入 --><script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
</body>

3. 新建<script>標簽中為模塊加載器配置echarts和所需圖表的路徑(相對路徑為從當前頁面鏈接到echarts.js)：

<!DOCTYPE html>
<head><meta charset="utf-8"><title>ECharts - 孤影'Blog</title>
</head>
<body><!-- 為ECharts準備一個具備大小（寬高）的Dom --><div id="main" style="height:400px"></div><!-- ECharts單文件引入 --><script src="http://echarts.baidu.com/build/dist/echarts.js"></script><script type="text/javascript">// 路徑配置require.config({paths: {echarts: 'http://echarts.baidu.com/build/dist'
            }});</script>
</body>

4. <script>標簽內動態加載echarts和所需圖表，回調函數中可以初始化圖表并驅動圖表的生成：

<!DOCTYPE html>
<head><meta charset="utf-8"><title>ECharts - 孤影'Blog</title>
</head>
<body><!-- 為ECharts準備一個具備大小（寬高）的Dom --><div id="main" style="height:400px"></div><!-- ECharts單文件引入 --><script src="http://echarts.baidu.com/build/dist/echarts.js"></script><script type="text/javascript">// 路徑配置require.config({paths: {echarts: 'http://echarts.baidu.com/build/dist'
            }});// 使用require(['echarts','echarts/chart/bar' // 使用柱狀圖就加載bar模塊，按需加載],function (ec) {// 基于準備好的dom，初始化echarts圖表var myChart = ec.init(document.getElementById('main')); var option = {tooltip: {show: true},legend: {data:['銷量']},xAxis : [{type : 'category',data : ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]}],yAxis : [{type : 'value'}],series : [{"name":"銷量","type":"bar","data":[5, 20, 40, 10, 10, 20]}]};// 為echarts對象加載數據 myChart.setOption(option); });</script>
</body>

5. 瀏覽器中打開ecarts.html，就可以看到以下效果：

【方法二：標簽式單文件引入】

1. 新建一個echarts.html文件，為ECharts準備一個具備大小(寬高)的Dom。

<!DOCTYPE html>
<head><meta charset="utf-8"><title>ECharts - 孤影Blog</title>
</head>
<body><!-- 為ECharts準備一個具備大小（寬高）的Dom --><div id="main" style="height:400px"></div>
</body>

2. 新建<script>標簽引入echart-all.js。

<!DOCTYPE html>
<head><meta charset="utf-8"><title>ECharts - 孤影'Blog</title>
</head>
<body><!-- 為ECharts準備一個具備大小（寬高）的Dom --><div id="main" style="height:400px"></div><!-- ECharts單文件引入 --><script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
</body>

3. 新建<script>，使用全局變量echarts初始化圖表并驅動圖表的生成。

<!DOCTYPE html>
<head><meta charset="utf-8"><title>ECharts - 孤影'Blog</title>
</head>
<body><!-- 為ECharts準備一個具備大小（寬高）的Dom --><div id="main" style="height:400px"></div><!-- ECharts單文件引入 --><script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script><script type="text/javascript">// 基于準備好的dom，初始化echarts圖表var myChart = echarts.init(document.getElementById('main')); var option = {tooltip: {show: true},legend: {data:['銷量']},xAxis : [{type : 'category',data : ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]}],yAxis : [{type : 'value'}],series : [{"name":"銷量","type":"bar","data":[5, 20, 40, 10, 10, 20]}]};// 為echarts對象加載數據 myChart.setOption(option); </script>
</body>

4. 瀏覽器中打開echarts.html，可以看到如下效果：

via: http://www.cnblogs.com/LonelyShadow/p/4175071.html

ECharts簡介

http://www.phperz.com/article/14/1017/29557.html

Echarts 首頁：http://echarts.baidu.com/index.html

特性：http://echarts.baidu.com/doc/feature.html

ECharts 底層依賴于 Html5 的輕量級的Canvas類庫ZRender ，這也是它的效果這么絢麗的原因。它與 js charts類似，不依賴其他 js 類庫，相比之下 Highcharts還要依賴JQuery等類庫。不過，ECharts也不是什么缺點都沒有的，在線演示平臺、文檔，

初學者可能會被ECharts那個帶你入門的那2個示例弄暈，這里來一個個解釋：

1、AMD規范的加載器——esl.js，這是什么？

簡單來說，AMD規范就是異步方式加載模塊的一種方式，避免因為模塊加載過慢而導致瀏覽器“假死”。

2、我們先來看一下echart的大概的包：　

echarts.js : 經過壓縮，包含除地圖外的全部圖表
echarts-original.js : 未壓縮，可用于調試，包含除地圖外的全部圖表
echarts-map.js : 經過壓縮，全圖表，包含world，china以及34個省市級地圖數據
echarts-original-map.js : 未壓縮，可用于調試，全圖表，包含world，china以及34個省市級地圖數據

看得出，這種分類非常有意義。

3、echarts更規范的一點，那就是模塊化加載，需要哪個部分就是用哪個部分。

關于Echarts的那個入門圖表，我想很多新手跟我一樣的迷惑，require和require.config這個兩個公共方法到底什么來的？

答：AMD規范的加載器——esl.js的公共方法。（如有錯誤，請指正。）

4、require.config的作用是什么？

答：為模塊加載器配置echarts的路徑，從當前頁面鏈接到echarts.js，定義所需的圖表路徑。一切盡在echarts-2.0.4文件夾下的src文件夾中。

5、解釋一下require方法？

答：require方法有2個參數。

第一個參數為一個數組，數組元素是需要加載的echarts模塊，需要哪個就加載哪個。（經本人測試，這個數組傳入一個空數組都是可以的 !- -）莫非，傳入不正確，會加載全部文件到內存，傳入正確就加載部分模塊到內存？求大神解答！

第二個參數為一個帶一個參數的方法：function (ec){}, 這個ec對象就是echarts對象了。

OK，基本解釋完了。可能初學者看了Eharts入門實例還是不太理解那Echarts3種導入方式的用法。（入門示例只有2種——標簽式單文件引入和模塊化單文件引入）

因為入門實例里，js文件指向的是百度服務器上的資源，而我們一般開發，js資源都是放在本地的。

6、來看一下，本地創建3種Echarts導入的例子，下面是那3個示例文件的源碼（官網Demo粗略修改而成）：

（1）、標簽式單文件引入.html

<!DOCTYPE html>
<head><meta charset="utf-8"><title>ECharts</title>
</head>
<body><!-- 為ECharts準備一個具備大小（寬高）的Dom --><div id="main" style="height:400px"></div><!-- ECharts單文件引入 --><script src="js/echarts.js"></script><script type="text/javascript">// 基于準備好的dom，初始化echarts圖表var myChart = echarts.init(document.getElementById('main')); var option = {tooltip: {show: true},legend: {data:['銷量']},xAxis : [{type : 'category',data : ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]}],yAxis : [{type : 'value'}],series : [{"name":"銷量","type":"bar","data":[5, 20, 40, 10, 10, 20]}]};// 為echarts對象加載數據 myChart.setOption(option); </script>
</body>

（2）、模塊化包引入.html，這個就需要用到2個src文件。

<!DOCTYPE html>
<head><meta charset="utf-8"><title>ECharts</title><!--從當前頁面，引入模塊加載器esl.js--><script src="js/esl.js"></script>
</head>
<body><!-- 為ECharts準備一個具備大小（寬高）的Dom --><div id="main" style="height:400px"></div><script type="text/javascript">// 為模塊加載器配置echarts的路徑，從當前頁面鏈接到echarts.js，定義所需的圖表路徑require.config({packages: [{name: 'echarts',location: 'js/src',      main: 'echarts'},{name: 'zrender',location: 'js/zrender/src', main: 'zrender'}]});// 使用require([],function (ec) {// 基于準備好的dom，初始化echarts圖表var myChart = ec.init(document.getElementById('main')); var option = {tooltip: {show: true},legend: {data:['銷量']},xAxis : [{type : 'category',data : ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]}],yAxis : [{type : 'value'}],series : [{"name":"銷量","type":"bar","data":[5, 20, 40, 10, 10, 20]}]};// 為echarts對象加載數據 myChart.setOption(option); });</script>
</body>

（3）、模塊化單文件引入.html

<!DOCTYPE html>
<head><meta charset="utf-8"><title>ECharts</title><!--從當前頁面，引入模塊加載器esl.js--><script src="js/esl.js"></script>
</head>
<body><!-- 為ECharts準備一個具備大小（寬高）的Dom --><div id="main" style="height:400px"></div><script type="text/javascript">// 為模塊加載器配置echarts的路徑，從當前頁面鏈接到echarts.js，定義所需的圖表路徑require.config({paths:{ 'echarts' : './js/echarts','echarts/chart/bar' : './js/echarts'}});// 使用require(['echarts','echarts/chart/bar' // 使用柱狀圖就加載bar模塊，按需加載],function (ec) {// 基于準備好的dom，初始化echarts圖表var myChart = ec.init(document.getElementById('main')); var option = {tooltip: {show: true},legend: {data:['銷量']},xAxis : [{type : 'category',data : ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]}],yAxis : [{type : 'value'}],series : [{"name":"銷量","type":"bar","data":[5, 20, 40, 10, 10, 20]}]};// 為echarts對象加載數據 myChart.setOption(option); });</script>
</body>

2、如果上面的還有不明白的，參考一下我的本地目錄：