百度Echarts是百度團(tuán)隊(duì)出品的一個(gè)可視化制圖神奇，也是國(guó)內(nèi)目前一款開(kāi)源、功能強(qiáng)大的數(shù)據(jù)可視化產(chǎn)品，包含多種圖形展示方式，并具有交互性。關(guān)于百度Echarts的使用方法或教程，目前網(wǎng)上有很多，包括百度Echarts團(tuán)隊(duì)也有相關(guān)文檔，本人對(duì)此不再贅述，但是百度Echarts畢竟基于json數(shù)據(jù)，且制圖過(guò)程采用編輯代碼的形式，對(duì)一些零基礎(chǔ)小白來(lái)說(shuō)，入門(mén)需要一定過(guò)程，故本人在這里介紹一些簡(jiǎn)單技巧，可以快速輸出多種可視化圖表的相關(guān)技巧。
技巧一：拷貝Echarts實(shí)例（example）開(kāi)源代碼
在Echarts的主頁(yè)（http://echarts.baidu.com/index.html
，這是echarts3的主頁(yè)），選擇“文檔—教程”，就可以看到《5 分鐘上手 ECharts》，通過(guò)這一案例可以非常簡(jiǎn)單入門(mén)echarts（注意先按要求下載echarts.min.js，然后在同一個(gè)文件夾下用記事本建立一個(gè)html文件，再把代碼復(fù)制進(jìn)去，再用瀏覽器打開(kāi)），其基本代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 為ECharts準(zhǔn)備一個(gè)具備大小（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項(xiàng)和數(shù)據(jù)
var option = {
title: {
text: 'ECharts 入門(mén)示例'
},
tooltip: {},
legend: {
data:['銷(xiāo)量']
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷(xiāo)量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
根據(jù)教程，這一基本代碼分為三部分：引入echarts；為 ECharts 準(zhǔn)備一個(gè)具備高寬的 DOM 容器；指定圖表的配置項(xiàng)和數(shù)據(jù)。其核心部分就是var option那部分的圖表配置代碼，我們對(duì)圖表的設(shè)計(jì)，包括標(biāo)題（title:）、坐標(biāo)軸（xAxis、yAxis）、圖例以及數(shù)據(jù)（series）都在這里設(shè)置，具體可以參考echarts的參考手冊(cè)：
（http://echarts.baidu.com/echarts2/doc/doc.html）。
在上述代碼基礎(chǔ)上，我們可以通過(guò)拷貝Echarts實(shí)例（example）開(kāi)源代碼對(duì)其中的var option進(jìn)行替換來(lái)生成不同圖表。比如打開(kāi)http://echarts.baidu.com/echarts2/index.html，這是echarts2的主頁(yè)，有個(gè)實(shí)例下拉菜單，點(diǎn)擊其中的官方實(shí)例，出來(lái)的界面就是百度團(tuán)隊(duì)已開(kāi)發(fā)出來(lái)的各種可視化圖形（見(jiàn)下圖），不得不說(shuō)其種類豐富已經(jīng)遠(yuǎn)遠(yuǎn)超過(guò)我們平時(shí)所用。
我們選擇其中一個(gè)圖形，如標(biāo)準(zhǔn)折線圖，點(diǎn)擊打開(kāi)，就會(huì)出現(xiàn)圖形及其源碼界面（如下圖）。
我們把左邊代碼的option全部復(fù)制替換《5 分鐘上手 ECharts》生成的html文件中基本代碼的option部分（從option = 一直到最后一個(gè)“};”，注意要保留var），這樣就生成新的圖形了。我們可以選擇不同的圖形，并代入一些數(shù)據(jù)，快速地制成我們需要的圖形。
（注：有時(shí)候出現(xiàn)中文亂碼問(wèn)題，可以將代碼中的<meta charset="utf-8">改為<meta charset="gbk">，或者將記事本另存為，在出現(xiàn)的下拉格式菜單中選擇utf-8編碼格式即可）。
技巧二：使用echarts3的下載demo功能
技巧一對(duì)大多數(shù)echarts2中的圖形均可使用，但是對(duì)echarts3的圖形并不完全適用，這是因?yàn)閑charts3的圖形內(nèi)容更豐富，展示功能更強(qiáng)大，因而引入了更多的json文件，這時(shí)候若使用echarts的實(shí)例圖形，可以采用其英文版的download demo功能。
點(diǎn)擊echarts3的主頁(yè)（http://echarts.baidu.com/index.html），右上角有個(gè)en字樣，這是英文版的入口，點(diǎn)擊進(jìn)入，選擇“work-demo”，這里也有很多實(shí)例，比如選擇比較經(jīng)典的一個(gè)例子——全國(guó)空氣質(zhì)量圖，在出來(lái)的可視化圖形中，右上角有個(gè)donwload demo功能，點(diǎn)擊，就可以下載來(lái)一個(gè)該圖形的html文件。我們可以先對(duì)左邊的代碼的數(shù)據(jù)進(jìn)行更改（name、value，以及geoCoordMap的坐標(biāo)位置），點(diǎn)擊上邊的RUN按鈕，再點(diǎn)擊download，最終獲取我們需要的html文件。
在下載的html文件，采用記事本方式打開(kāi)，可以看到源碼中引入js文件中（如下），包含很多制作本圖形所需的js文件，所以在這里僅僅使用技巧一是出不來(lái)該圖形。
script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
技巧三：使用百度圖說(shuō)進(jìn)行交互式制圖操作
百度圖說(shuō)在echarts主頁(yè)（http://echarts.baidu.com/index.html），最底部，網(wǎng)址為：http://tushuo.baidu.com/?fr=echarts
，在該頁(yè)面點(diǎn)擊“開(kāi)始制作圖表“—”“制作圖表”，選擇其中一個(gè)圖形（如標(biāo)準(zhǔn)折線圖），鼠標(biāo)放在圖表區(qū)域，然后在出現(xiàn)的菜單欄點(diǎn)擊“數(shù)據(jù)編輯”，我們就可以進(jìn)入類似像excel那樣的交互式手工操作制圖設(shè)置，如下圖
我們可以再上邊直接輸入數(shù)據(jù)，也可以選擇導(dǎo)入excel按鈕導(dǎo)入我們已有數(shù)據(jù)，點(diǎn)擊參數(shù)調(diào)整按鈕，會(huì)出現(xiàn)對(duì)圖形標(biāo)題、坐標(biāo)軸、圖例等等，進(jìn)行傻瓜式設(shè)置方式，基于我們的需要像excel那樣只做我們所需可視化圖形。
