ssm中使用echarts做图形展示数据

Map和数据库表的取存值，map和list遍历取出map值

 

 

Echarts的使用：

Echarts的引用

<scripttype="text/javascript"src="${pageContext.request.contextPath}/script/echarts.min.js"></script>

 

图形存放展示位置

<divid="mainChart"style="width:400px;height:400px;"></div>

 

 

图形的结构和数据

<scripttype="text/javascript">

//封装成函数方法，也可以不封装
        functioninitChat(){
        var myChart= echarts.init(document.getElementById('mainChart'));//图形展示的div的ID=“mainChart”
        option = {
            title : {
                text:'项目完成度',
                subtext:'内部数据',
                x:'center'
            },
            tooltip : {
                trigger:'item',
                formatter:"{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient:'vertical',
                left:'left',
                data: ["完成","未完成"]
            },
            series : [
                {
                    name:'完成和未完成数量',
                    type:'pie',
                    radius :'55%',
                    center: ['50%','60%'],

//取得list的集合的数据值，${show}即是个map，因遍历的到key-value
                    data:[
                        <c:forEachitems="${showwan}"var="show">
                            ${show},
                        </c:forEach>
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur:10,
                            shadowOffsetX:0,
                            shadowColor:'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        },
            myChart.setOption(option);
    };

//调用方法
    initChat();
</script>

 

 

 

//项目推进计划push_plan
@RequestMapping("topushPlanShow.action")
public String topushPlanShow(Model model){

//取得数据库的数据，使用list<map>方式存储值
    List<Map<String, Object>> list = projectService.queryPushPlan();
//用来存放遍历后map的键值    

ArrayList<String> wancheng = new ArrayList<>();
    for (Map maps :list){
        String wan = maps.get("completion").toString();
        String wei = maps.get("uncompletion").toString();
        wancheng.add(wan);
        wancheng.add(wei);
    }

//存在.addAttribute用于jsp页面的取值
    model.addAttribute("showwan",wancheng);
    System.err.println("_________wancheng_____________-"+wancheng);
    return "projectManage/push_plan";
}

 

 

 

 

 

@Override
public List<Map<String,Object>> queryPushPlan() {
    System.out.println("运行service层");
       returnpushPlanMapper.findAllPushPlan();

}

 

 

 

@Select({"SELECT SUM(push_plan.`completion`) `completion`,"+
        "SUM(push_plan.uncompletion) uncompletion FROM push_plan"})
List<Map<String,Object>> findAllPushPlan();

 

 

数据库表

SQL语句查询结果