前面几节echarts的使用都是静态常量值得设置，这肯定不能满足我们在日常开发中的需要，平时项目的数据都是动态的，可变的，所以本章节介绍echarts结合java 如何动态的加载数据。
1，新建servelet类EchartsDemo.java和页面echartsDemo2.jsp。
EchartsDemo.java是一个普通的servelet，在这里仅仅是举例，读者可更换为一个spring的controller或者struts的action。
EchartsDemo.java 代码
package com.test;
/*****
* V型知识库
* www.vxzsk.com
*
*/
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class EchartsDemo extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* Constructor of the object.
*/
public EchartsDemo() {
super();
}
/**
* Destruction of the servlet. <br>
*/
public void destroy() {
super.destroy(); // Just puts "destroy" string in log
// Put your code here
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
/*****
* V型知识库
* www.vxzsk.com
*
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String title="'我是折线图'";//标题
String legend ="['邮件营销a','联盟广告','视频广告','直接访问','搜索引擎']";//折线图线条
String xAxis="['周一','周二','周三','周四','周五','周六','周日']";//x轴
String series="["
+"{"
+"name:'邮件营销a',"
+"type:'line',"
+"stack: '总量',"
+"data:[120, 132, 101, 134, 90, 230, 210]"
+"},"
+"{"
+"name:'联盟广告',"
+"type:'line',"
+"stack: '总量',"
+"data:[220, 182, 191, 234, 290, 330, 310]"
+"},"
+"{"
+"name:'视频广告',"
+"type:'line',"
+"stack: '总量',"
+"data:[150, 232, 201, 154, 190, 330, 410]"
+"},"
+"{"
+"name:'直接访问',"
+"type:'line',"
+"stack: '总量',"
+"data:[320, 332, 301, 334, 390, 330, 320]"
+"},"
+"{"
+"name:'搜索引擎',"
+"type:'line',"
+"stack: '总量',"
+"data:[820, 932, 901, 934, 1290, 1330, 1320]"
+"}"
+"]";
request.setAttribute("title", title);
request.setAttribute("legend", legend);
request.setAttribute("xAxis", xAxis);
request.setAttribute("series", series);
request.getRequestDispatcher("/baidu/echartsDemo2.jsp").forward(request, response);
}
public void init() throws ServletException {
// Put your code here
}
}说明：doPost方法中设置了四个参数，并且四个参数按照echarts的格式设置了常量值，赋值数据读者可根据自己需求自行组装，但是组装的格式一定要符合上述代码案例，赋值数据可来自于数据库，xml文件，接口调用等。
echartsDemo2.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></title>
</head>
<body >
<div id="container" style="height: 500px"></div>
<div style="display: ">
</div>
<!-- V型知识库 www.vxzsk.com -->
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
var option = null;
var title=${title};
var legend=${legend};
var xAxis =${xAxis};
var series=${series};
option = {
title: {
text: title
},
tooltip: {
trigger: 'axis'
},
legend: {
data:legend
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: xAxis
},
yAxis: {
type: 'value'
},
series: series
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>js代码接收servelet中四个动态参数，然后把动态变量赋值到相应位置
var title=${title};
var legend=${legend};
var xAxis =${xAxis};
var series=${series};2，运行代码，效果如下
我们在servelet中 设置的title值为"我是折线图" ，请注意下图标题
此文章本站原创，地址 https://www.vxzsk.com/180.html
转载请注明出处！谢谢！
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程