***ECharts圖表入門和最佳實務

標籤：

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開源來自百度商業前端資料視覺效果團隊，基於html5 Canvas，是一個純Javascript圖表庫，提供直觀，生動，可互動，可個人化定製的資料視覺效果圖表。創新的拖拽重計算、資料檢視、範圍漫遊等特性大大增強了使用者體驗，賦予了使用者對資料進行挖掘、整合的能力。

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、如果上面的還有不明白的，參考一下我的本地目錄：

js中有如下的檔案：

其中，src是echarts-2.0.4檔案夾下的src檔案夾，zrender裡面也有一個src檔案夾，是zrender-2.0.4檔案夾下面的src檔案夾。

 

***ECharts圖表入門和最佳實務