ECharts与java后台交互绘制图表
效果如下:
1、test.html
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入Echarts文件-->
<script src="js/echarts.min.js"></script>
<script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height: 400px;"></div>
<script type="text/javascript">
var myChart=echarts.init(document.getElementById('main'));
//显示标题，图例和空的坐标轴
myChart.setOption({
title : {
text : 'ECharts'
},
tooltip : {
show : true
},
legend : {
data : [ '销量' ]
},
xAxis : {
data : []
},
yAxis : {},
series : [ {
name : '销量',
type : 'line',//图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示，具体类型可进入ECharts官方查找API
data : []
} ]
});
myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
var names = []; //类别数组（实际用来盛放X轴坐标值）
var nums = []; //销量数组（实际用来盛放Y坐标值）
$.ajax({
type : "post",
async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
url : "test", //请求发送到Controller处，路径我上面写好了的，直接拼的，你自己按照你的写
data : {},
dataType : "json", //返回数据形式为json
success : function(result) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
if (result) {
for (var i = 0; i < result.length; i ) {
names.push(result[i].name); //挨个取出类别并填入类别数组
}
for (var i = 0; i < result.length; i ) {
nums.push(result[i].num); //挨个取出销量并填入销量数组
}
myChart.hideLoading(); //隐藏加载动画
myChart.setOption({ //加载数据图表
xAxis : {
data : names
},
series : [ {
// 根据名字对应到相应的系列
name : '销量',
data : nums
} ]
});
}
},
error : function(errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
})
</script>
</body>
</html>2、创建实体类
代码语言：javascript复制package com.echart.pojo;
public class Product {
//类别名称
private String name;
//销量
private Integer num;
public Product(String name, Integer num) {
this.name = name;
this.num = num;
}
public Product() {
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Integer getNum() {
return num;
}
public void setNum(Integer num) {
this.num = num;
}
@Override
public String toString() {
return "Product{"
"name='" name '''
", num=" num
'}';
}
}3、创建一个servlet用于后台处理
为了方便，这里就不用SSM框架的Controller查数据库了，自己造几个数据传到前台，测试效果和查数据库是一样的
代码语言：javascript复制package com.echart.test;
import com.echart.pojo.Product;
import com.fasterxml.jackson.databind.ObjectMapper;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
@WebServlet("/test")
public class lineTest extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
Product product1=new Product("手机",2000);
Product product2=new Product("电脑",3000);
Product product3=new Product("显示器",200);
Product product4=new Product("主机",5000);
List<Product> list=new ArrayList<>();
list.add(product1);
list.add(product2);
list.add(product3);
list.add(product4);
//提供java-json相互转换功能的类
ObjectMapper mapper=new ObjectMapper();
//将list中的对象转换为Json格式的数组
String json=mapper.writeValueAsString(list);
System.out.println(json);
//将json数据返回给客户端
resp.setContentType("text/html;charset=utf-8");
resp.getWriter().write(json);
}
}4、部署项目之后
既然能绘制出折线图，那饼图、柱状图等等应该也是不在话下的
