***ECharts图表入门和最佳实践
ECharts數(shù)據(jù)圖表系統(tǒng)？ 5分鐘上手！
【ECharts簡(jiǎn)介】
ECharts開(kāi)源來(lái)自百度商業(yè)前端數(shù)據(jù)可視化團(tuán)隊(duì)，基于html5 Canvas，是一個(gè)純Javascript圖表庫(kù)，提供直觀，生動(dòng)，可交互，可個(gè)性化定制的數(shù)據(jù)可視化圖表。創(chuàng)新的拖拽重計(jì)算、數(shù)據(jù)視圖、值域漫游等特性大大增強(qiáng)了用戶體驗(yàn)，賦予了用戶對(duì)數(shù)據(jù)進(jìn)行挖掘、整合的能力。
支持折線圖（區(qū)域圖）、柱狀圖（條狀圖）、散點(diǎn)圖（氣泡圖）、K線圖、餅圖（環(huán)形圖）、雷達(dá)圖（填充雷達(dá)圖）、和弦圖、力導(dǎo)向布局圖、地圖、儀 表盤(pán)、漏斗圖、事件河流圖等12類圖表，同時(shí)提供標(biāo)題，詳情氣泡、圖例、值域、數(shù)據(jù)區(qū)域、時(shí)間軸、工具箱等7個(gè)可交互組件，支持多圖表、組件的聯(lián)動(dòng)和混搭 展現(xiàn)。
好了，咱們重點(diǎn)不是介紹哈，后面我會(huì)詳細(xì)講解這個(gè)報(bào)表系統(tǒng)的使用，這里就不做過(guò)多的描述了，下面開(kāi)始進(jìn)入正題：“5分鐘上手寫(xiě)ECharts的第一個(gè)圖表”。
【方法一：模塊化單文件引入(推薦)】
1. 新建一個(gè)echarts.html文件，為ECharts準(zhǔn)備一個(gè)具備大小(寬高)的Dom：
<!DOCTYPE html> <head><meta charset="utf-8"><title>ECharts - 孤影'Blog</title> </head><body><!-- 為ECharts準(zhǔn)備一個(gè)具備大小（寬高）的Dom --><div id="main" style="height:400px"></div> </body>?
2. 新建<script>標(biāo)簽引入模塊化單文件echarts.js：
<!DOCTYPE html> <head><meta charset="utf-8"><title>ECharts - 孤影'Blog</title> </head> <body><!-- 為ECharts準(zhǔn)備一個(gè)具備大小（寬高）的Dom --><div id="main" style="height:400px"></div><!-- ECharts單文件引入 --><script src="http://echarts.baidu.com/build/dist/echarts.js"></script> </body>?
?
3. 新建<script>標(biāo)簽中為模塊加載器配置echarts和所需圖表的路徑(相對(duì)路徑為從當(dāng)前頁(yè)面鏈接到echarts.js)：
?
<!DOCTYPE html> <head><meta charset="utf-8"><title>ECharts - 孤影'Blog</title> </head> <body><!-- 為ECharts準(zhǔn)備一個(gè)具備大小（寬高）的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>標(biāo)簽內(nèi)動(dòng)態(tài)加載echarts和所需圖表，回調(diào)函數(shù)中可以初始化圖表并驅(qū)動(dòng)圖表的生成：
<!DOCTYPE html> <head><meta charset="utf-8"><title>ECharts - 孤影'Blog</title> </head> <body><!-- 為ECharts準(zhǔn)備一個(gè)具備大小（寬高）的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) {// 基于準(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, 20]}]};// 為echarts對(duì)象加載數(shù)據(jù) myChart.setOption(option); });</script> </body>?
5. 瀏覽器中打開(kāi)ecarts.html，就可以看到以下效果：
【方法二：標(biāo)簽式單文件引入】
1. 新建一個(gè)echarts.html文件，為ECharts準(zhǔn)備一個(gè)具備大小(寬高)的Dom。
<!DOCTYPE html> <head><meta charset="utf-8"><title>ECharts - 孤影Blog</title> </head> <body><!-- 為ECharts準(zhǔn)備一個(gè)具備大小（寬高）的Dom --><div id="main" style="height:400px"></div> </body>?
2. 新建<script>標(biāo)簽引入echart-all.js。
<!DOCTYPE html> <head><meta charset="utf-8"><title>ECharts - 孤影'Blog</title> </head> <body><!-- 為ECharts準(zhǔn)備一個(gè)具備大小（寬高）的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初始化圖表并驅(qū)動(dòng)圖表的生成。
<!DOCTYPE html> <head><meta charset="utf-8"><title>ECharts - 孤影'Blog</title> </head> <body><!-- 為ECharts準(zhǔn)備一個(gè)具備大小（寬高）的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">// 基于準(zhǔn)備好的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對(duì)象加載數(shù)據(jù) myChart.setOption(option); </script> </body>?
4. 瀏覽器中打開(kāi)echarts.html，可以看到如下效果：
via: http://www.cnblogs.com/LonelyShadow/p/4175071.html
?
ECharts簡(jiǎn)介
http://www.phperz.com/article/14/1017/29557.html
ECharts開(kāi)源來(lái)自百度商業(yè)前端數(shù)據(jù)可視化團(tuán)隊(duì)，基于html5 Canvas，是一個(gè)純Javascript圖表庫(kù)，提供直觀，生動(dòng)，可交互，可個(gè)性化定制的數(shù)據(jù)可視化圖表。創(chuàng)新的拖拽重計(jì)算、數(shù)據(jù)視圖、值域漫游等特性大大增強(qiáng)了用戶體驗(yàn)，賦予了用戶對(duì)數(shù)據(jù)進(jìn)行挖掘、整合的能力。
Echarts 首頁(yè)：http://echarts.baidu.com/index.html
特性：http://echarts.baidu.com/doc/feature.html
ECharts 底層依賴于 Html5 的輕量級(jí)的Canvas類庫(kù)ZRender ，這也是它的效果這么絢麗的原因。它與 js charts類似，不依賴其他 js 類庫(kù)，相比之下 Highcharts還要依賴JQuery等類庫(kù)。不過(guò)，ECharts也不是什么缺點(diǎn)都沒(méi)有的，在線演示平臺(tái)、文檔，
初學(xué)者可能會(huì)被ECharts那個(gè)帶你入門(mén)的那2個(gè)示例弄暈，這里來(lái)一個(gè)個(gè)解釋：
1、AMD規(guī)范的加載器——esl.js，這是什么？
簡(jiǎn)單來(lái)說(shuō)，AMD規(guī)范就是異步方式加載模塊的一種方式，避免因?yàn)槟K加載過(guò)慢而導(dǎo)致瀏覽器“假死”。
2、我們先來(lái)看一下echart的大概的包：
- echarts.js : 經(jīng)過(guò)壓縮，包含除地圖外的全部圖表
- echarts-original.js : 未壓縮，可用于調(diào)試，包含除地圖外的全部圖表
- echarts-map.js : 經(jīng)過(guò)壓縮，全圖表，包含world，china以及34個(gè)省市級(jí)地圖數(shù)據(jù)
- echarts-original-map.js : 未壓縮，可用于調(diào)試，全圖表，包含world，china以及34個(gè)省市級(jí)地圖數(shù)據(jù)
看得出，這種分類非常有意義。
3、echarts更規(guī)范的一點(diǎn)，那就是模塊化加載，需要哪個(gè)部分就是用哪個(gè)部分。
關(guān)于Echarts的那個(gè)入門(mén)圖表，我想很多新手跟我一樣的迷惑，require和require.config這個(gè)兩個(gè)公共方法到底什么來(lái)的？
答：AMD規(guī)范的加載器——esl.js的公共方法。（如有錯(cuò)誤，請(qǐng)指正。）
4、require.config的作用是什么？
答：為模塊加載器配置echarts的路徑，從當(dāng)前頁(yè)面鏈接到echarts.js，定義所需的圖表路徑。一切盡在echarts-2.0.4文件夾下的src文件夾中。
5、解釋一下require方法？
答：require方法有2個(gè)參數(shù)。
第一個(gè)參數(shù)為一個(gè)數(shù)組，數(shù)組元素是需要加載的echarts模塊，需要哪個(gè)就加載哪個(gè)。（經(jīng)本人測(cè)試，這個(gè)數(shù)組傳入一個(gè)空數(shù)組都是可以的 !- -）莫非，傳入不正確，會(huì)加載全部文件到內(nèi)存，傳入正確就加載部分模塊到內(nèi)存？求大神解答！
第二個(gè)參數(shù)為一個(gè)帶一個(gè)參數(shù)的方法：function (ec){}, 這個(gè)ec對(duì)象就是echarts對(duì)象了。
OK，基本解釋完了。可能初學(xué)者看了Eharts入門(mén)實(shí)例還是不太理解那Echarts3種導(dǎo)入方式的用法。（入門(mén)示例只有2種——標(biāo)簽式單文件引入和模塊化單文件引入）
因?yàn)槿腴T(mén)實(shí)例里，js文件指向的是百度服務(wù)器上的資源，而我們一般開(kāi)發(fā)，js資源都是放在本地的。
6、來(lái)看一下，本地創(chuàng)建3種Echarts導(dǎo)入的例子，下面是那3個(gè)示例文件的源碼（官網(wǎng)Demo粗略修改而成）：
（1）、標(biāo)簽式單文件引入.html
<!DOCTYPE html> <head><meta charset="utf-8"><title>ECharts</title> </head> <body><!-- 為ECharts準(zhǔn)備一個(gè)具備大小（寬高）的Dom --><div id="main" style="height:400px"></div><!-- ECharts單文件引入 --><script src="js/echarts.js"></script><script type="text/javascript">// 基于準(zhǔn)備好的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對(duì)象加載數(shù)據(jù) myChart.setOption(option); </script> </body>（2）、模塊化包引入.html，這個(gè)就需要用到2個(gè)src文件。
<!DOCTYPE html> <head><meta charset="utf-8"><title>ECharts</title><!--從當(dāng)前頁(yè)面，引入模塊加載器esl.js--><script src="js/esl.js"></script> </head> <body><!-- 為ECharts準(zhǔn)備一個(gè)具備大小（寬高）的Dom --><div id="main" style="height:400px"></div><script type="text/javascript">// 為模塊加載器配置echarts的路徑，從當(dāng)前頁(yè)面鏈接到echarts.js，定義所需的圖表路徑require.config({packages: [{name: 'echarts',location: 'js/src', main: 'echarts'},{name: 'zrender',location: 'js/zrender/src', main: 'zrender'}]});// 使用require([],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, 20]}]};// 為echarts對(duì)象加載數(shù)據(jù) myChart.setOption(option); });</script> </body>（3）、模塊化單文件引入.html
<!DOCTYPE html> <head><meta charset="utf-8"><title>ECharts</title><!--從當(dāng)前頁(yè)面，引入模塊加載器esl.js--><script src="js/esl.js"></script> </head> <body><!-- 為ECharts準(zhǔn)備一個(gè)具備大小（寬高）的Dom --><div id="main" style="height:400px"></div><script type="text/javascript">// 為模塊加載器配置echarts的路徑，從當(dāng)前頁(yè)面鏈接到echarts.js，定義所需的圖表路徑require.config({paths:{ 'echarts' : './js/echarts','echarts/chart/bar' : './js/echarts'}});// 使用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, 20]}]};// 為echarts對(duì)象加載數(shù)據(jù) myChart.setOption(option); });</script> </body>2、如果上面的還有不明白的，參考一下我的本地目錄：
js中有如下的文件：
其中，src是echarts-2.0.4文件夾下的src文件夾，zrender里面也有一個(gè)src文件夾，是zrender-2.0.4文件夾下面的src文件夾。
?
如何聯(lián)系我：【萬(wàn)里虎】www.bravetiger.cn 【QQ】3396726884 （咨詢問(wèn)題100元起，幫助解決問(wèn)題500元起） 【博客】http://www.cnblogs.com/kenshinobiy/總結(jié)
以上是生活随笔為你收集整理的***ECharts图表入门和最佳实践的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Atlas200 模组拆解
- 下一篇： Razor语法大全