【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
    评论
好的,如果您想在SSM框架中使用ECharts生成,可以按照以下步骤进行: 1. 在您的项目中引入ECharts的JS文件,可以通过ECharts官网下载压缩包获取,或者引入CDN资源。 2. 在您的HTML文件中添加一个DOM元素,作为ECharts表的容器,例如: ```html <div id="pieChart" style="width: 600px;height:400px;"></div> ``` 3. 在您的JavaScript文件中,通过ECharts的API来设置表的配置项和数据项,例如: ```javascript // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('pieChart')); // 配置项和数据 var option = { title : { text: '各个地区销售占比', subtext: '2021年第一季度', 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%'], data:[ {value:335, name:'北京'}, {value:310, name:'上海'}, {value:234, name:'广州'}, {value:135, name:'深圳'}, {value:1548, name:'成都'} ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; // 使用刚指定的配置项和数据显示表。 myChart.setOption(option); ``` 在这个例子中,我们通过ECharts的API来设置了一个简单的,包括表的标题、提示框、例和数据项等等。您可以根据您的需求进行自定义配置。 4. 将上述JavaScript代码放到您的SSM项目中对应的位置,例如在某个Controller的方法中,返回一个包含ECharts表的HTML页面。 ```java @RequestMapping("/pieChart") public String pieChart(Model model) { return "pieChart"; } ``` 在这个例子中,我们返回了一个名为"pieChart"的HTML页面,其中包含了一个ECharts表。 5. 最后,启动您的SSM应用程序,并访问对应的URL地址,您应该能够看到一个包含ECharts的页面了。 希望这些步骤能够帮助您使用ECharts生成
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值