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

最新推荐文章于 2024-02-02 11:15:39 发布

原创

最新推荐文章于 2024-02-02 11:15:39 发布 · 3.8k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#Echarts #ajax #饼状图 #js

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、介绍

通过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:['直接访问','邮件营销','联盟广告'