搭建SSH报表Demo引入报错

最新推荐文章于 2024-07-10 21:17:53 发布

最新推荐文章于 2024-07-10 21:17:53 发布 · 190 阅读

文章标签：

#运维 #javascript #java #ViewUI

echarts 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在Maven搭建的SSH框架中整合ECharts实现数据可视化，并通过JSP和Ajax获取服务器数据。文章详细记录了从配置到解决require.config()报错的全过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

maven搭建ssh框架

然后使用jsp ajax调用服务器数据

导入jquery

导入echarts-all.js

使用require.config()

firebug总是提示报错requre is not defined

然后导入esl.js

错误又定位到了echarts.js中

f is not a constructor

ComponentClass is not a constructor

http://www.lefern.com/question/116005/dao-ru-echartsjsti-shi-requiredefine-is-not-defined/

总之 require.config()用不了

后来去掉了require.config()这个方法还是不行

但是换方式至少能用了

index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<script src="js/jquery-1.7.2.js"></script>

<script >
var batteryName = new Array();
var batteryNum = new Array();

//请求查询数据
$.ajax({
	url : 'power_showAll.action',
	type : 'GET',
	dataType : 'json',
	async : false,
	success : function(jsonArray) {
		for (x in jsonArray[0]) {
			batteryNum[x] = jsonArray[0][x];
		}
		for (x in jsonArray[1]) {
			batteryName[x] = jsonArray[1][x];
		}
	}
});
console.log(batteryName)
</script>
</head>

<body>
<jsp:include page="aa.html"></jsp:include>
<script type="text/javascript"></script>
</body>
</html>

aa.html

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts单文件引入 -->
    <script src="js/echarts-all.js"></script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts图表
        var myChart = echarts.init(document.getElementById('main')); 
        
        var option = {
		title : {
			text : '电量显示',
			subtext : 'demo数据',
			sublink : 'http://spilt.iteye.com/'
		},
		tooltip : {
			trigger: 'axis',
	        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
	            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
	        }
		},
		legend : {
			data : [ '电量' ]
		},
		// 特效
		toolbox : {
			show : true,
	        orient: 'vertical',
	        x: 'right',
	        y: 'center',
	        feature : {
	            mark : {show: true},
	            dataView : {show: true, readOnly: false},
	            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
	            restore : {show: true},
	            saveAsImage : {show: true}
	        }
		},
		calculable : true,
		//参数
		xAxis : [ {
			type : 'category',
			data : batteryName
		} ],
		yAxis : [ {
			type : 'value'
		} ],
		series : [ {
			"name" : "电量",
			"type" : "bar",
			"data" : batteryNum
		} ]
	};

        // 为echarts对象加载数据 
        myChart.setOption(option); 
        
    </script>

require.config()的问题尚未解决