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

最新推荐文章于 2023-10-24 10:20:02 发布

yangc_cong

最新推荐文章于 2023-10-24 10:20:02 发布

阅读量3.4k

点赞数 2

分类专栏： Java 文章标签： js jsp 折线图 Java

本文链接：https://blog.csdn.net/yangc_cong/article/details/106271162

版权

Java 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

参考

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"%>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数据展示页面2</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<h1>数据展示</h1> 
	
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="lineChart1" style="width: 600px;height:400px;"></div>
    
    <%
    	ArrayList<IndexData> list1  = JdbcOperation.selectIndexByName("煤炭指数");
    	int num = list1.size();
    %>
    
    <script type="text/javascript">
    	var txs = new Array();
    	var tys = new Array();
    	
    	<%
    	for(int i = 0; i<num; i++){
    	    IndexData d = list1.get(i);
    	%>
    	    txs[<%=i%>] = "<%=d.getRelease_date()%>";
    	    tys[<%=i%>] = <%=d.getIndexNum()%>;
    	<%
    	}
    	%>
    
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('lineChart1'));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '煤炭指数'
            },
            tooltip: {},
            legend: {
                data:['指数值']
            },
            xAxis: {
                data: txs
            },
            yAxis: {},
            series: [{
                name: '煤炭指数',
                type: 'line',
                data: tys
            }]
        };
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>

</body>
</html>

结果图

问题

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

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

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

<script type="text/javascript">

    var _title = "<%=title%>";    //需要加双引号
    var _i = <%=i%>;    //不需要加上引号，加上也可以

</script>

yangc_cong

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
使用ECharts在jsp页面中实现折线图

参考ECharts教程|菜鸟教程 JSP使用Echarts的最简单的例子 --这里使用了JSON格式来传数据，相同方式的可以参考一下 JSP传递参数到JS中的方法和问题 --因为涉及js使用jsp中的变量目的使用ECharts将后台数据库中的数据在jsp页面中以图表形式展示，例如折线图。方法我采取的获取数据库数据的方式是直接从jsp页面中嵌入Java代码，然后再将数据以折线图形式展示。代码实现jsp页面的内容如下，直接复制过来：<%@ page language="
复制链接

扫一扫