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页面中操作了

• 1
• 2

<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数据。