Echart显示白屏的一个求助问题_etcher打开空白-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44706623/article/details/113827324

关于EChart在接受数据库数据后无法显示的问题，求助

今天遇到一个问题，是echart在得到数据传输后空白的问题，我是部署在eclipse上的java web工程，这里想只通过1个Servlet将数据传到display.jsp进行显示，因为经过debug，在开头段的java代码成功将数据传输给了dtlist数组，甚至在series里的data部分代码在实际运行时已经成功传入数据，因此我认为并不是Servlet的问题，我就不放servlet代码了。
我的display.jsp代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<%@page import="com.syc.bean.datalist" %>
<html>
<head>
<meta charset="UTF-8">
<title>业务统计</title>
<script type="text/javascript" src='echarts.js'></script>
</head>
<body>
	<% request.setCharacterEncoding("utf-8"); datalist dtlist=(datalist)request.getAttribute("Datalist"); int
	datalst[]=new int[18]; datalst=dtlist.getDatalist();%>
	<div id="chart" style="width:1200px;height:700px;">
	<script type="text/javascript">
	var myChart = echarts.init(document.getElementById('chart'));
	var options = {
		title: {
			text: '各房间总销量情况柱状图',
			left: 'center'
		},
		grid: {
			x: 400,
			y: 50,
			borderWidth: 1
		},
		legend: {
			x: 'right',
			y: 'top',
			data: ['销量']
		},
		xAxis: {
			data: ['101', '102', '103', '104', '105', '106', '201', '202', '203', '204', '205', '206', '301', '302', '303', '304', '305', '306']
		},
		yAxis: {
		},
		series: [{
			name: '销量',
			type: 'bar',
			
			data: [<%= datalst[0] %>,<%= datalst[1] %>,<%= datalst[2] %>,<%= datalst[3] %>,<%= datalst[4] %>,<%= datalst[5] %>,<%= datalst[6] %>,<%= datalst[7] %>,<%= datalst[8] %>,<%= datalst[9] %>,<%= datalst[10] %>,<%= datalst[11] %>,<%= datalst[12] %>,<%= datalst[13] %>,<%= datalst[14] %>,<%= datalst[15] %>,<%= datalst[16] %>,<%= datalst[17] %>]
		}]
	};
	myChart.setOption(options);
	</script>
	</div>
</body>
</html>

datalist定义的java文件如下

package com.syc.bean;

public class datalist {
	private int datalist[] = new int[18];
	
	public int[] getDatalist() {
		return datalist;
	}
	
	public void setDatalist(int[] datalist) {
		this.datalist = datalist;
	}
}

在eclipse用本地Tomcat运行后白屏以及Tomcat未报错界面如下：
在这里插入图片描述在此界面所获得的源代码如下：


<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>业务统计</title>
<script type="text/javascript" src='echarts.js'></script>
</head>
<body>
	
	<div id="chart" style="width:1200px;height:700px;">
	<script type="text/javascript">
	var myChart = echarts.init(document.getElementById('chart'));
	var options = {
		title: {
			text: '各房间总销量情况柱状图',
			left: 'center'
		},
		grid: {
			x: 400,
			y: 50,
			borderWidth: 1
		},
		legend: {
			x: 'right',
			y: 'top',
			data: ['销量']
		},
		xAxis: {
			data: ['101', '102', '103', '104', '105', '106', '201', '202', '203', '204', '205', '206', '301', '302', '303', '304', '305', '306']
		},
		yAxis: {
		},
		series: [{
			name: '销量',
			type: 'bar',
			
			data: [1,1,1,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0]
		}]
	};
	myChart.setOption(options);
	</script>
	</div>
</body>
</html>

可以看到如刚才所说，数据已经成功传入。将这个代码保存，在Firefox直接打开，结果正常，如下：
在这里插入图片描述请问这是什么原因？可以正常传入数据为何不能正常显示呢？