圆饼图

 @RequestMapping(value = "list")
       public String tailorList(Model model, @RequestParam(value = "pageNo", defaultValue = "1") int pageNo,
               @RequestParam(value = "pageSize", defaultValue = "10") int pageSize, HttpServletRequest request) throws Exception{
List<Map<String,Object>> list  = tjBoNewsService.findQueryrzlist1(columnname,createtime);
          
           List listsl= new ArrayList();//new list准备往圆饼图放值
           List listname= new ArrayList();//new list 准备往圆饼图放值
           Map<String,Object> jsonMap = null;  //new map  准备从 查出来的list中接收值 
           Map<String,Object> Maps = null;　　//同上
           for(Map<String,Object> ct : list){
                 jsonMap = new HashMap<String, Object>();
                 Maps = new HashMap<String, Object>();
                 jsonMap.put("value", ct.get("yue"));    //圆饼图的｛名字，值｝ 格式  值
                 jsonMap.put("name", ct.get("COLUMNNAME"));  //圆饼图｛名字，值｝ 名字
                 Maps.put("name", ct.get("COLUMNNAME"));  //圆饼图 明字
                 listsl.add(jsonMap);  //放进 创建好的 list
                 listname.add(Maps);   //同上
             }
          
           
         ObjectMapper objectMapper =  new ObjectMapper();//开始改变数据格式
         JsonGenerator jsonGenerator   = objectMapper.getJsonFactory().createJsonGenerator(System.out, JsonEncoding.UTF8);
         jsonGenerator.writeObject(listsl); //放入需要的list里
         String json  = objectMapper.writeValueAsString(listsl); //new 一个json 数据
           model.addAttribute("list1",list);
           model.addAttribute("createtime", createtime);
            model.addAttribute("columnname", columnname);
           model.addAttribute("listsl",listsl);
           model.addAttribute("listname",listname);
         
           return "modules/dmwz/TjBoNewsList";
         
       }

 <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById(\'main\'));
        var name = [];
        var zuhe = [];
//两个值
        <c:forEach items="${listname}" var="listname">
           name.push("${listname.name}");
        </c:forEach> 
        
        <c:forEach items="${listsl}" var="lists">
        var obj ={value:${lists.value},name:"${lists.name}"};
           zuhe.push(obj);    
        </c:forEach> 
         
 
        option = {
                title : {
                    text: \'每月发布量所占百分比\',
                    subtext: \'饼状图\',
                    x:\'center\'
                },
                tooltip : {
                    trigger: \'item\',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: \'vertical\',
                    left: \'left\',
                    data:name,     //   一
                },
                series : [
                    {
                        name:\'访问来源\',
                        type: \'pie\',
                        radius : \'75%\',
                        center: [\'50%\', \'60%\'],
                        data:zuhe,     //    二       
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: \'rgba(0, 0, 0, 0.5)\'
                            }
                        }
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
           // window.onresize = myChart.resize;
    </script>