echarts初探：瞭解模塊化

時間 2019-11-13

標籤 echarts 初探瞭解模塊化简体版

原文原文鏈接

什麼是echarts？這是官網：http://echarts.baidu.com/javascript

簡單的說就是百度提供的一些畫圖表的庫，用它你能夠簡便的畫出一些你想要的圖表效果。html

雖然蠻好用的，但對於不知道模塊化的新手（好比說我~）感受不是很好入門，我這裏大概梳理一下個人認知吧，但願能幫助到內些想嘗試echarts的人。java

咱們就以echarts首頁的教程爲例（其實人家已經寫的很好了）:http://echarts.baidu.com/doc/start.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="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>

你們能夠看到路徑配置和使用裏面都有」require「，這就是模塊化的東西。echarts爲啥要用模塊化?由於你可能在一個js裏用到多個js。好比你想在一個頁面上顯示多個圖表，柱圖，餅圖，折線圖等等，app

你須要把這些js都加載進來（每種圖的js都是獨立的）。而加載多個js很費時間，模塊化的好處是，當模塊部署完畢之後，能夠用這個工具將多個模塊合併在一個文件中，減小HTTP請求數。並且同一管理echarts

js，更有調理性。dom

其實上面代碼中的兩個」require「是幹啥的已經註釋的很清楚了。其實就是先整體上配一下路徑，而後再根據配的路徑加載須要的js進行使用。模塊化

咱們先來看看第一個require：函數

        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });

首先看這句路徑的設置，你能夠理解爲把那一長串路徑用一個變量」echarts「表明了。設置路徑有利於簡化以後的加載，若是你不設置路徑多是這樣的：

// 加載一堆水果
require(['common/fruits/apple', 'common/fruits/orange', 'common/fruits/grape', 'common/fruits/pears'], function(Apple, Orange, Grape, Pears){
  // do sth
});

你設置路徑以後就是這樣的:

requirejs.config({
  paths: {
    fruits: 'common/fruits'
  }
});

// 加載一堆水果
require(['fruits/apple', 'fruits/orange', 'fruits/grape', 'fruits/pears'], function(Apple, Orange, Grape, Pears){
  // do sth
});

你還能夠設置一個baseUrl來限定這些路徑的先前路徑（好比你這些js都放在一個叫」js「的文件夾下面）

requirejs.config({
  baseUrl: 'js',
  paths: {
    fruits: 'common/fruits'
  }
});

明白了路徑的設置之後咱們再來看第二段,我簡寫一下：

        require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱狀圖就加載bar模塊，按需加載
            ],
            function (ec){
                        //do sth
            }) ;

這段代碼就是加載js，而後在回調函數中使用它們。因爲咱們剛纔已經設置了路徑，因此這裏加載的兩個js的路徑實際上是：

http://echarts.baidu.com/build/dist/echarts.js(我試了改爲'echarts/echarts'也同樣，至於爲何加載兩遍我以爲是第一遍須要require相關的支持，第二遍就是回調函數裏要用到）

http://echarts.baidu.com/build/dist/chart/bar.js

這裏的js後綴是會幫你自動補上的，你本身加了反而會出錯，它會覺得你不想使用設置的路徑，以後的回調函數的參數就是你加載的js模塊。

回調函數中 var myChart = ec.init(document.getElementById('main')); 這句就是對echarts對象的實例化。
option你能夠理解爲爲加載的圖表設置參數，最後用 myChart.setOption(option); 將實例化的對象和設置的參數綁定。

其實echarts一些簡單的使用就是一下這麼個流程：

1.echarts單文件引入

2.用require.config配置路徑

3.用require加載你要用的js（按需加載）

在回調函數中:

　　4.實例化echarts對象

　　5.依照本身的數據給option設置參數

　　6.將echarts對象和option綁定，加載數據

大功告成。但其實模塊不是光有require的，require只是使用，還須要define來定義模塊才行，你能夠看一下echarts的那些圖表庫源碼，都是用define包裹住的。

想要了解更多模塊化能夠看 requireJS官網：http://www.requirejs.cn/

還有就是要想下載echarts用的記得搭服務器，本地的請求是不安全的。