<html>
<head>
<base href="<%=basePath%>">
<title>ECharts實例</title>
</head>
<body>
<!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)-->
<!--Step:1 爲ECharts準備一個具備大小（寬高）的Dom-->
<div id="mainBar" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
<!--Step:2 Import echarts.js-->
<!--Step:2 引入echarts.js-->
<script src="js/echarts.js"></script>
<script type="text/javascript">
// Step:3 conifg ECharts's path, link to echarts.js from current page.
// Step:3 爲模塊加載器配置echarts的路徑，從當前頁面鏈接到echarts.js，定義所需圖表路徑
require.config({
paths: {
echarts: './js'
}
});
// Step:4 require echarts and use it in the callback.
// Step:4 動態加載echarts然後在回調函數中開始使用，注意保持按需加載結構定義圖表路徑
require(
[
//這裏的'echarts'相當於'./js'
'echarts',
'echarts/chart/bar',
'echarts/chart/line',
],
//創建ECharts圖表方法
function (ec) {
//--- 折柱 ---
//基於準備好的dom,初始化echart圖表
var myChart = ec.init(document.getElementById('mainBar'));
//定義圖表option
var option = {
//標題，每個圖表最多僅有一個標題控件，每個標題控件可設主副標題
title: {
//主標題文本，'\n'指定換行
text: '2013年廣州降水量與蒸發量統計報表',
//主標題文本超鏈接
link: 'http://www.tqyb.com.cn/weatherLive/climateForecast/2014-01-26/157.html',
//副標題文本，'\n'指定換行
subtext: 'www.stepday.com',
//副標題文本超鏈接
sublink: 'http://www.stepday.com/myblog/?Echarts',
//水平安放位置，默認爲左側，可選爲：'center' | 'left' | 'right' | {number}（x座標，單位px）
x: 'left',
//垂直安放位置，默認爲全圖頂端，可選爲：'top' | 'bottom' | 'center' | {number}（y座標，單位px）
y: 'top'
},
//提示框，鼠標懸浮交互時的信息提示
tooltip: {
//觸發類型，默認（'item'）數據觸發，可選爲：'item' | 'axis'
trigger: 'axis'
},
//圖例，每個圖表最多僅有一個圖例
legend: {
//顯示策略，可選爲：true（顯示） | false（隱藏），默認值爲true
show: true,
//水平安放位置，默認爲全圖居中，可選爲：'center' | 'left' | 'right' | {number}（x座標，單位px）
x: 'center',
//垂直安放位置，默認爲全圖頂端，可選爲：'top' | 'bottom' | 'center' | {number}（y座標，單位px）
y: 'top',
//legend的data: 用於設置圖例，data內的字符串數組需要與sereis數組內每一個series的name值對應
data: ['蒸發量','降水量']
},
//工具箱，每個圖表最多僅有一個工具箱
toolbox: {
//顯示策略，可選爲：true（顯示） | false（隱藏），默認值爲false
show: true,
//啓用功能，目前支持feature，工具箱自定義功能回調處理
feature: {
//輔助線標誌
mark: {show: true},
//dataZoom，框選區域縮放，自動與存在的dataZoom控件同步，分別是啓用，縮放後退
dataZoom: {
show: true,
title: {
dataZoom: '區域縮放',
dataZoomReset: '區域縮放後退'
}
},
//數據視圖，打開數據視圖，可設置更多屬性,readOnly 默認數據視圖爲只讀(即值爲true)，可指定readOnly爲false打開編輯功能
dataView: {show: true, readOnly: true},
//magicType，動態類型切換，支持直角系下的折線圖、柱狀圖、堆積、平鋪轉換
magicType: {show: true, type: ['line', 'bar']},
//restore，還原，復位原始圖表
restore: {show: true},
//saveAsImage，保存圖片（IE8-不支持）,圖片類型默認爲'png'
saveAsImage: {show: true}
}
},
//是否啓用拖拽重計算特性，默認關閉(即值爲false)
calculable: true,
//直角座標系中橫軸數組，數組中每一項代表一條橫軸座標軸，僅有一條時可省略數值
//橫軸通常爲類目型，但條形圖時則橫軸爲數值型，散點圖時則橫縱均爲數值型
xAxis: [
{
//顯示策略，可選爲：true（顯示） | false（隱藏），默認值爲true
show: true,
//座標軸類型，橫軸默認爲類目型'category'
type: 'category',
//類目型座標軸文本標籤數組，指定label內容。 數組項通常爲文本，'\n'指定換行
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
}
],
//直角座標系中縱軸數組，數組中每一項代表一條縱軸座標軸，僅有一條時可省略數值
//縱軸通常爲數值型，但條形圖時則縱軸爲類目型
yAxis: [
{
//顯示策略，可選爲：true（顯示） | false（隱藏），默認值爲true
show: true,
//座標軸類型，縱軸默認爲數值型'value'
type: 'value',
//分隔區域，默認不顯示
splitArea: {show: true}
}
],
//sereis的數據: 用於設置圖表數據之用。series是一個對象嵌套的結構；對象內包含對象
series: [
{
//系列名稱，如果啓用legend，該值將被legend.data索引相關
name: '蒸發量',
//圖表類型，必要參數！如爲空或不支持類型，則該系列數據不被顯示。
type: 'bar',
//系列中的數據內容數組，折線圖以及柱狀圖時數組長度等於所使用類目軸文本標籤數組axis.data的長度，並且他們間是一一對應的。數組項通常爲數值
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],
//系列中的數據標註內容
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
//系列中的數據標線內容
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
},
{
//系列名稱，如果啓用legend，該值將被legend.data索引相關
name: '降水量',
//圖表類型，必要參數！如爲空或不支持類型，則該系列數據不被顯示。
type: 'bar',
//系列中的數據內容數組，折線圖以及柱狀圖時數組長度等於所使用類目軸文本標籤數組axis.data的長度，並且他們間是一一對應的。數組項通常爲數值
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],
//系列中的數據標註內容
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
//系列中的數據標線內容
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
}
]
};
//爲echarts對象加載數據
myChart.setOption(option);
}
);
</script>
</body>
</html>
封裝好的方法
//加載圖標
function loadEchart(){
var myChart = echarts.init(document.getElementById('echarts1'));
var keyArray = [];
var value2 = [];
var value1 =[];
var title1 = "標準值";
var title2 = "目標值";
var titles = [];
titles.push(title1);
titles.push(title2);
myChart.setOption(getOption(keyArray,value1,value2,title1,title2,titles));
}
function getOption(keyArray,value1,value2,title1,title2,titles){
var option = {
/* title: {
text: title2
}, */
tooltip: {
trigger: 'axis'
},
legend: {
data:titles
},
grid:{
left:55
},
xAxis: {
type: 'category',
boundaryGap: false,
data: keyArray
},
yAxis: {
type: 'value',
min:'dataMin',
max:'dataMax',
axisLabel: {
formatter: function(value){
return value.toFixed(2);
}
}
},
series: [
{
name:title1,
type:'line',
data:value1,
},
{
name:title2,
type:'line',
data:value2
}
]
};
return option;
}