echarts餅圖

　　在echarts的官網上我們可以看到很多的官方實例，很多酷炫的模型都已經設計好了，不過這些模型的數據一般都是在實例中寫死，平時在我們項目里可沒有這些死數據，如何從后台獲取需要的數據，並且把這些數據拼裝成echarts需求的json數據，這個對於像我一樣的小白可能有點麻煩，這里我把我解決的過程簡要的做個總結。

　　首先獲取數據我們可以通過ajax的方式從后台獲取數據源並將返回的數據設置成json格式，至於后台的數據得先根據你的echarts圖需要的格式設計。比如餅狀圖需求的數據格式為({  name :張三,value : 666 }，{  name :李四,value : 333})

　　下面我會上具體的代碼來說明：

   　1、首先是在controller上寫出獲取數據的方法

 //這個方法一般用於前台ajax請求獲取數據  
//一般寫在controller中，你這個按照springMVC的注解給這個方法添加訪問路徑         
public Map<String, Object> getData() {
                 int a = 0;// a代表已采集
        int b = 0;// b代表等待采集
        int c = 0;// c代表延遲未提供
        int d = 0;// d代表數據稽核預警
        int e = 0;// e代表采集異常
    //這里可以通過后台的方法獲取數據源，然后對數據進行加工，獲取echarts圖形需要            //的數據，即我上面設置的abcde
    List<Resource> collectList = resourceService.getResourceByList();
     //之后可以通過foreach循環處理數據或者
        for (Resource li : collectList) {
            //具體處理這里就不寫了
        ｝ 
            List<String> name = new ArrayList<>();
        List<Integer> value = new ArrayList<>();    
                // 給name傳值
        name.add("已采集");
        name.add("等待采集");
        name.add("延遲未提供");
        name.add("數據稽核預警");
        name.add("采集異常");

        // 給value傳值，這里的abcde
        value.add(a);
        value.add(b);
        value.add(c);
        value.add(d);
        value.add(e);            

      Map<String, Object> data = new HashMap<String, Object>();
        data.put("names", name);
        data.put("values", value);

        return data;
    }

　　2、在jsp頁面上引入你需要相關控件,並給你的echarts圖畫個容器

<!-- 引人三個echarts餅狀圖 -->
<script type="text/javascript" src="<c:url value='/js/echarts.min.js'/>"></script>

<!-- 給echarts圖一個容器-->
<div id="collect" style="width: 200px; height: 230px">

</div>

　　3、編寫獲取數據、拼裝成對應json格式並寫入echarts的javascrpt代碼

<script type="text/javascript">
        //第一步獲取echarts需要的json數據    
        function queryCollect() {
            $.ajax({
                type : 'GET',
                url : '${pageContext.request.contextPath}/home/getEcharts',
                cache : false,
                dataType : 'json',
                success : function(data) {
                    if (data != null) {
                        createCollectEcharts(data);
                    } else {
                        art.dialog.alert("操作失敗");
                    }
                }
            })
        }

        //第二步將數據在函數中轉拼成需要的json格式
        function createCollectEcharts(data) {

            var res = [];
            var na = [];
            for (var i = 0, size = data.names.length; i < size; i++) {
                res.push({
                    name : data.names[i],
                    value : data.values[i]
                });
                na.push({
                    name : data.names[i]
                });
            }

            //第三步將數據填充進餅狀圖    

            var myChart = echarts.init(document.getElementById("collect"));
            myChart.clear();
            //alert();
            var option = {
                //color : [ '#0081e3', '#f27366' ],
                tooltip : {
                    trigger : 'item',
                    formatter : "{a} <br/>{b}: {c} ({d}%)"
                },
                legend : {
                    orient : 'vertical',
                    x : 'left',
                    textStyle : {
                        color : '#C3E2FF'
                    },
                    data : na
                },
                series : [ {
                    name : '采集來源',
                    type : 'pie',
                    radius : [ '55%', '75%' ],
                    itemStyle : {
                        normal : {
                            label : {
                                show : false
                            },
                            labelLine : {
                                show : false
                            }
                        }
                    },
                    data : res
                } ]
            };
            myChart.setOption(option);

        }
    </script>

　　這樣一個完整的餅狀圖設計就完成了，echarts圖的js代碼在官網有各種樣式，有興趣的可以去試試別的更酷炫的模型。

　　最后附上echarts網址：http://echarts.baidu.com/