百度echarts是一種很好的繪製圖表的工具，現在介紹一下如何非同步載入echarts的資料

我的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();      
    }   
}

最終效果圖：

ps：demo中還加上了餅圖的非同步載入方法，直接上程式碼吧。