好久没写东西,这两天研究了下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
},
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数据。