ECharts資料圖表使用介紹 超詳細

孤影'Blog發表於2014-12-22
Echarts

【前言】

最近在搗鼓各種外掛各種框架，發現這個ECharts還是比較不錯的，文件也挺全的，還是中文的，給大家推薦一下。

這篇文章是零基礎入門ECharts圖表的教程，先簡單介紹一下吧，可能有人還不知道這個東西。

【簡介】

ECharts，縮寫來自Enterprise Charts，商業級資料圖表，一個純Javascript的圖表庫，可以流暢的執行在PC和移動裝置上，相容當前絕大部分瀏覽器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底層依賴輕量級的Canvas類庫ZRender，提供直觀，生動，可互動，可高度個性化定製的資料視覺化圖表。創新的拖拽重計算、資料檢視、值域漫遊等特性大大增強了使用者體驗，賦予了使用者對資料進行挖掘、整合的能力。

支援折線圖（區域圖）、柱狀圖（條狀圖）、散點圖（氣泡圖）、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，可以看到如下效果：

相關文章