echart 饼图处理 数据格式化 option动态赋值 点击事件处理

系统工程是ssm框架的

我是把后台需要的数据格式，直接在前台处理后响应的，也可以在前台处理的，
遇到两个问题当时：
**1，开始往jsonarray中add时出现了数据覆盖的问题，打印出$ref
解决：jsonObject的put方法，每次的key相同了，覆盖了之前的。
2，在点击事件那里，官网的例子是可以用的，但是我用了，直接中option的series的data中取不到值，无法循环，后来用myChart.getOption，就可以取到option中series的data数据了**

前端jsp：

<!-- 为饼图准备一个容器 -->
    <div id="wrong-message" style="color:blue;  font:bold 20px 宋体;"></div>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height: 400px"></div>
    <script type="text/javascript">
        var myChart;
        var eCharts;
        require.config({
                    paths : {
                        'echarts' : '${pageContext.request.contextPath}/ultrapower/echarts.js',
                        'echarts/chart/pie' : '${pageContext.request.contextPath}/ultrapower/echarts.js',
                        'echarts/chart/funnel' : '${pageContext.request.contextPath}/ultrapower/echarts.js'
                    }
                });
        require([ 
            'echarts', 
            'echarts/chart/pie', // 按需加载所需图表，用到什么类型就加载什么类型，这里不需要考虑路径                    
            ], 
            function(ec) {
            eCharts = ec;
            myChart = eCharts.init(document.getElementById('main'));        
            var option =  {
                    title : {
                        text: '商家快递选择',
                        subtext: '纯属虚构',
                        x:'center'
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient : 'vertical',
                        x : 'left',
                        data:[]
                    },
                    toolbox: {
                        show : true,
                        feature : {
                            mark : {show: true},
                            dataView : {show: true, readOnly: false},
                            magicType : {
                                //show: true, 
                                type: ['pie']
                            },
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }                       
                    },
                    //饼图外圈线
                    calculable : false,
                    series : [
                        {
                            name:'快递公司',
                            type:'pie',
                            selectedMode: 'single',
                            radius : [100, 140],
                            //center: ['50%', '60%'],
                            //饼图样式，是否显示链接线
                            itemStyle : {
                                normal : {
                                    labelLine : {
                                        show : true
                                    }
                                }
                            },                          
                            data:[] 

                        }
                    ]

                };          
            myChart.hideLoading();
            myChart.setOption(option); //先把可选项注入myChart中            
            getChartData();//ajax后台交互  
            function getChartData() {  
            //获得图表的options对象  
            var optionsAjax = myChart.getOption();  
            //通过Ajax获取数据  
            $.ajax({  
                type : "post",  
                async : false, //同步执行  
                url:"${pageContext.request.contextPath}/order/login/pie_data.do",  
                //data:{},  
                dataType:"json", //返回数据形式为json  
                success:function(result) {                                  
                   // alert("success");                 
                    //alert(result);                    
                    if (result) {
                        optionsAjax.legend.data = result[0].legend;  
                        optionsAjax.series[0].data = result[0].series;
                        //options.xAxis[0].data = result.category;  
                        myChart.hideLoading();  
                        myChart.setOption(optionsAjax);  
                        /* alert("ajax赋值成功");
                        var aaa = myChart.getOption().series[0].data[0].name;
                        alert(aaa); */
                    }  
                },  
                error : function(errorMsg) {  
                    alert("不好意思，请求数据出错");  
                    myChart.hideLoading();  
                }  
            });  
        }; 

        //饼图的点击事件
        var ecConfig = require('echarts/config');
        myChart.on(ecConfig.EVENT.PIE_SELECTED, function (param){               
             var selected = param.selected;
                var serie;
                var str = '当前选择： ';
                for (var idx in selected) {
                    serie = myChart.getOption().series[idx];
                    for (var i = 0, l = serie.data.length; i < l; i++) {
                        if (selected[idx][i]) {
                           /*  str += '【系列' + idx + '】' + serie.name + ' : ' + 
                                   '【数据' + i + '】' + serie.data[i].name + ' '; */
                            str += '【快递公司】' + serie.data[i].name + ' : ' + 
                                   '【选择数据】' + serie.data[i].value + ' '+
                                   '【占比】' + (serie.data[i].value/10)*100 + '% ';
                        }
                    }
                }
                document.getElementById('wrong-message').innerHTML = str;           
          /*   var selected = param.selected;
            var serie;
            serie = myChart.getOption().series[0];        
            if (jQuery.inArray(true, selected[0]) > -1) { 
                 alert("进入data处理前");
                for (var i = 0; i < serie.data.length; i++) {  
                    if (selected[0][i]) {
                        alert("赋值");
                        alert(serie.data[i].name);
                        //$("#wrong-message").val(serie.data[i].name); serie.data[i].name
                        document.getElementById('wrong-message').innerHTML = serie.data[i].name;
                    }  
                }  
            }  
            else {  
                alert("false");
            }  */    
        }); 
});

---

后台java处理

 @RequestMapping("/login/pie_data.do")
    public void pieData(HttpServletRequest request, 
            HttpServletResponse response) throws IOException {
        PageInfo<TbOrder> pageInfo = (PageInfo<TbOrder>) request.getSession().getAttribute("pageInfo");
        List<TbOrder> list = null;
        if(pageInfo != null){
            list = pageInfo.getList();          
        }
        Map<String,Integer> map = new HashMap<String,Integer>();
        if(list !=null && list.size()>0){
            List<TbOrder> listTbOrder = new ArrayList<TbOrder>();
            for (int i = 0; i < list.size(); i++) {
                TbOrder tbOrder = list.get(i);
                listTbOrder.add(tbOrder);
            }                       
            for(int x = 0; x < listTbOrder.size(); x ++)
            {
                String expressCompany = listTbOrder.get(x).getExpressCompany();
                int num = 1;
                if(!map.containsKey(expressCompany))
                {
                    map.put(expressCompany, 1);
                } else
                {
                    num =map.get(expressCompany);  //这是一个应该注意的,此时要记住之前的value值,再此基础上+1               
                    map.put(expressCompany, ++num);
                }
            }
        }

       // JSONArray arr = new JSONArray();
        JSONArray arrl = new JSONArray();
        List<String> legend = new ArrayList<String>();
        List<JSONObject> series = new ArrayList<JSONObject>();
        JSONObject jobl = new JSONObject();
        for(String name :map.keySet()){ 
            JSONObject job = new JSONObject();
            Integer value = map.get(name);
              /* job.put(""+name+"",value);*/
            job.put("value",value);
            job.put("name",name);
            legend.add(name);           
            series.add(job);
        }
        jobl.put("legend", legend);
        jobl.put("series", series);
        arrl.add(jobl);;
        //给图表添加数据
        response.getWriter().write(arrl.toString());
        //响应回json数据
    }