ECharts調(diào)用筆記教學(xué)文稿

1、Good is good, but better carries it.精益求精，善益求善。ECharts調(diào)用筆記-三種方式引入文件模塊化包引入require.config(packages:name:echarts,location:././src,main:echarts,name:zrender,location:./././zrender/src,/zrender與echarts在同一級目錄main:zrender);注：由于echarts依賴底層zrender，你需要同時下載zrender到本地模塊化單文件引入(推薦).require.config(paths:echarts:./j

2、s/dist);require(echarts,echarts/chart/line,/按需加載所需圖表，如需動態(tài)類型切換功能，別忘了同時加載相應(yīng)圖表echarts/chart/bar,function(ec)varmyChart=ec.init(document.getElementById(main);varoption=.myChart.setOption(option););dist（文件夾）:經(jīng)過合并、壓縮的單文件echarts.js:這是包含AMD加載器的echarts主文件，需要通過script最先引入chart（文件夾）:echarts-optimizer通過依賴關(guān)系分析同時去

3、除與echarts.js的重復(fù)模塊后為echarts的每一個圖表類型單獨打包生成一個獨立文件，根據(jù)應(yīng)用需求可實現(xiàn)圖表類型按需加載echarts-line.js:折線圖（如需折柱動態(tài)類型切換，require時還需要echarts/chart/bar）echarts-bar.js:柱形圖（如需折柱動態(tài)類型切換，require時還需要echarts/chart/line）echarts-scatter.js:散點圖echarts-k.js:K線圖echarts-pie.js:餅圖（如需餅漏斗圖動態(tài)類型切換，require時還需要echarts/chart/funnel）echarts-radar.j

4、s:雷達圖echarts-map.js:地圖echarts-force.js:力導(dǎo)向布局圖（如需力導(dǎo)和弦動態(tài)類型切換，require時還需要echarts/chart/chord）echarts-chord.js:和弦圖（如需力導(dǎo)和弦動態(tài)類型切換，require時還需要echarts/chart/force）echarts-funnel.js:漏斗圖（如需餅漏斗圖動態(tài)類型切換，require時還需要echarts/chart/pie）echarts-gauge.js:儀表盤echarts-eventRiver.js:事件河流圖source（文件夾）:經(jīng)過合并，但并沒有壓縮的單文件，內(nèi)容同dis

5、t，可用于調(diào)試注：動態(tài)加載echarts及所需圖表然后在回調(diào)函數(shù)中開始使用（容我羅嗦一句，當(dāng)你確保同一頁面已經(jīng)加載過echarts，再使用時直接require(echarts).init(dom)就行）標簽式單文件引入.varmyChart=echarts.init(document.getElementById(main);varoption=.myChart.setOption(option);注：標簽式引入環(huán)境中，常用模塊的引用可通過命名空間直取，同模塊化下的路徑結(jié)構(gòu)，如：echarts.config=require(echarts/config)，zrender.tool.color=

6、require(zrender/tool/color)dist/echarts-all.js:經(jīng)過壓縮，全圖表，包含world，china以及34個省市級地圖數(shù)據(jù)source/echarts-all.js:未壓縮，全圖表，包含world，china以及34個省市級地圖數(shù)據(jù)，可用于調(diào)試參數(shù)說明timeline：時間軸，每個圖表最多僅有一個時間軸控件title:標題，每個圖表最多僅有一個標題控件，每個標題控件可設(shè)主副標題toolbox:工具箱，每個圖表最多僅有一個工具箱tooltip:提示框，鼠標懸浮交互時的信息提示觸發(fā)類型：item觸發(fā)axis觸發(fā)legend:圖例，每個圖表最多僅有一個圖例da

7、taRange:值域選擇，每個圖表最多僅有一個值域控件dataZoom:數(shù)據(jù)區(qū)域縮放。與toolbox.feature.dataZoom同步，僅對直角坐標系圖表有效roamController:縮放漫游組件，僅對地圖有效grid:直角坐標系內(nèi)繪圖網(wǎng)格axis:坐標軸有三種類型，類目型、數(shù)值型和時間型，他們的區(qū)別在于：類目型：需要指定類目列表，坐標軸內(nèi)有且僅有這些指定類目坐標數(shù)值型：需要指定數(shù)值區(qū)間，不指定時則自定計算數(shù)值范圍，坐標軸內(nèi)包含數(shù)值區(qū)間內(nèi)容全部坐標時間型：時間型坐標軸用法同數(shù)值型，只是目標處理和格式化顯示時會自動轉(zhuǎn)變?yōu)闀r間，并且隨著時間跨度的不同自動切換需要顯示的時間粒度series:數(shù)據(jù)系列，一個圖表可能包含多個系列，每一個系列可能包含多個數(shù)據(jù)圖表類型說明圖表類型圖表庫標準包含單圖表類型的標準圖表以及多圖表類型混合的混搭圖表：單圖表類型：line折線圖堆積折線圖區(qū)域圖堆積區(qū)域圖單圖表類型：bar柱形圖堆積柱形圖條形圖堆積條形圖單圖表類型：scatter散點圖氣泡圖單圖表類型：kK線圖單圖表類型：pie餅圖圓環(huán)圖南丁格爾玫瑰圖單圖表類型：radar雷達圖填充雷達圖單圖表類型：chord和弦圖單圖表類型：force力導(dǎo)向布局圖。單圖表類型：ma