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/