使用ECharts在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>

 

 

 

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读