使用ECharts在jsp页面中实现折线图

参考

• ECharts教程|菜鸟教程
• JSP使用Echarts的最简单的例子 --这里使用了JSON格式来传数据，相同方式的可以参考一下
• JSP传递参数到JS中的方法和问题 --因为涉及js使用jsp中的变量

目的

使用ECharts将后台数据库中的数据在jsp页面中以图表形式展示，例如折线图。

方法

我采取的获取数据库数据的方式是直接从jsp页面中嵌入Java代码，然后再将数据以折线图形式展示。

代码实现

jsp页面的内容如下，直接复制过来：

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ page import="java.util.*"%>
<%@ page import="com.bean.IndexData"%>
<%@ page import="com.jdbc.JdbcOperation"%>






    
    


数据展示
 
	
    
    

    
    <%
    	ArrayList list1  = JdbcOperation.selectIndexByName("煤炭指数");
    	int num = list1.size();
    %>
    
    

结果图

问题

       使用的方法相对于JSP使用Echarts的最简单的例子 中使用JSON数据传值可能绕远路了，但是遇到了之前不熟悉的问题，即js如何使用jsp中Java代码中的变量。

       正如参考3中的内容，如果Java变量为字符串类型，则js在获取该值时，需要加双引号。因为没有加双引号，运行出的界面一直是空白的，费了很长时间。另外折线图的实现参考了教程中最简单的实现方式，只设置了x,y轴的数据等基本设置，很多样式和效果还不会用。

<%
    String title = "2020-05-22";
    int i = 100;
%>