圆饼图

Posted 2020-08-06 箜篌浅醉

 @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>