echarts在HTML里测试正常,在jsp页面不显示,而且还把整个页面变成空白

aumgla 2015-11-09 08:56:58
echarts在HTML里测试正常,在jsp页面不显示,而且还把整个页面变成空白,请大神帮忙,急,在线等

<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2015-8-5
Time: 17:22:27
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>

<c:set var="lx" value="${pageContext.request.contextPath}" />
<html>
<head>
<title>店铺销售量和浏览量</title>
<!-- ECharts单文件引入 -->
<script src="${lx}/static/dist/echarts.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: '${lx}/static/dist',
}
});
// 不习惯模块化的你当然可以
var echarts;
require(['echarts'], function (ec){
echarts = ec;
});
// 是的,把echarts加载后保存起来作为命名空间使用
// 使用
require(
[
'echarts',
'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载
],
function (ec) {
// 基于准备好的dom,初始化echarts图表
var myChart = ec.init(document.getElementById('main'));

var option = {
tooltip: {
show: true
},
legend: {
data: ['销量']
},
xAxis: [
{
type: 'category',
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
"name": "销量",
"type": "bar",
"data": [5, 20, 40, 10, 10, 20]
}
]
};

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

</script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="height: 400px; width:800px; border: 1px solid #ccc; padding: 10px;"></div>
<div id="test" style="height: 400px; width:800px; border: 1px solid #ccc; padding: 10px;"></div>

<%--<tags:pagination page="${sales}" paginationSize="5" />--%>
</body>
</html>


...全文
6912 45 打赏 收藏 转发到动态 举报
写回复
用AI写文章
45 条回复
切换为时间正序
请发表友善的回复…
发表回复
BarneyWong 2018-10-26
  • 打赏
  • 举报
回复 1
改变一下Echarts.js的加载顺序就可以了,最好是放到第一位。就可以了。
代码羡 2018-03-12
  • 打赏
  • 举报
回复
引用 42 楼 qq_35852845 的回复:
我也遇到了同样的问题 楼主能不能说一下是什么问题啊
去Echart的官网下载echarts.min.js(完整版),不要用其他的,试一下,我的是这样解决的
ZB984705818 2016-09-25
  • 打赏
  • 举报
回复
要为div设置宽 高
qq_35852845 2016-09-24
  • 打赏
  • 举报
回复
我也遇到了同样的问题 楼主能不能说一下是什么问题啊
it_lh 2016-09-19
  • 打赏
  • 举报
回复
草泥马!!!
  • 打赏
  • 举报
回复
你这种人不值得给你答复,问题解决了不说明具体原因,你跑来干啥来了???
hfq03 2016-04-21
  • 打赏
  • 举报
回复
springMVC调用.do跳转echarts的jsp页面,显示一片空白,但是直接访问这个jsp页面就可以显示
zz77878364 2016-01-15
  • 打赏
  • 举报
回复
哪个ID重复了啊 我也遇到了同样的问题,直接访问数据写死的JSP可以显示,但是加上动态数据就不行了,跳转到该页面的时候也不行
aumgla 2015-11-14
  • 打赏
  • 举报
回复
引用 36 楼 hemowolf 的回复:
搞定了,就结帖给分呗
已经在你回复前2小时就结贴给分了
aumgla 2015-11-09
  • 打赏
  • 举报
回复
引用 27 楼 yanghaimingg 的回复:
你页面是不是没引入jquery,引入试试
引用之后没有变化
mtian2020 2015-11-09
  • 打赏
  • 举报
回复
你页面是不是没引入jquery,引入试试
aumgla 2015-11-09
  • 打赏
  • 举报
回复
引用 25 楼 yanghaimingg 的回复:
给你个option,替换你的试下 option = { title : { text: '某站点用户访问来源', subtext: '纯属虚构', x:'center' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient : 'vertical', x : 'left', data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'] }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : { show: true, type: ['pie', 'funnel'], option: { funnel: { x: '25%', width: '50%', funnelAlign: 'left', max: 1548 } } }, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, series : [ { name:'访问来源', type:'pie', radius : '55%', center: ['50%', '60%'], data:[ {value:335, name:'直接访问'}, {value:310, name:'邮件营销'}, {value:234, name:'联盟广告'}, {value:135, name:'视频广告'}, {value:1548, name:'搜索引擎'} ] } ] };
试过了,还是老样子,应该不是option的问题,因为我之前也在官网里找过option试过
mtian2020 2015-11-09
  • 打赏
  • 举报
回复
给你个option,替换你的试下 option = { title : { text: '某站点用户访问来源', subtext: '纯属虚构', x:'center' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient : 'vertical', x : 'left', data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'] }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : { show: true, type: ['pie', 'funnel'], option: { funnel: { x: '25%', width: '50%', funnelAlign: 'left', max: 1548 } } }, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, series : [ { name:'访问来源', type:'pie', radius : '55%', center: ['50%', '60%'], data:[ {value:335, name:'直接访问'}, {value:310, name:'邮件营销'}, {value:234, name:'联盟广告'}, {value:135, name:'视频广告'}, {value:1548, name:'搜索引擎'} ] } ] };
aumgla 2015-11-09
  • 打赏
  • 举报
回复
引用 23 楼 aumgla 的回复:
[quote=引用 22 楼 aumgla 的回复:] [quote=引用 21 楼 yanghaimingg 的回复:] 就这样,相信我,我的就是这么写的
已经试过了,而且你还有多余的东西没删,结果还是提示Uncaught ReferenceError: require is not defined[/quote] 说错了,没有提示了,只是把script上面的部分全部变没了,还是没有图表显示出来[/quote] 经过测试,你这样写在html里也是成功的,但在jsp里还是失败了,和我的一样,没有错误信息的提示,就是显示空白
aumgla 2015-11-09
  • 打赏
  • 举报
回复
引用 22 楼 aumgla 的回复:
[quote=引用 21 楼 yanghaimingg 的回复:] 就这样,相信我,我的就是这么写的
已经试过了,而且你还有多余的东西没删,结果还是提示Uncaught ReferenceError: require is not defined[/quote] 说错了,没有提示了,只是把script上面的部分全部变没了,还是没有图表显示出来
aumgla 2015-11-09
  • 打赏
  • 举报
回复
引用 21 楼 yanghaimingg 的回复:
就这样,相信我,我的就是这么写的
已经试过了,而且你还有多余的东西没删,结果还是提示Uncaught ReferenceError: require is not defined
mtian2020 2015-11-09
  • 打赏
  • 举报
回复
就这样,相信我,我的就是这么写的
aumgla 2015-11-09
  • 打赏
  • 举报
回复
引用 19 楼 yanghaimingg 的回复:
<script src="./dist/echarts-all.js"></script> <script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); var option = { tooltip: { show: true }, legend: { data:['销量'] }, xAxis : [ { type : 'category', data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] } ], yAxis : [ { type : 'value' } ], series : [ { "name":"销量", "type":"bar", "data":[5, 20, 40, 10, 10, 20] } ] }; // 为echarts对象加载数据 myChart.setOption(option); } ); </script> 你的脚本改成我这个试试
这个脚本里连用折线图,还是圆柱图,还是什么都没有写呢?你确定要我改成这样?还是说只是用echarts-all.js把echarts.js换了?
mtian2020 2015-11-09
  • 打赏
  • 举报
回复
<script src="./dist/echarts-all.js"></script> <script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); var option = { tooltip: { show: true }, legend: { data:['销量'] }, xAxis : [ { type : 'category', data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] } ], yAxis : [ { type : 'value' } ], series : [ { "name":"销量", "type":"bar", "data":[5, 20, 40, 10, 10, 20] } ] }; // 为echarts对象加载数据 myChart.setOption(option); } ); </script> 你的脚本改成我这个试试
aumgla 2015-11-09
  • 打赏
  • 举报
回复
引用 16 楼 yanghaimingg 的回复:
是不是少引了js文件?你去下载个echarts-all.js替换你的试试
也不行,用echarts-all.js把echarts.js换了,直接提示Uncaught ReferenceError: require is not defined
加载更多回复(24)

81,090

社区成员

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧