ECharts，純Javascript圖表庫，基于Canvas，底層依賴ZRender，商業産品常用圖表庫，提供直覺，生動，可互動，可個性化定制的資料可視化圖表。創新的拖拽重計算、資料視圖、值域漫遊等特性大大增強了使用者體驗，賦予了使用者對資料進行挖掘、整合的能力。圖表類型支援折線圖（區域圖）、柱狀圖（條狀圖）、散點圖（氣泡圖）、K線圖、餅圖（環形圖）、地圖、力導向布局圖，同時支援任意次元的堆積和多圖表混合展現。
一、搭建環境：
1、進入echarts的官網，下載下傳echarts-master的壓縮包，解壓，點選進入index.xml。
2、選擇頂部的API&Doc，打開附錄。
3、MyEclipse中建立一個項目，建立兩個檔案夾（echarts,zrender）
4、将解壓包下的src下的所有拷貝到echarts下。
5、按順序導入4個js檔案：
doc\asset\js\ jquery.js 、doc\asset\js\bootstrap.js 、doc\asset\js\esl\esl.js 、doc\asset\js\esl\js.js代碼實作：
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/esl.js"></script>
<script type="text/javascript">
function init() {
// 初始化加載支援js檔案包的。
require.config({
paths: {
'js': 'js/js'
},
packages: [
{
name: 'echarts',
location: 'echarts',
main: 'echarts'
},
{
name: 'zrender',
location: 'zrender',
main: 'zrender'
}
]
});
//初始化資料
var option = {
//工具提示
tooltip : {
trigger: 'axis'
},
//圖例
legend: {
data:['蒸發量','降水量']
},
//工具箱
toolbox: {
//使用工具箱
show : true,
//工具箱中包含的功能
feature : {
//是否加入标記
mark : true,
//是否可以改變資料，進而動态改變圖
dataView : {readOnly: false},
//是否可以線上性柱狀圖之間切換
magicType:['line', 'bar'],
restore : true
}
},
//是否允許拖拽
calculable : true,
//加入橫軸的内容
xAxis : [
{
type : 'category',
data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
}
],
//加入縱軸的内容
yAxis : [
{
type : 'value',
splitArea : {show : true}
}
],
//具體資料
series : [
{
name:'蒸發量',
type:'bar',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name:'降水量',
type:'bar',
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
}
]
};
require(
[
'echarts',
'echarts/chart/line',
'echarts/chart/bar',
],
function(ec) {
var myChart = ec.init(document.getElementById('mydiv'));
myChart.setOption(option);
}
)
}
</script>
</head>
<body οnlοad="init();">
<div id="mydiv" style="width:1000px;height:600px;"></div>
</body>
