ECHARTS的基本使用：柱狀圖、折線圖、餅圖等
Echarts 是由百度團隊打造的一款純 Javascript 的圖表庫，官網下載路徑如下：
Echarts的特性：
豐富的圖表型別：
常用的有折線圖，柱狀圖，散點圖，餅圖，盒形圖，用於地理資料視覺化的地圖，熱力圖，線圖等多個座標系的支援
直角座標系（catesian，同 grid）、極座標系（polar）、地理座標系（geo）移動端的優化
按需打包,體積縮小為 ECharts 2 的 40%深度的互動式資料探索
支援在資料的各種座標軸、維度進行資料過濾、縮放，以及在更多的圖中採用這些元件
使用Echarts：
1、引入echarts.min.js， 這個檔案是需要官網下載的。469KB左右
<!DOCTYPE html>
<html>
<header>
<meta charset="utf-8">
<!-- 引入 ECharts 檔案 -->
<script src="echarts.min.js"></script>
</header>
</html>2、定義一個div容器，用於存放你的圖表，要設定ID。
<div id="cjj" style="width: 800px;height:800px;"></div>3、初始化echarts例項
var myChart = echarts.init(document.getElementById('cjj'));4、指定圖表的配置項和資料，即設定option
a)title:標題元件
b)tooltip:提示框元件
c)legend：圖例元件，展現了不同系列的標記(symbol)，顏色和名字
d)xAxis：直角座標系 grid 中的 x 軸，單個 grid 元件最多隻能放上下兩個 x 軸。
e)yAxis:直角座標系 grid 中的 y 軸，單個 grid 元件最多隻能放左右兩個 y 軸。
f)series:系列列表。每個系列通過 type 決定自己的圖表型別。
series[i]-line ——-折線圖
series[i]-bar ——-柱狀圖
series[i]-pie ——-餅圖
series[i]-scatter—–散點圖
series[i]-effectScatter—-帶有漣漪特效動畫的散點（氣泡）圖
series[i]-radar——雷達圖
series[i]-treemap—Treemap 是一種常見的表達『層級資料』『樹狀資料』的視覺化形式。
series[i]-boxplot—-Boxplot 中文可以稱為『箱形圖』、『盒須圖』、『盒式圖』、『盒狀圖』、『箱線圖』
series[i]-candlestick —Candlestick 即我們常說的 K線圖
series[i]-heatmap—–熱力圖
series[i]-map—-地圖主要用於地理區域資料的視覺化，配合 visualMap 元件用於展示不同區域的人口分佈密度等資料。
series[i]-parallel—–平行座標系的系列。
series[i]-lines——–線圖
series[i]-graph——-關係圖
series[i]-gauge——-儀表盤
var option = {
title: {
text: 'ECharts 簡單柱狀圖'
},
tooltip: {},
legend: {
data:['粉絲數']
},
xAxis: {
data: ["安迪","樊勝美","關關","曲筱筱","邱瑩瑩"]
},
yAxis: {},
series: [{
name: '粉絲數',
type: 'bar',
data: [40, 19, 15, 18, 9]
}]
};5、 使用指定的配置項和資料顯示圖表。
myChart.setOption(option);這樣，你就可以在瀏覽器上看到一個柱狀圖出來啦。
滑鼠懸浮可以看到X軸和Y軸對應的資料
柱狀圖和折線圖可以很好的切換：只需要改一下series.type:line
如果是餅圖的話，就不要X Y 軸了。 type: ‘pie’,
並且data的資料需要換成
data:
[ {value:40, name:'安迪'},
{value:19, name:'樊勝美'},
{value:15, name:'關關'},
{value:18, name:'曲筱筱'},
{value:9, name:'邱瑩瑩'}]
如圖所示：
看到這裡，是不是覺得echarts真的是太好用又漂亮了，對吧？~這只是入門級的，後面需要結合地圖展示視覺化資料。期待吧~6月再見。7月，我來了。