ECharts多图表与后台交互
多图表交互目前暂时的想法是多绑定一个DOM
1、效果：
2、test2.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>
<div id="main1" style="width:600px;height: 400px;"></div>
<script type="text/javascript">
var myChart=echarts.init(document.getElementById('main'));
var myChart1=echarts.init(document.getElementById('main1'));
//显示标题，图例和空的坐标轴
myChart.setOption({
title : {
text : 'ECharts'
},
tooltip : {
show : true
},
legend : {
data : [ '销量' ]
},
xAxis : {
data : []
},
yAxis : {},
series : [ {
name : '销量',
type : 'line',//图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示，具体类型可进入ECharts官方查找API
data : []
}]
});
myChart1.setOption({
title : {
text : 'ECharts'
},
tooltip : {
show : true
},
legend : {
data : [ '销量' ]
},
xAxis : {
data : []
},
yAxis : {},
series : [ {
name : '销量',
type : 'bar',//图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示，具体类型可进入ECharts官方查找API
data : [],
//配置样式
itemStyle: {
//通常情况下样式
normal: {
//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
color: function (params) {
var colorList = ['#8dc63f', '#add8e6', '#ffb6c1', '#f37b1d'];
return colorList[params.dataIndex];
}
},
//鼠标悬停时，显示强调效果
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
//第四个参数不透明参数,0.5表示半透明
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
});
myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
var names = []; //类别数组（实际用来盛放X轴坐标值）
var nums = []; //销量数组（实际用来盛放Y坐标值）
$.ajax({
type : "post",
async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
url : "test2", //请求发送到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(); //隐藏加载动画
myChart1.hideLoading();
myChart.setOption({ //加载数据图表
xAxis : {
data : names
},
series : [ {
// 根据名字对应到相应的系列
name : '销量',
data : nums
} ]
});
myChart1.setOption({ //加载数据图表
xAxis : {
data : names
},
series : [ {
// 根据名字对应到相应的系列
name : '销量',
data : nums
} ]
});
}
},
error : function(errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
})
</script>
</body>
</html>3、moreGraph.class
代码语言：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("/test2")
public class moreGraph extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//设置请求编码格式
req.setCharacterEncoding("UTF-8");
//设置响应编码格式
resp.setCharacterEncoding("utf-8");
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);
}
}部署项目：
