【ECharts】SSM框架动态传值之饼状图

本文介绍了如何使用ECharts结合SSM框架动态展示饼状图。通过ajax从java后台获取数据,利用js处理并在ECharts中显示数据库中的项目培训类型和参与人数。文章详细讲解了后台代码和前台代码的实现,包括如何解决饼状图标题和统计数据信息缺失的问题。
摘要由CSDN通过智能技术生成

一、介绍

      通过ECharts饼状图展示数据库中的数据信息,通过ajax发送请求从后台获取数据,将数据通过js在ECharts展示出来。主要实现在数据库表中,查询有多少个项目培训类型,参与每一个项目的有多少人,将这些数据通过饼状图的形式展现出来。

二、java后台代码

//dao层
    @Select("select traintype,count(traintype) as traintypenum from v_all group by traintype")
    public List<All> getTrainTypeNuminfo();

//service层
    public List<All> getTrainTypeNuminfo(){
        return integratedQueryMapper.getTrainTypeNuminfo();
    }

//Controller层   
    @RequestMapping(value = "/getTrainInforStatic",method = {RequestMethod.GET, RequestMethod.POST})
    @ResponseBody
    public List<All> getTrainInforStatic(HttpSession session){

        List<All> getTrainTypeNuminfo = integratedQueryService.getTrainTypeNuminfo();
        return getTrainTypeNuminfo;
    }

三、前台代码

3.1 前台代码1

如下的前台代码,js只用来对Echarts的饼状图赋值数据,会产生没有饼状图标题,统计数据信息:

$(function(){
        var myChart = echarts.init(document.getElementById('main'));
        /*   data1 表示每个饼状图的名字,每个培训类型
             data2 表示每个饼状图,即每个培训类型的统计结果
         */
        var data1=[];
        var data2=[];
        var array=[];



        option = {
            title : {
                text: '培训信息数据统计',
                /*subtext: '',*/
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient : 'vertical',
                x : 'left',
                /*data:['直接访问','邮件营销','联盟广告','视频
  • 4
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
一、简介 通过这个课程带大家从零开发一款功能全面的后台管理系统,包括项目搭建、功能实现到最后的Linux系统部署全过程。本课程使用SpringMVC + Spring + Mybatis作为主体框架,使用AdminLTE作为前端框架,使用主流关系型数据库Mysql作为存储数据库,使用非关系型数据库Redis作为缓存数据库,并集成SpringSecuriy安全框架做权限的动态管理,集成Swagger2自动生成接口文档,集成Druid连接池进行SQL性能监控,集成ActiveMQ消息中间件进行异步解耦,提高性能。最后使用linux系统进行服务部署,并搭建nginx反向代理服务器提高网站性能。 二、学习目标 通过本课程的学习带大家掌握SSM框架的开发流程,并熟练使用SpringSecurity做为安全框架进行权限管理,整合相关优秀的开源框架进行功能开发。还在项目中带大家学习前端相关的Jquery、Bootstrap等知识。课程结束之后希望大家能做到独立进行开发项目的目的,增强解决问题的能力,具备功能落地实现的能力。 三、课程涉及知识点 SpringMVC源码分析Mybatis源码分析通用MapperMysql数据库Redis缓存实现ActiveMQ消息中间件SpringSecurity鉴权Swagger2接口文档生成自定义注解AOP切面编程自定义过滤器Logback日志整合Druid性能监控Linux系统Nginx反向代理Ajax异步请求技术Jquery基本使用AdminLTE前端框架Chart图表-线状图和饼状图百度地图定位城市BootStrap前端框架BootStrap-Table插件BootStrap-Treeview插件Markdown编辑器403、404、500错误页面配置数据库事务消息提示插件toastr.js图片上传插件bootstrap fileinput数字滚动效果pv/uv流量统计...四、课程部分内容截图如下 1、首页 2、菜单管理 3、图床管理 4、图标管理 5、留言反馈管理 6、druid监控 7、登录日志

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值