EChats+Ajax之柱狀圖的數據交互

時間 2021-08-13

標籤 javascript html java jquery web ajax spring 數據庫 json app 欄目 Ajax 简体版

原文原文鏈接

一：下載 echarts.min.jsjavascript

選擇完整版進行下載，精簡版和經常使用版限制的某些功能html

二： echats入門案例java

一、引入 ECharts 和 JQueryjquery

[html] view plain copy

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="./js/echarts.min.js"></script>

二、準備一個具有高寬的 DOM 容器。web

[html] view plain copy

<body>
<div id="main1" style="width: 900px; height: 350px;"></div>
<div id="main2" style="width: 900px; height: 350px;"></div>
</body>

三、而後經過 echarts.init 方法初始化一個 echarts 實例並經過 setOption 方法生成一個簡單的柱狀圖，下面是完整代碼ajax

[html] view plain copy

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="./js/echarts.min.js"></script>
<body>
<div id="main1" style="width: 900px; height: 350px;"></div>
<div id="main2" style="width: 900px; height: 350px;"></div>
</body>
<script type="text/javascript">
var zChart = echarts.init(document.getElementById("main1"));// 柱形圖模板一
var option = {
color : [ '#3398DB' ],
title : {
text : 'ECharts 示例', //主標題文本，支持使用 \n 換行。
link : '', //主標題文本超連接
textStyle : { //該屬性用來定義主題文字的顏色、形狀等
color : '#3398DB',
}
},
tooltip : {
trigger : 'axis',
axisPointer : { // 座標軸指示器，座標軸觸發有效
type : 'shadow' // 默認爲直線，可選爲：'line' | 'shadow'
}
},
grid : {
left : '6%',
right : '20%',
bottom : '20%',
containLabel : true
},
xAxis : [ { //x軸列表展現
type : 'category',
data : [ '哈士奇', '鬥牛犬', '田園犬', '吉娃娃' ],
} ],
yAxis : [ { //定義y軸刻度
type : 'value',
scale : true,
name : '月銷量',
max : 140,
min : 0,
splitNumber : 20,
boundaryGap : [ 0.2, 0.2 ]
} ],
series : [ {
name : '銷量',
type : 'bar', //bar 柱狀圖 line 折線圖等
barWidth : '40%', //柱的寬度
data : [ '120', '30', '80', '65' ]
} ]
};
zChart.setOption(option);
var xChart = echarts.init(document.getElementById('main2'));// 柱形圖模板二
var option1 = {
title : {
text : $("#signSet option:selected").val() == '' ? $(
"#signSet option:eq(1)").html() : $(
"#signSet option:selected").html(),
},
color : [ '#2474f6', '#006699', '#d84a38' ],
tooltip : {
trigger : 'axis',
axisPointer : { // 座標軸指示器，座標軸觸發有效
type : 'shadow' // 默認爲直線，可選爲：'line' | 'shadow'
}
},
legend : {
data : [ '正常', '遲到', '未到' ]
},
grid : {
left : '3%',
right : '4%',
bottom : '3%',
containLabel : true
},
xAxis : [ {
type : 'category',
data : [ '一班', '二班', '三班', '四班' ]
} ],
yAxis : [ {
type : 'value',
scale : true,
name : '月銷量',
max : 60,
min : 0,
splitNumber : 20,
boundaryGap : [ 0.2, 0.2 ]
} ],
series : [ {
name : '正常',
type : 'bar',
data : [ '54', '49', '58', '56' ]
},
{
name : '遲到',
type : 'bar',
data : [ '5', '8', '4', '2' ]
}, {
name : '未到',
type : 'bar',
data : [ '3', '2', '1', '2' ],
markLine : {
lineStyle : {
normal : {
type : 'dashed'
}
},
data : [ [ {
type : 'min'
}, {
type : 'max'
} ] ]
}
}, ]
}
xChart.setOption(option1);
</script>
</html>

四、效果圖spring

三：EChats + Ajax 完成數據交互數據庫

一、封裝EChats返回的結果集json

[html] view plain copy

package com.debo.echats;
import java.util.List;
/**
* 封裝echats須要的結果集
* @ClassName: EchatsRes
* @Description: TODO
* @author A18ccms a18ccms_gmail_com
* @date 2018年3月28日上午9:38:54
*
*/
public class EchatsRes {
private List<String> xData;
private List<Integer> yData;
public List<String> getxData() {
return xData;
}
public void setxData(List<String> xData) {
this.xData = xData;
}
public List<Integer> getyData() {
return yData;
}
public void setyData(List<Integer> yData) {
this.yData = yData;
}
@Override
public String toString() {
return "EchatsRes [xData=" + xData + ", yData=" + yData + "]";
}
}

二、Controller層，模擬數據app

[html] view plain copy

package com.debo.echats;
import java.util.ArrayList;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
@RequestMapping("/echats")
public class Echats {
@ResponseBody //返回json格式數據
@RequestMapping(method = RequestMethod.GET)
public EchatsRes echats() {
//爲了簡單,這裏省略從數據庫查詢數據,選擇直接模擬
List<String> xList = new ArrayList<String>();
List<Integer> yList = new ArrayList<Integer>();
xList.add("哈士奇");
xList.add("鬥牛犬");
xList.add("田園犬");
xList.add("吉娃娃");
yList.add(120);
yList.add(30);
yList.add(80);
yList.add(55);
EchatsRes echatsRes = new EchatsRes();
echatsRes.setxData(xList);
echatsRes.setyData(yList);
return echatsRes;
}
}

注意：@responseBody註解須要jackson依賴

[html] view plain copy

<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-core</artifactId>
<version>2.4.3</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.4.3</version>
</dependency>

三、jsp完整代碼

[html] view plain copy

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>EChats和Ajax數據交互</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="./js/echarts.min.js"></script>
</head>
<body>
<div><input type="button" id="show" value="點擊顯示圖表"></div>
<div id="main" style="width: 900px; height: 350px;"></div>
</body>
<script type="text/javascript">
var zChart = echarts.init(document.getElementById("main"));// 柱形圖模板
$("#show").on("click", function() {
$.ajax({
url : "/demo/echats.do",
type : 'GET',
success : function(data) {
fun(data.xData, data.yData);
},
error : function(data){
alert(1);
}
});
})
function fun(x_data, y_data) {
var option = {
color : [ '#3398DB' ],
title : {
text : 'ECharts 示例', //主標題文本，支持使用 \n 換行。
link : '', //主標題文本超連接
textStyle : { //該屬性用來定義主題文字的顏色、形狀等
color : '#3398DB',
}
},
tooltip : {
trigger : 'axis',
axisPointer : { // 座標軸指示器，座標軸觸發有效
type : 'shadow' // 默認爲直線，可選爲：'line' | 'shadow'
}
},
grid : {
left : '6%',
right : '20%',
bottom : '20%',
containLabel : true
},
xAxis : [ { //x軸列表展現
type : 'category',
data : x_data,
} ],
yAxis : [ { //定義y軸刻度
type : 'value',
scale : true,
name : '月銷量',
max : 140,
min : 0,
splitNumber : 20,
boundaryGap : [ 0.2, 0.2 ]
} ],
series : [ {
name : '銷量',
type : 'bar', //bar 柱狀圖 line 折線圖等
barWidth : '40%', //柱的寬度
data : y_data
} ]
};
zChart.setOption(option);
}
</script>
</html>