EChart
ECharts赡盘，一個(gè)純 Javascript 的圖表庫(kù)号枕，可以流暢的運(yùn)行在 PC 和移動(dòng)設(shè)備上，兼容當(dāng)前絕大部分瀏覽器（IE8/9/10/11陨享，Chrome葱淳，F(xiàn)irefox，Safari等）抛姑，底層依賴輕量級(jí)的 Canvas 類庫(kù) ZRender赞厕，提供直觀，生動(dòng)定硝，可交互皿桑，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。
網(wǎng)址：
- http://echarts.baidu.com/
- https://github.com/ecomfe/echarts
- http://echarts.baidu.com/echarts2/index.html
- http://echarts.baidu.com/download.html
豐富的圖表類型
ECharts 提供了常規(guī)的折線圖蔬啡，柱狀圖诲侮，散點(diǎn)圖，餅圖箱蟆，K線圖沟绪，用于統(tǒng)計(jì)的盒形圖，用于地理數(shù)據(jù)可視化的地圖顽腾，熱力圖近零，線圖，用于關(guān)系數(shù)據(jù)可視化的關(guān)系圖抄肖，treemap久信，多維數(shù)據(jù)可視化的平行坐標(biāo)，還有用于 BI 的漏斗圖漓摩，儀表盤裙士，并且支持圖與圖之間的混搭。
引入 ECharts
ECharts 3 開始不再?gòu)?qiáng)制使用 AMD 的方式按需引入管毙，代碼里也不再內(nèi)置 AMD 加載器腿椎。因此引入方式簡(jiǎn)單了很多桌硫，只需要像普通的 JavaScript 庫(kù)一樣用 script 標(biāo)簽引入。
<!DOCTYPE html>
<html>
<header>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
</header>
</html>
繪制一個(gè)簡(jiǎn)單的圖表
<body>
<!-- 為 ECharts 準(zhǔn)備一個(gè)具備大锌姓ā（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div></body>
然后就可以通過 echarts.init 方法初始化一個(gè) echarts 實(shí)例并通過 setOption 方法生成一個(gè)簡(jiǎn)單的柱狀圖铆隘，下面是完整代碼。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.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 入門示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。 myChart.setOption(option);
</script>
</body>
</html>
