Echart是百度出品的資料展示外掛，優點是簡單易用，互動性強，資料展示形式豐富，介面美觀，資料注入方便。以下為本人在最近的的一個專案中使用Echart的心得。

百度的Echart做了很好的封裝，只需在JS中對Echart進行配置即可在頁面指定的區域顯示相應的資料展示表格，其中配置資料展示的關鍵是對option的配置，而option中的xAxis中的data和series中的data是配置資料的核心，在此著重對這兩個data進行配置。

這兩個屬性的引數均是陣列，且該屬性對資料的格式要求比較嚴格，必須是js的陣列格式，而複合js陣列形式的字串是不支援的，因此需要我們把後臺傳來的資料拼裝為陣列後再傳到option中，以下以官方文件的入門例程為基礎修改為新的例程進行講解。首先說一下整體思路：1、建立模型類->2、從資料庫查詢資料，為模型類賦值->3、將資料物件傳到前臺進行遍歷放入陣列內，完成資料注入。

1. 首先建立資料模型類ChartsData。option所需要從後臺獲取的資料有x 軸專案名，y軸資料，因此建立兩個屬性dataName和dadaNum,建立get、set方法。

public class ChartsData {

    private String dataName;
    private Integer dataNum;
    public String getDataName() {
        return dataName;
    }
    public void setDataName(String dataName) {
        this
 
.dataName = dataName;
    }
    public Integer getDataNum() {
        return dataNum;
    }
    public void setDataNum(Integer dataNum) {
        this.dataNum = dataNum;
    }

2.為方便說明採用假資料對ChartsData進行初始化，初始化完成後將資料放在request域中傳遞到前臺，在js中進行解析。

ChartsData chartsData0 = new ChartsData();
        chartsData0.setDataName("襯衫"
 
);
        chartsData0.setDataNum(5);

        ChartsData chartsData1 = new ChartsData();
        chartsData1.setDataName("羊毛衫");
        chartsData1.setDataNum(20);

        ChartsData chartsData2 = new ChartsData();
        chartsData2.setDataName("雪紡衫");
        chartsData2.setDataNum(40);

        ChartsData chartsData3 = new ChartsData();
        chartsData3.setDataName("褲子");
        chartsData3.setDataNum(10);

        ChartsData chartsData4 = new ChartsData();
        chartsData4.setDataName("高跟鞋");
        chartsData4.setDataNum(10);

        ChartsData chartsData5 = new ChartsData();
        chartsData5.setDataName("襪子");
        chartsData5.setDataNum(20);

        List<ChartsData> data =new ArrayList<>();
        data.add(chartsData0);
        data.add(chartsData1);
        data.add(chartsData2);
        data.add(chartsData3);
        data.add(chartsData4);
        data.add(chartsData5);

    model.addAttribute("chartData", data);

3.在js中使用El表示式從域中取普通物件時會丟失資料結構而變成字串，無法進行遍歷操作。但是js是可以直接解析json物件的，因此將資料物件轉換為json物件，由於El表示式在從域中取出物件進行解析時是呼叫的該物件toString方法，因而重寫ChartsData類的toString讓El表示式在取到該物件進行解析時解析到出的是一個json格式字串，js會將這個字串解析為json物件而可以進行遍歷操作

@Override
    public String toString() {
        return "{\"dataName\":\""+ dataName + "\""+",\"dataNum\":"+dataNum+"}";
    }

4.遍歷資料物件時呼叫陣列的push方法將資料拆裝到相應陣列中，完成注入

  <script>
    var $dataNum=[];
    var $dataName=[];
    $(function() {
         var $temp=${chartData};
         for(var i=0;i<$temp.length;i++)  
         {  
             $dataName.push($temp[i].dataName);  
             $dataNum.push($temp[i].dataNum);  
         } 
    });
</scripts>

• js程式碼

 <script>
    var $dataNum=[];
    var $dataName=[];
    $(function() {
         var $temp=${dataInfo};
         for(var i=0;i<$temp.length;i++)  
         {  
             $dataName.push($temp[i].dataName);  
             $dataNum.push($temp[i].dataNum);  
         } 
    });

            require.config({
                paths: {
                    echarts:'http://echarts.baidu.com/build/dist'
                }
            });

            require(
                    [
                        'echarts',
                        'echarts/chart/bar', // 使用柱狀圖就載入bar模組，按需載入
                        'echarts/chart/line'
                    ],
                    function (ec) {
                        // 基於準備好的dom，初始化echarts圖表
                        var myChart = ec.init(document.getElementById('chart')); 

                        var option = {

                            calculable : true,

                            toolbox: {
                                show : true,
                                feature : {
                                    mark : {show: true},
                                    dataView : {show: true, readOnly: false},
                                    magicType : {show: true, type: ['line', 'bar']},
                                    restore : {show: true},
                                    saveAsImage : {show: true}
                                }
                            },

                            tooltip: {
                                show:true
                            },
                            legend: {
                                data:['銷量'],
                                x : 'center',
                                y : 'bottom'
                            },
                            xAxis : [
                                {
                                    type : 'category',
                                    data : $dataName
                                }
                            ],
                            yAxis : [
                                {
                                    type : 'value',
                                }
                            ],
                            series : [
                                {
                                    "name":"銷量",
                                    "type":"line",
                                    "data": $dataNum,
                                    markPoint : {
                                    data : [
                                        {type : 'max', name: '最大值'},
                                        {type : 'min', name: '最小值'}
                                            ]
                                        },
                                    markLine : {
                                        data : [
                                            {type : 'average', name: '平均值'}
                                        ]
                                    },
                                    itemStyle:{
                                        normal:{
                                            color:'#3fa1ff'
                                        }
                                    }

                                }
                            ]
                        };

                        // 為echarts物件載入資料 
                        myChart.setOption(option); 
                    }
                );


    </script>

• 效果圖
  -