使用ajax加载echarts图表

百度echarts是一种很好的绘制图表的工具，现在介绍一下如何异步加载echarts的数据

首先贴上百度echarts的官网地址(http://echarts.baidu.com/index.html)，下载echarts.js文件和喜欢的主题js

我的demo例子是基于SSM（Spring+SpringMVC+MyBatis）框架+Maven 创建的，工程结构如下

下面来梳理一下图表需要用到的数据：

1、legend的data：图例组件，data属性要与xAxis的data属性一致

2、xAxis的data：x轴的数值

3、series： 填充图表的数据

首先看一下jsp页面如何设置

1、导入js文件

<script src="jquery/1.9.1/jquery.min.js"></script>
<script src="echarts/echarts.js"></script>
<script src="echarts/macarons.js"></script>

2、定义div块

<!-- 定义一个div块，设置宽高，图表就加载到div里面 -->
    <div id="main" style="width: 600px; height: 400px;"></div>

3、设置js脚本，利用ajax加载数据

<script type="text/javascript">
        //基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'),'macarons');

        $.ajax({
            'url' : '/echarts/chart/getAllCount.do',  //url路径
            'type' : 'post',  //数据传送方法
            'dataType' : 'json',  //返回的数据类型
            success : function(result) {
                fetchData(result);
            }

        })

        myChart.showLoading();  //显示缓冲遮盖层

        function fetchData(result) {
            myChart.hideLoading();  //隐藏遮盖层
            myChart.setOption({  //加载echarts
                 title : {
                        text: '企业年用户增加数',
                    },
                    tooltip : {  //提示框组件
                        trigger: 'axis'
                    },
                    legend: {  //图例组件
                        data:result.legend
                        //data:["数量"]
                    },
                    toolbox: {
                        show : true,
                        feature : {
                            mark : {show: true},
                            magicType : {show: true, type: ['line', 'bar']},  //可以转换为柱状图或折线图（由type定义）
                        }
                    },
                    calculable : true,
                    xAxis : [
                        {
                            type : 'category',
                            boundaryGap : false,
                            data : result.category
                            //data：["2016","2017","2018"]
                        }
                    ],
                    yAxis : {},
                    series : [
                        {
                            name: result.series.name,  
                            type: result.series.type,  
                            data: result.series.data,                       //data:["4","10","1"]
                            markPoint : {  //图表标注
                                data : [
                                    {type : 'max', name: '最大值'},
                                    {type : 'min', name: '最小值'}
                                ]
                            },
                            markLine : {  //图表标注线
                                data : [
                                    {type : 'average', name: '平均值'}
                                ]
                            }
                        },

                    ]
            });
        }

    </script>

然后看一下后台的设置：

1、ChartsModel.java （包含列表所需的所有数据）

public class ChartsModel {
    private List legend;  //对应于图表的legend的data数组
    private List category;  //对应于图表的category的data数组（就是x轴）
    private SeriesModel series;  //图表的series属性是一个对象数组，额外设置一个series类

    //get、set方法
    public List getLegend() {
        return legend;
    }
    public void setLegend(List legend) {
        this.legend = legend;
    }
    public List getCategory() {
        return category;
    }
    public void setCategory(List category) {
        this.category = category;
    }
    public SeriesModel getSeries() {
        return series;
    }
    public void setSeries(SeriesModel series) {
        this.series = series;
    }

}

2、SeriesModel.java

public class SeriesModel {
    private int id;  //series的序号（因为可能有多个series）
    private String name;  //series的名称，对应legend的name
    private String type;  //图表类型，可以是line，pie之类的
    private List data;  //图表数据

    //对应的get、set方法
    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
    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 getData() {
        return data;
    }
    public void setData(List data) {
        this.data = data;
    }
}

3、ChartServiceImpl.java的一些代码 （封装图表数据）

public ChartsModel getAllCount(){
        List<Map> list=new ArrayList(chartDao.getAllCount());
        ChartsModel chartsModel=new ChartsModel();
        SeriesModel seriesModel=new SeriesModel();

        //设置legend数组
        ArrayList list1=new ArrayList();
        list1.add("数量");

        //设置category数组（X轴）
        ArrayList list2=new ArrayList();
        for(int i=0;i<list.size();i++){
            list2.add(list.get(i).get("years"));
        }

        //设置series的data数组
        ArrayList list3=new ArrayList();
        for(int i=0;i<list.size();i++){
            list3.add(list.get(i).get("count"));
        }

        seriesModel.setId(1);
        seriesModel.setName("数量"); //series的name要与legend的元素一致 
        seriesModel.setType("bar");  //类型设为柱形图
        seriesModel.setData(list3);  //填充在X轴上面的Y轴数据

        chartsModel.setLegend(list1);
        chartsModel.setCategory(list2);
        chartsModel.setSeries(seriesModel);

        return chartsModel;
    }

4、Controller层的调用（要对应前端ajax的url地址）

@Controller
@RequestMapping("/chart")
public class ChartController {

    @Resource(name="ChartServiceImpl")
    IChartService chartService;

    @RequestMapping(value="/getAllCount.do",method=RequestMethod.POST)
    @ResponseBody
    public ChartsModel getAllCount(){
        return chartService.getAllCount();      
    }   
}

最终效果图：

最后附上demo的下载地址：（http://pan.baidu.com/s/1dFIcZ89）

ps：demo中还加上了饼图的异步加载方法，直接上代码吧。