本文通过实例展示如何在Echarts中使用Ajax从Servlet后台获取数据来绘制折线图。首先展示了project-duanmianlishi.jsp页面的HTML和JavaScript部分，强调了必需引入的Echarts和jQuery库。接着详细说明了CheckInfo.java Servlet的实现，包括创建物理数据对象并返回JSON数据。最后提到了web.xml配置文件的部分内容。
使用Echarts绘制折线图实例，ajax传值给servlet后台，废话不多说，上代码
project-duanmianlishi.jsp页面:
<%@page import="java.sql.DriverManager"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<link type="text/css" href="css/login1.css" rel="stylesheet">
<link rel="stylesheet" href="css/jquery.treeview.css" />
<link rel="stylesheet" href="css/screen.css" />
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="js/jquery.treeview.js" type="text/javascript"></script>
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.4.2.min.js"></script>
<script language="javascript" src="js/pcasunzip.js" charset="UTF-8"></script>
<script type="text/javascript" src="My97DatePicker/WdatePicker.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- 引入 echarts.js -->
<script type="text/javascript" src="js/echarts.min.js"></script>
<!-- 引入jquery.js -->
<script type="text/javascript" src="js/jquery-3.0.0.js"></script>
//这两个js是必须要引得
<head></head>
<body>
<div id="main" class="content-right" style="border:1px solid orange; padding:1px; width: 500px; height: 300px"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
// 显示标题，图例和空的坐标轴
myChart.setOption({
title: {
text: '数据折线图'
},
&nbs
最低0.47元/天 解锁文章
扫一扫
1285
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
