1、Echarts實(shí)踐5分鐘上手寫ECharts的第一個(gè)圖表前端工程之模塊化1.模塊化是一種處理復(fù)雜系統(tǒng)分解成為更好的可管理模塊的方式，它可以把系統(tǒng)代碼劃分為一系列職責(zé)單一，高度解耦且可替換的模塊，系統(tǒng)中某一部分的變化將如何影響其它部分就會(huì)變得顯而易見，系統(tǒng)的可維護(hù)性更加簡(jiǎn)單易得。2.前端開發(fā)領(lǐng)域(JavaScript、CSS、Template)并沒有為開發(fā)者們提供以一種簡(jiǎn)潔、有條理地的方式來管理模塊的方法。3.CommonJS(致力于設(shè)計(jì)、規(guī)劃并標(biāo)準(zhǔn)化 JavaScript API)的誕生開啟了“ JavaScript 模塊化的時(shí)代”。CommonJS 的模塊提案為在服務(wù)器端的 JavaScri

2、pt 模塊化做出了很大的貢獻(xiàn)，但是在瀏覽器下的 JavaScript 模塊應(yīng)用很有限。4.隨之而來又誕生了其它前端領(lǐng)域的模塊化方案，像 requireJS、SeaJS 等，然而這些模塊化方案并不是十分適用 ，并沒有從根本上解決模塊化的問題。RequireJS 與 SeaJSRequireJSAMD規(guī)范（異步模塊定義）依賴提前加載requirejs.config(baseUrl: js/lib,paths: app: ./app);requirejs(jquery, canvas, app/sub,function ($, canvas, sub) );SeaJSCMD規(guī)范（通用模塊定義）依賴懶

3、加載seajs.config( base: ./sea-modules/, alias: jquery: jquery/jquery/1.10.1/jquery.js )seajs.use(./static/hello/src/main)模塊化單文件引入1.新建新建一個(gè)一個(gè)echarts.html文件，為文件，為ECharts準(zhǔn)備一個(gè)具備大小（寬高）的準(zhǔn)備一個(gè)具備大小（寬高）的Dom。2.新建新建標(biāo)簽引入模塊化單文件標(biāo)簽引入模塊化單文件echarts.js。3.新建新建標(biāo)簽中為模塊加載器配置標(biāo)簽中為模塊加載器配置echarts和所需圖表的路徑（相對(duì)路徑為和所需圖表的路徑（相對(duì)路徑為從當(dāng)前頁(yè)面鏈

4、接到從當(dāng)前頁(yè)面鏈接到echarts.js），引入圖表文件見），引入圖表文件見引入引入ECharts2 。4.標(biāo)簽內(nèi)動(dòng)態(tài)加載標(biāo)簽內(nèi)動(dòng)態(tài)加載echarts和所需圖表，回調(diào)函數(shù)中可以初始化圖表并驅(qū)和所需圖表，回調(diào)函數(shù)中可以初始化圖表并驅(qū)動(dòng)圖表的生成，動(dòng)圖表的生成，option見見API & Doc5.瀏覽器中打開瀏覽器中打開echarts.html，就可，就可看到效果看到效果新建一個(gè)新建一個(gè)echarts.html文件，為文件，為ECharts準(zhǔn)備一個(gè)具備大小（寬高）的準(zhǔn)備一個(gè)具備大小（寬高）的Dom。 ECharts 新建新建標(biāo)簽引入模塊化單文件標(biāo)簽引入模塊化單文件echarts.js E

5、Charts 新建新建標(biāo)簽中為模塊加載器配置標(biāo)簽中為模塊加載器配置echarts和所需圖表的路徑和所需圖表的路徑 ECharts / 路徑配置 require.config( paths: echarts: http:/ ); 標(biāo)簽內(nèi)動(dòng)態(tài)加載標(biāo)簽內(nèi)動(dòng)態(tài)加載echarts和所需圖表，回調(diào)函數(shù)中可以初始化圖表并驅(qū)動(dòng)圖表的生成和所需圖表，回調(diào)函數(shù)中可以初始化圖表并驅(qū)動(dòng)圖表的生成 / 路徑配置 require.config(paths: echarts: http:/ ); / 使用 require(echarts, echarts/chart/bar / 使用柱狀圖就加載bar模塊，按需加載, function (ec) / 基于準(zhǔn)備好的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, 2