81,091
社区成员
发帖
与我相关
我的任务
分享关于echarts折线图
最近在写一个关于折线图的问题，后台和前端写出来以后一直调用不到，找错误也没发现问题出在哪了，各位大大帮忙看一下
这是action层调的service
Struts配置文件
前端写了一个div
js
这是action层调的service
public String showOracleLine(Oracle oracle){
int length=oracleService.getOracleNumList().size();
Map<String, Object> id = oracleService.getOracleInfo(oracle.getOracleId());
Map<String, Object> state = oracleService.getOracleInfo(oracle.getState());
System.out.println(oracle.getOracleId());
JSONArray json = JSONArray.fromObject(id);
json.add(state);
json.add(length);
result = json.toString();
return SUCCESS;
}
Struts配置文件
<action name="json_oracle_*" class="cn.horizon.platform.oracle.action.OracleAction" method="{1}">
<result type="json">
<param name="root">result</param>
</result>
</action>
前端写了一个div
<form id="lineForm">
<input type="hidden" name="oracleId" id="oraclId" />
</form>
<div class="kuangJiaURL metric" style="position: relative;margin-left:0px;height:300px">
<div id="showLine" style="width:100%;height:300px">
</div>
</div>
js
function showLine() {
var action = "${pageContext.request.contextPath}/json_oracle_showOracleLine.action";
var loadAChart = echarts.init(document.getElementById("showLine"));
var option = {
title : {
text : '数据库信息'
},
// 鼠标悬停信息
tooltip : {
trigger : 'axis'
},
// 工具箱
toolbox : {
left : 'right',
restore : {},
},
// 图例
legend : {
data : [],
textStyle : {
fontSize : 14,
fontWeight : 'bolder',
color : '#fff'
}
},
// 直角坐标系内绘网格
grid : {
containLabel : true,
right : 20,
left : 20
},
xAxis : {
type : 'category',
splitLine : {
show : false
},
data : [],
// 坐标轴轴线设置
axisLine : {
lineStyle : {
color : 'white',
type : 'solid',
width : 1
}
},
// 坐标轴刻度
axisTick : {
show : true,
interval : 'auto',
length : 5,
lineStyle : {
color : 'white',
width : 2,
}
},
},
yAxis : {
type : 'value',
splitNumber : 2,
// 坐标轴轴线设置
axisLine : {
show : false,
lineStyle : {
color : 'white',
type : 'solid',
width : 1
}
},
// 坐标轴文本标签
axisLabel : {
textStyle : {
color : "white",
fontSize : 12
}
},
},
// series : {
// type : 'line'
// },
};
loadAChart.showLoading();
loadAChart.setOption(option);
loadAChart.resize();
$.ajax({
type: "POST",
url: action,
contentType: "application/x-www-form-urlencoded; charset=utf-8",
data: $('#lineForm').serialize(),
dataType : "json",
success: function(data){
var ret = eval('(' + data + ')');
$("#showLine").show();
var option = {
xAxis : {
type : 'category',
data : ret.id,
boundaryGap:false
},
yAxis : {
type : 'category',
data : ret.state,
boundaryGap:false
},
series : [
{
name : '数据库信息',
type : 'line',
data : ret.data,
smooth: true,
lineStyle:{
normal:{
color:'#fb6f51'
}
}
}
]
};
loadAChart.hideLoading();
loadAChart.setOption(option);
loadAChart.resize();
}
})
}
...全文
请发表友善的回复…
发表回复
shushuiu 2017-02-06
- 打赏
- 举报
function showline(){
var loadAChart = echarts.init(document.getElementById('showLine'));
var option = {
tooltip: {
trigger: 'axis'
},
title: {
text: '数据库信息',
top : '2%',
left : '10%',
textStyle : {
color : "white",
fontSize : 16
}
},
legend: {
top : '3%',
data:['信息'],
textStyle : {
color : "white",
fontSize : 14
}
},
xAxis: {
//坐标轴轴线设置
axisLine:{
lineStyle:{
color : 'white',
type : 'solid',
width : 2
}
},
//坐标轴文本标签
axisLabel : {
show : true,
interval:0,
textStyle : {
color : "white",
fontSize : 12
}
},
splitLine : {
show : false
},
type: 'category',
boundaryGap: false,
data: []
},
yAxis: {
type: 'value',
splitNumber:1,
//坐标轴轴线设置
axisLine:{
show:false,
lineStyle:{
color : 'white',
type : 'solid',
width : 1
}
},
//坐标轴文本标签
axisLabel : {
textStyle : {
color : "white",
fontSize : 12
}
},
//坐标轴刻度
axisTick : {
show : false,
//interval : 'auto',
//length : 5,
lineStyle : {
color : 'white',
width : 2,
}
},
},
series: [
/* {
data : [],
smooth: true,
lineStyle:{
normal:{
color:'#fb6f51'
}
}
} */
]
};
loadAChart.showLoading();
loadAChart.setOption(option);
$.ajax({
type: "POST",
url: "${pageContext.request.contextPath}/json_oracle_showOracleLine.action",
//contentType: "application/x-www-form-urlencoded; charset=utf-8",
//data : $("#targetForm").serialize(),
//dataType : "json",
success : function(data){
var ret = eval('(' + data + ')');
$("#showLine").show();
var option = {
xAxis : {
type : 'category',
data : ret.oracleId,
boundaryGap:false
},
// yAxis : {
// type : 'category',
// data : ret.state,
// boundaryGap:false
// },
series : [
{
name : '信息',
type : 'line',
data : ret.data,
smooth: true,
lineStyle:{
normal:{
color:'#fb6f51'
}
}
}
]
};
loadAChart.hideLoading();
loadAChart.setOption(option);
}
})
}
shushuiu 2017-02-06
- 打赏
- 举报
alert出来的就是所需要的一个数组，数据都有，但是X轴上显示只能显示第一个
shushuiu 2017-02-06
- 打赏
- 举报
现在后台数据可以传到前台了，但是X轴只会显示一个数据，动态的也是一个，静态的也是一个
java_forward 2017-02-04
- 打赏
- 举报
ajax的post方式改成get方式
qq_34018957 2017-02-03
- 打赏
- 举报
估计是json格式不太对，你把数据alert处理看一下，如果alert出来的是你看到是json的字符串那就不对，
因为series里面放的是json的对象。
tongxuejie 2017-01-25
- 打赏
- 举报
不能调试一下吗？
shushuiu 2017-01-24
- 打赏
- 举报
哪里简单了 现在action能进去 但还是没值
podd 2017-01-24
- 打赏
- 举报
500错误就是你看下后台报什么错误
花间_拾零 2017-01-24
- 打赏
- 举报
这么简单的问题 发帖多浪费
shushuiu 2017-01-24
- 打赏
- 举报
现在action能接收值，但是值不对 报500错误好忧伤
shushuiu 2017-01-24
- 打赏
- 举报
echarts用假数据都能显示出来，加上正确的就开始转圈了，在json的URL引用的时候，链接无效
podd 2017-01-23
- 打赏
- 举报
用假数据看看你的echarts显示正确吗，如果正确就是数据加载那块地问题，看传过来的数据格式是怎样的
shushuiu 2017-01-23
- 打赏
- 举报
但是页面就是布调用json_oracle_showOracleLine.action 可能是前台的问题
