我设置当我点击按钮的时候,里面的id为main的div显示echarts报表,可是显示了一下,马上又什么都没有了.......好像又被耍了一次,很奇怪。
<%@pagelanguage="java"contentType="text/html;charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPEhtml>
<head>
<metacharset="utf-8">
<scripttype="text/javascript"
src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<scripttype="text/javascript"
src="${pageContext.request.contextPath}/js/jquery.easyui.min.js"></script>
<scripttype="text/javascript"
src="${pageContext.request.contextPath}/js/SimpleCanleder.js"></script>
<scripttype="text/javascript"
src="${pageContext.request.contextPath}/js/easyui-lang-zh_CN.js"></script>
<!--为ECharts准备一个具备大小(宽高)的Dom-->
<!--ECharts单文件引入-->
<scriptsrc="${pageContext.request.contextPath}/js/echarts.js"></script>
<scripttype="text/javascript">
//路径配置
require.config({
paths:{
echarts:'${pageContext.request.contextPath}/js'
}
});
//使用
require(
['echarts','echarts/chart/line','echarts/chart/bar'//使用柱状图就加载bar模块,按需加载
],
function(ec){
//基于准备好的dom,初始化echarts图表
varmyChart=ec.init(document.getElementById('main'));
varoption={
//animation:false,
tooltip:{
show:true,
trigger:'axis'
},
legend:{
data:['销量','营业额']
},
toolbox:{
show:true,
feature:{
mark:{
show:true
},
dataView:{
show:true,
readOnly:false
},
magicType:{
show:true,
type:['line','bar']
},
restore:{
show:true
},
saveAsImage:{
show:true
}
}
},
xAxis:[{
type:'category',
data:(function(){
vardataarr=[];
$
.ajax({
async:false,//这句必须加
method:'post',
url:'${pageContext.request.contextPath}/GetMonthServlet',
dataType:"json",
success:function(data){
dataarr=data.month;
}
});
returndataarr;
})()
}],
yAxis:[{
type:'value'
}],
series:[]/*[
{
"name":"销量",
"type":"line",
"data":[](function(){
vardataarr=[];
$
.ajax({
async:false,//这句必须加
method:'post',
url:'${pageContext.request.contextPath}/GetSalesVolumeServlet',
dataType:"json",
success:function(data){
dataarr=data.sales;
}
});
returndataarr;
})()
},
{
"name":"营业额",
"type":"line",
"data":[](function(){
vardataarr=[];
$
.ajax({
async:false,//这句必须加
method:'post',
url:'${pageContext.request.contextPath}/GetBusinessVolumeServlet',
dataType:"json",
success:function(data){
dataarr=data.businessVolume;
}
});
returndataarr;
})()
}]*/
};
//myChart.showLoading({text:'正在努力加载数据中....'});
//为echarts对象加载数据
myChart.setOption(option);
});//endofrequire
</script>
<scripttype="text/javascript">
functionsubmitForm(){
vardom=document.getElementById('main');
varmyChart=require('echarts').init(dom);
varoption={
tooltip:{
show:true,
trigger:'axis'
},
legend:{
data:['销量','营业额']
},
xAxis:[{
type:'category',
data:(function(){
vardataarr=[];
$
.ajax({
async:false,//这句必须加
method:'post',
url:'${pageContext.request.contextPath}/GetMonthServlet',
dataType:"json",
success:function(data){
dataarr=data.month;
}
});
returndataarr;
})()
}],
yAxis:[{
type:'value'
}],
series:[{
name:"销量",
type:"line",
data:[1,2,3,4,5,6]
},{
name:"营业额",
type:"line",
data:[6,5,4,3,2,1]
}]
};
//设置series
myChart.setOption(option);
}//endofsubmitForm
</script>
<title>ECharts</title>
</head>
<body>
<div>
<formonsubmit="">
Firstname:<inputtype="text"name="x1"/><br/>Lastname:<input
type="text"name="x2"/>
<buttontype="submit"class="btnbtn-default"onclick="submitForm()">查询</button>
</form>
</div>
<divid="main"></div>
</body>
------解决思路----------------------
自己搞定花时间上论坛问