您的位置:首页 > 其它

echarts的后台交互

2015-07-17 10:32 281 查看
好久没写东西,这两天研究了下echarts,总算是大功告成了,写把实体类放上来


public class EchartsVo {
private List<String> xAxis;
private List<String> lengend;
private List<Series> seriesList;

public List<String> getxAxis() {
return xAxis;
}

public void setxAxis(List<String> xAxis) {
this.xAxis = xAxis;
}

public List<String> getLengend() {
return lengend;
}

public void setLengend(List<String> lengend) {
this.lengend = lengend;
}

public List<Series> getSeriesList() {
return seriesList;
}

public void setSeriesList(List<Series> seriesList) {
this.seriesList = seriesList;
}

}


public class Series {
private String name;
private String type;
private List<Double> data;

public String getName() {
return name;
}

public void setName(String name) {
this.name = name;
}

public String getType() {
return type;
}

public void setType(String type) {
this.type = type;
}

public List<Double> getData() {
return data;
}

public void setData(List<Double> data) {
this.data = data;
}
}


从后台中返回“EchartsVo”的json数据即可在jsp页面中操作了


<script type="text/javascript">
$(function(){
require.config({
paths: {
echarts: '/csmis/js/echarts'
}
});
require(
[
'echarts',
'echarts/chart/line',  // 按需加载所需图表,如需动态类型切换功能,别忘了同时加载相应图表
'echarts/chart/bar'
],DrawEChart);

function DrawEChart(ec){
$.getJSON("/csmis/alarmStatics/getStaticsEchartsData.action",function(result){
var myChart = ec.init(document.getElementById('main'));
var option = {
tooltip : {
trigger: 'axis'
},
legend: {
data: result.lengend
/*由于我的option.lengend.data = result.lengend;报错提示data属性不能赋值,这么坑爹的错误,所以就写在echarts里了*/
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : []
}
],
yAxis : [
{
type : 'value',
splitArea : {show : true}
}
],
series : []
};
option.xAxis[0].data = result.xAxis;
option.series = result.seriesList;
myChart.setOption(option);
var ecConfig = require('echarts/config');
function eConsole(param) {
return;
myChart.setOption(option);
}
myChart.on(ecConfig.EVENT.CLICK, eConsole);
});
}
});
</script>


由于我的option.lengend.data = result.lengend;报错提示data属性不能赋值,这么坑爹的错误,所以就写在echarts里了
在这里提示返回的result是EchartsVo的json数据。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: