java通过AmCharts生成饼状图_amcharts饼图示例

作者：我家小花儿 | 2024-02-19 12:29:21

踩

amcharts饼图示例

1、创建数据库，创建表(订单表）

具体语句附在项目源码中。

2、创建web项目，搭建ssm环境（最后附上项目下载地址）

需求：生成每种房间类型的订单数量饼状图

效果展示：

具体实现,项目结构如下：

1、引入外部文件，在webapp目录下导入js和charts文件。编写各个表对象的实体类。

2、编写封装了饼状图信息的实体类


package com.scce.pojo;
 
/**
 * @program: IdeaProjects
 * @description:
 * @author: Lxy
 * @create: 2019-06-07 12:13
 **/
//封装饼状图所需信息
public class Roomchartwithbill {
    //房间类型
    private String roomtype;
    //订单数量
    private Integer billnumber;
 
    public String getRoomtype() {
        return roomtype;
    }
 
    public void setRoomtype(String roomtype) {
        this.roomtype = roomtype;
    }
 
    public Integer getBillnumber() {
        return billnumber;
    }
 
    public void setBillnumber(Integer billnumber) {
        this.billnumber = billnumber;
    }
 
    @Override
    public String toString() {
        return "Roomchartwithbill{" +
                "roomtype='" + roomtype + '\'' +
                ", billnumber=" + billnumber +
                '}';
    }
}

3、编写dao层，BillDao


package com.scce.dao;
 
import org.apache.ibatis.annotations.Select;
 
/**
 * @program: IdeaProjects
 * @description:
 * @author: Lxy
 * @create: 2019-06-02 21:36
 **/
public interface BillDao {
 
    //根据房间类型，查询订单数量
    @Select("select count(1) from bill where roomType=#{roomType}")
    public Integer getBillNumByRoomType(Integer roomtype);
    
}

4、Service层，BillService以及实现类


package com.scce.service;
 
import com.scce.pojo.Roomchartwithbill;
 
import java.util.List;
 
/**
 * @program: IdeaProjects
 * @description:
 * @author: Lxy
 * @create: 2019-06-03 21:16
 **/
public interface BillService {
 
    //根据房间类型，查询订单数量
    public List<Roomchartwithbill> getBillNumByRoomType();
 
}


package com.scce.service.impl;
 
import com.scce.dao.BillDao;
import com.scce.dao.RoomTypeDao;
import com.scce.pojo.RoomType;
import com.scce.pojo.Roomchartwithbill;
import com.scce.service.BillService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
 
import java.util.ArrayList;
import java.util.List;
 
/**
 * @program: IdeaProjects
 * @description:
 * @author: Lxy
 * @create: 2019-06-03 21:17
 **/
@Service
@Transactional
public class BillServiceImpl implements BillService {
 
    @Autowired
    private BillDao billDao;
 
    @Autowired
    private RoomTypeDao roomTypeDao;
    
    @Override
    public List<Roomchartwithbill> getBillNumByRoomType() {
        List<Roomchartwithbill> list = new ArrayList<Roomchartwithbill>();
        List<RoomType> roomTypeList = roomTypeDao.getRoomType();
        try {
            for (RoomType roomType : roomTypeList) {
                Integer num = billDao.getBillNumByRoomType(roomType.getRid());
                Roomchartwithbill roomchartwithbill = new Roomchartwithbill();
                roomchartwithbill.setBillnumber(num);
                roomchartwithbill.setRoomtype(roomType.getType());
                System.out.println(roomchartwithbill);
                list.add(roomchartwithbill);
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        return list;
    }
    
}

5、controller层


package com.scce.controller;
 
import com.scce.pojo.Roomchartwithbill;
import com.scce.service.BillService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
 
import java.util.List;
 
/**
 * @program: IdeaProjects
 * @description:
 * @author: Lxy
 * @create: 2019-06-04 00:06
 **/
@RestController
@RequestMapping("/bill")
public class BillController {
 
    @Autowired
    private BillService billService;
    
    //饼状图 房间类型订单数量图
    @RequestMapping("/getBillNumByRoomType")
    public List<Roomchartwithbill> getBillNumByRoomType() {
        System.out.println("进入getBillNumByRoomType");
        List<Roomchartwithbill> list = billService.getBillNumByRoomType();
        return list;
    }
    
}

6、页面代码：AmPieChart.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>饼状图</title>
    <link rel="stylesheet" href="../charts/style.css" type="text/css"/>
    <script type="text/javascript" src="../js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="../charts/amcharts.js"></script>
    <script type="text/javascript" src="../charts/pie.js"></script>
    <script type="text/javascript" src="../charts/serial.js"></script>
</head>
<script>
    //AmPieChart.html
 
    var chart1;
    var chartData1;
    AmCharts.ready(function () {
        $.getJSON("../bill/getBillNumByRoomType", null, function (data) {
            console.log(data);
 
            chart1 = new AmCharts.AmPieChart();  // 饼状图
 
            chart1.addTitle("房间类型订单数量图", 16);  // 添加标题
            chart1.dataProvider = data; //指定数据来源，一般指向一个数组对象
            chart1.titleField = "roomtype"; //饼状每一块的标题
            chart1.valueField = "billnumber"; //饼状每一块的值
            chart1.sequencedAnimation = true;  //指定动画应该被排序还是所有对象应该同时出现。
            chart1.startEffect = "elastic";   //动画效果。可能的值是:easeoutsin, easeinsin, elastic, bounce
            chart1.innerRadius = "30%";
            chart1.startDuration = 2;  //Duration of the animation, in seconds.
            chart1.labelRadius = 15;
            chart1.balloonText = "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>";//节点显示的文本内容
            chart1.depth3D = 10; //设置为3d图像的厚度值
            chart1.angle = 15;  //角度，当设置图像为3d图时使用该属性，默认为0
            chart1.write("chartdiv");
        });
    });
</script>
<body>
<div id="chartdiv" style="height:600px;width:900px;float: left;"></div>
</body>
</html>

源码：https://github.com/LuoXuYang1997/AmCharts.git

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/114706