Echart pie chart processing data format option dynamic Assignment Click event Processing __echart pie chart

System engineering is the SSM framework

I am the background required data format, directly in front of the response after processing, can also be handled in the foreground,
Encountered two problems at that time:
**1, when you start to add to Jsonarray, there is a problem with data coverage, print out $ref
Solution: Jsonobject put method, each time the key is the same, covering the previous.
2, in the click of the event there, the official website example is available, but I used, directly in the option of the series data can not get the value, can not cycle, and later use Mychart.getoption, you will be able to take the option of series data in the * *

Front-end JSP:

<!--prepare a container for the pie chart--> <div id= "Wrong-message style=" color:blue; Font:bold 20px song body;
    ></div> <!--prepare a DOM--> <div id= "main" style= "height:400px" for echarts (width and height) ></div>
        <script type= "Text/javascript" > var myChart;
        var echarts; Require.config ({paths: {' echarts ': ' ${pagecontext.request.contextpath}/ult Rapower/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 ',///on-demand loading of the required graphs, what type of load, what type of loading, no need to consider the path
            ], function (EC) {echarts = EC;        
            MyChart = Echarts.init (document.getElementById (' main ')); Var option = {title: {text: ' Merchant Express Choice ', Subtext: ' Pure fiction ' , x: ' Center '}, tooltip: {Trigge
                    R: ' Item ', formatter: "{A} <br/>{b}: {C} ({d}%)"}, Legend: {Orient: ' Vertical ', x: ' Left ', data:[ ]}, Toolbox: {show:true, Featu Re: {mark: {show:true}, DataView: {show:true, readonly:fals 
                                e}, Magictype: {//show:true,
                            Type: [' Pie ']}, restore: {show:true}, Saveasimage: {ShoW:true}},//pie chart Outer Ring Line Calculable:false, Series: [{name: ' Express Company]
                            ', type: ' Pie ', Selectedmode: ' Single ',
                            Radius: [140],//center: [' 50% ', ' 60% '],//pie chart style, display chain wiring ItemStyle: {normal: {Labe
                                Lline: {show:true} 

                        }}, data:[]          
            }
                    ]

                };
            Mychart.hideloading (); mychart.setoption (option); First inject the optionalMyChart Getchartdata ();//ajax Background interaction function Getchartdata () {//Get OP for chart  
            tions object var optionsajax = Mychart.getoption ();  
                Get Data $.ajax via Ajax ({type: Post), Async:false,//Synchronous execution URL: "${pagecontext.request.contextpath}/order/login/pie_data.do",//data:{}, data                                  
                   Type: "JSON",//return data in the form of 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 ("Successful Ajax assignment");
                        var AAA = Mychart.getoption (). Series[0].data[0].name; Alert (AAA); */}}, Error:function (errormsg) {alert ("  
                    Sorry, request data error ");  
                Mychart.hideloading ();  
        }  
            }); 

        };
        Pie chart Click event var ecconfig = require (' Echarts/config ');
                Mychart.on (EcConfig.EVENT.PIE_SELECTED, function (param) {var SELECTED = param.selected;
                var Serie;
                var str = ' current selection: ';
                    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 = ' "series ' + idx + '" ' + Serie.name + ': ' +       ' Data ' + i + ' "' + Serie.data[i].name + ';  * str = ' "Express Company" ' + Serie.data[i].name + ': ' + ' "Select Data" '
                        + serie.data[i].value + ' + ' "accounted for" ' + (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 ("before entering data processing"); for (var i = 0; i < serie.data.length i++) {if (selected[0][i)) {alert
                        ("Assigned value");
                        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 '); 
}  */    
        }); });

Background Java processing

 @RequestMapping ("/login/pie_data.do") public void Piedata (HttpServletRequest request, httpservletrespons E 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);
                This is a should note, at this time to remember the value before, and then based on the +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);
        Add data to the chart response.getwriter (). Write (arrl.tostring ()); Response back to JSON data}