一:下载 echarts.min.js
选择完整版进行下载,精简版和常用版限制的某些功能
二: echats入门案例
1、引入 ECharts 和 JQuery
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="./js/echarts.min.js"></script>
2、准备一个具备高宽的 DOM 容器。
<body>
<div id="main1" style="width: 900px; height: 350px;"></div>
<div id="main2" style="width: 900px; height: 350px;"></div>
</body>
3、然后通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图,下面是完整代码
<%@ 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>
4、效果图
三:EChats + Ajax 完成数据交互
1、封装EChats返回的结果集
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 + "]";
}
}
2、Controller层,模拟数据
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依赖
<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>
3、jsp完整代码
<%@ 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>
4、效果图
示例二与后台交互的逻辑与之相似