我感覺我每次寫博客都挖坑，這一次保證，真的不挖坑了。。。
這一次要介紹的是百度的一個可視化神器——百度Echarts。
相比較與highcharts，echarts畢竟是國內的，而且完全開源，文檔寫的也很全，最近我在用echarts做可視化，非常之好用。
目前echarts有2和3兩個版本，我更喜歡2。因爲2的demo更多，文檔寫的也全。3的話，我不是很喜歡。不過echarts2和3差別不大。本次教程以echarts2爲主。
Echarts2：http://echarts.baidu.com/echarts2/index.html
Echarts3：http://echarts.baidu.com/
今天，第一篇首先來講入門。
首先，我們先來看一下可視化的效果：http://sandbox.runjs.cn/show/yqzosjkw
是不是還是可以的。
完成這個也是比較簡單的。
一、創建HTML文檔，以及設置好DOM
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 爲ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="height:400px"></div>
</body>二、引入echarts.js
<!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>
</body>三、配置echarts配置和圖標路徑
<!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模塊，按需加載
],
</script>
</body>在這裏要進行說明：（1）require.config是用來設置echarts的配置文件，因爲我們用的是在線的echarts.js，所以按照這種方式配置就可以。如果你用的是下載下來的js，那麼就要重新配置好路徑。（2）關於第二個require，這裏是用來設置要表。除了第一個‘echarts’必要引用外，還要引用所需要顯示的圖。例如，我們這個表用到的是柱狀圖，所以要引用bar，那麼如果我們要引用折線圖，那麼就要引用line了，依次類推，具體可以看官方文檔。