由於工作需要用到折線圖，發現了echars這個圖標插件，使用起來還挺好用的，所以記錄下自己的使用經驗。直接上代碼。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'function.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="<%=basePath%>res/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="<%=basePath%>res/js/echarts.js"></script>
</head>
<div id="ehcartsTest" style="height:100%;width:100%;"></div>
<script type="text/javascript">
var myChart;
$(function() {
if (myChart != null && myChart != "" && myChart != undefined) {
myChart.dispose();//銷燬
}
myChart = echarts.init(document.getElementById("ehcartsTest"));
var option = {
// 圖表標題
title : {
text : '折線圖',
subtext : '模擬數據',
x : 'left', // 標題的水平位置，默認左對齊。可選center，left，right
y : 'top', // 標題的豎直位置，默認在頭部，可選top，bottom，center
backgroundColor : 'white',//標題框的背景
borderColor : 'red', // 標題邊框顏色
borderWidth : 0, // 標題邊框長，默認爲0
padding : 1, // 標題內邊距，單位px，默認各方向內邊距爲5，
itemGap : 10, // 主副標題的間隔。默認爲10
textStyle : {
fontSize : 20,//標題字體大小
fontWeight : 'bolder',
color : 'black' // 主標題文字顏色
},
subtextStyle : {
color : 'black' // 副標題文字顏色
}
},
// 圖例
legend : {
data : [ "數據1", "數據2", "數據3" ],
orient : 'horizontal', // 圖例水平：horizontal；圖例豎直：vertical
x : 'center', // 圖例的水平位置，默認居中。可選center，left，right
y : 'top', // 圖例的豎直位置，默認在頭部，可選top，bottom，center
backgroundColor : 'white',
borderColor : 'red',
borderWidth : 0,
padding : 5,
itemGap : 10, // 圖例間距
itemWidth : 20, // 圖例長
itemHeight : 14, // 圖例寬
textStyle : {
color : 'black' // 圖例文字顏色
}
},
// 值域
dataRange : {
orient : 'vertical',//值域水平：horizontal；值域豎直：vertical
x : 'left', //水平位置，默認居中。可選center，left，right
y : 'bottom', //豎直位置，默認在底部，可選top，bottom，center
backgroundColor : 'white',
borderColor : 'white',
borderWidth : 0,
padding : 5,
itemGap : 10, // 值域間隔，默認爲10，
itemWidth : 20, // 值域寬
itemHeight : 14, // 值域高
splitNumber : 5, // 分割段數，默認爲5，爲0時爲線性漸變
color : [ 'red', 'green' ],//值域顏色變化範圍
textStyle : {
color : 'black' // 值域文字顏色
}
},
//工具欄
toolbox : {
show : true,
feature : {
dataZoom : {
yAxisIndex : 'none'
},
dataView : {
readOnly : false
},
magicType : {
type : [ 'line', 'bar' ]
},
restore : {},
saveAsImage : {}
},
orient : 'horizontal', // 水平：horizontal；豎直：vertical
x : 'right', // 水平安放位置，默認爲全圖右對齊，可選爲：
y : 'top', // 垂直安放位置，默認爲全圖頂端，可選爲：
color : [ 'red', 'red', 'red', 'red' ],
backgroundColor : 'rgba(0,0,0,0)',
borderColor : 'red',
borderWidth : 0,
padding : 5,
itemGap : 10, // 間隔
itemSize : 16, // 寬度
},
//提示框
tooltip : {
trigger : 'axis',//提示框類型item、axis
showDelay : 0.1, // 提示框顯示延遲
hideDelay : 0.1, // 提示框隱藏延遲
transitionDuration : 0.4, // 動畫變換時間，單位s
backgroundColor : 'rgba(0,0,0,0.7)', // 提示背景顏色，默認爲透明度爲0.7的黑色
borderColor : '#333', // 提示邊框顏色
borderRadius : 4, // 提示邊框圓角，單位px，默認爲4
borderWidth : 0, // 提示邊框線寬，單位px，默認爲0（無邊框）
padding : 5, // 提示內邊距，單位px，默認各方向內邊距爲5，
textStyle : {
color : 'green'
}
},
//**********初始化滾動條***********
dataZoom : [ {
type : 'slider',
show : true,
xAxisIndex : [ 0 ],
start : 00,
end : 90,
orient : 'horizontal',// 水平：horizontal；豎直：vertical
x : 200, // 水平位置
y : 30, // 豎直位置
width : 1000, // 長
height : 20, // 寬
backgroundColor : 'rgba(0,0,0,0)', // 背景顏色
dataBackgroundColor : '#eee', // 數據背景顏色
fillerColor : 'rgba(144,197,237,0.2)', // 填充顏色
handleColor : 'rgba(70,130,180,0.8)' // 手柄顏色
} ],
// 折線圖所在的網格佈局
grid : {
x : 80,
y : 60,
x2 : 80,
y2 : 60,
backgroundColor : 'rgba(0,0,0,0)',
borderWidth : 1,
borderColor : '#ccc'
},
//**********x軸的數據***********
xAxis : {
type : 'category',
data : [ 1.2, 2.5, 3.2, 4, 5, 6, 7, 8, 9 ],//x軸數據
name : 'x軸名字'//x軸名字
},
//**********y軸的數據標準***********
yAxis : {
minInterval : 1,//y軸數據的最小間隔
type : 'value',
name : 'y軸名字'//y軸名字
},
//**********y軸的數據***********
series : [ {
name : "數據1",
type : 'line',
smooth : true,
itemStyle : {
color : 'rgb(255, 70, 131)'
},
areaStyle : {
color : new echarts.graphic.LinearGradient(0, 0, 0, 1, [ {
offset : 0,
color : 'rgb(255, 158, 68)'
}, {
offset : 1,
color : 'rgb(255, 70, 131)'
} ])
},
data : [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
//y軸數據
}, {
name : "數據2",
type : 'line',
smooth : true,
itemStyle : {
color : 'rgb(255, 70, 131)'
},
areaStyle : {
color : new echarts.graphic.LinearGradient(0, 0, 0, 1, [ {
offset : 0,
color : 'rgb(255, 158, 68)'
}, {
offset : 1,
color : 'rgb(255, 70, 131)'
} ])
},
data : [ 11, 12, 13, 14, 15, 16, 17, 18, 19 ]
//y軸數據
}, {
name : "數據3",
type : 'line',
smooth : true,
itemStyle : {
color : 'rgb(255, 70, 131)'
},
areaStyle : {
color : new echarts.graphic.LinearGradient(0, 0, 0, 1, [ {
offset : 0,
color : 'rgb(255, 158, 68)'
}, {
offset : 1,
color : 'rgb(255, 70, 131)'
} ])
},
data : [ 21, 22, 23, 24, 25, 26, 27, 28, 29 ]
//y軸數據
}
]
};
myChart.setOption(option);
})
</script>
<body>
</body>
</html>
以上主要針對折線圖，只做了淺層的使用，如果用到更深層的，會 後續更新！