一、效果圖
二、代碼
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head style="height: 100%">
<script type="text/javascript" src="./js/echarts.min.js"></script>
<!-- 引入jquery.js -->
<script type="text/javascript" src="./js/jquery.js"></script>
<meta charset="utf-8"/>
</head>
<body>
<!-- 準備Echarts圖表畫布 -->
<div style="height:410px;min-height:100px;margin:0 auto;" id="main"></div>
<script type="text/javascript">
// 基于準備好的dom，初始化echarts執行個體
var myChart = echarts.init(document.getElementById('main'));
// 畫圖表空出資料等待ajax傳值
myChart.setOption({
title: { //圖表标題
text: ''
},
tooltip: {
trigger: 'axis', //坐标軸觸發提示框，多用于柱狀、折線圖中
axisPointer: {
type: 'cross'//十字訓示
}
},
axisPointer: {
link: [{
xAxisIndex: [0, 1] //生成大十字軸，控制兩個x軸
}]
},
grid: [{ //圖形間距
left: '5%',
right: 20,
top: 40,
height: 180
}, {
left: '5%',
right: 20,
height: 80,
top: 260
}],
dataZoom: [ //滾動條 控制兩條x軸
{
type: 'inside',
top: '95%',
xAxisIndex:[0,1],
height: 20,
start: 20,
end: 100
} ,
{
type: 'slider',
xAxisIndex:[0,1],
start: 20,
end: 100
}
],
legend: { //圖表上方的類别顯示
show:true,
data:['現價','成交量']
},
color:[
'#FF3333',
'#53FF53',
'#B15BFF',
'#68CFE8',
'#FFDC35'
],
toolbox: { //工具欄顯示
show: true,
feature: {
saveAsImage: {} //顯示“另存為圖檔”工具
}
},
calculable : true,
xAxis: [{
type: 'category',
data: [],
scale: true,
boundaryGap: false,
axisLine: { onZero: false },
splitLine: { show: false },
splitNumber: 20,
min: 'dataMin',
max: 'dataMax'
},{
type: 'category',
scale: true,
gridIndex:1,
data: [] ,
axisLabel: {show: false}
}
],
yAxis : [
{
scale: true, //資料居中
splitArea: {
show: true
},
type : 'value',
name : '現價',
splitNumber:10,//分行
axisLabel : {
formatter: '{value}元' //控制輸出格式
}
},{ scale: true, //資料居中
splitArea: {
show: true
},
gridIndex:1,
splitNumber: 2 ,
axisLine: {onZero: false},
axisTick: {show: false},
splitLine: {show: false},
axisLabel: {show: true}
}
],
series : [ //系列（内容）清單
{
name:'現價',
type:'line', //折線圖表示
symbol:'emptycircle', //設定折線圖中表示每個坐标點的符号；emptycircle：空心圓；emptyrect：空心矩形；circle：實心圓；emptydiamond：菱形
data:[] //資料值通過Ajax動态擷取
},
{
name:'成交量',
type:'bar',
xAxisIndex:1,
yAxisIndex:1,
barWidth: 10,
itemStyle: {
},
symbol:'emptyrect',
data:[]
}
]
});
myChart.showLoading(); //資料加載完之前先顯示一段簡單的loading動畫
var lastpx=[]; //現價數組
var trade_vol=[]; //成交量數組
var time=[]; //時間數組
$.ajax({ //使用JQuery内置的Ajax方法
type : "post", //post請求方式
async : true, //異步請求（同步請求将會鎖住浏覽器，使用者其他操作必須等待請求完成才可以執行）
url : "tbl_market.do?method=getAll", //請求發送到ShowInfoIndexServlet處
// data : {name:"A0001"}, //請求内包含一個key為name，value為A0001的參數；伺服器接收到用戶端請求時通過request.getParameter方法擷取該參數值
dataType : "json", //傳回資料形式為json
success : function(result) {
//請求成功時執行該函數内容，result即為伺服器傳回的json對象
if (result != null && result.length > 0) {
for(var i=0;i<result.length;i++){
lastpx.push(result[i].lastpx); //挨個取出
trade_vol.push(result[i].trade_vol);
time.push(result[i].time);
}
myChart.hideLoading(); //隐藏加載動畫
myChart.setOption({ //載入資料
xAxis: [{
data: time //填入X軸資料
},{
data: time //填入X軸資料
}],
series: [ //填入系列（内容）資料
{
// 根據名字對應到相應的系列
name: '現價',
data: lastpx
},
{
name: '成交量',
data: trade_vol
}
]
});
}
else {
//傳回的資料為空時顯示提示資訊
alert("圖表請求資料為空，可能伺服器暫未錄入資料，您可以稍後再試！");
myChart.hideLoading();
}
},
error : function(errorMsg) {
//請求失敗時執行該函數
alert("圖表請求資料失敗，可能是伺服器開小差了");
myChart.hideLoading();
}
}),
myChart.setOption(option); //載入圖表
</script>
</body>
</html>