【柱状图饼图案例总结】

最新推荐文章于 2024-01-08 17:36:49 发布

明天会更好fjy

最新推荐文章于 2024-01-08 17:36:49 发布

阅读量307

点赞数

分类专栏：大数据项目总结文章标签： java-ee java redis

本文链接：https://blog.csdn.net/m0_59239420/article/details/121560222

版权

大数据项目总结专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文展示了如何使用Echarts在前端页面上实现年龄分段的柱状图和饼图统计。通过axios从后台获取数据，利用Echarts的bar和pie图表类型进行展示，同时在后端使用了Dubbo服务调用来获取统计数据，通过SQL查询将年龄分段并计数。代码中涉及到Vue.js、Axios和Echarts库的使用，以及Spring Boot的Controller和MyBatis的XML映射文件。

摘要由CSDN通过智能技术生成

在创建项目的时候，导入相对应的包，对年龄进行分段统计

柱状图：前端的一些代码：

<!DOCTYPE html>
<html>
    <head>
        <!-- 页面meta -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>传智健康</title>
        <meta name="description" content="传智健康">
        <meta name="keywords" content="传智健康">
        <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
        <!-- 引入样式 -->
        <link rel="stylesheet" href="../css/style.css">
        <script src="../plugins/echarts/echarts.js"></script>
    </head>
    <body class="hold-transition">
        <div id="app">
            <div class="content-header">
                <h1>统计分析<small>会员数量</small></h1>
                <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>统计分析</el-breadcrumb-item>
                    <el-breadcrumb-item>会员数量</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="app-container">
                <div class="box">
                    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
                    <div id="chart1" style="height:600px;"></div>
                </div>
            </div>
        </div>
    </body>
    <!-- 引入组件库 -->
    <script src="../js/vue.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../js/echarts.js"></script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart1 = echarts.init(document.getElementById('chart1'));

        // 使用刚指定的配置项和数据显示图表。
        //myChart.setOption(option);

        axios.get("/report/zzt.do").then((res)=>{
            myChart1.setOption(
                                {
                                    xAxis: {

                                        type: 'category',
                                        //名字
                                        data: res.data.data.cname,
                                        "axisLabel":{
                                            interval: 0
                                        }
                                    },
                                    tooltip: {},
                                    yAxis: {
                                        type: 'value'
                                    },
                                    series: [{
                                        //数量
                                        data:  res.data.data.num,
                                        type: 'bar'
                                    }]
                                });
        });
    </script>
</html>

饼图：

<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>传智健康</title>
    <meta name="description" content="传智健康">
    <meta name="keywords" content="传智健康">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../css/style.css">
    <script src="../js/echarts.js"></script>
</head>
<body class="hold-transition">
<div id="app">
    <div class="content-header">
        <h1>统计分析
            <small>会员数量</small>
        </h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>统计分析</el-breadcrumb-item>
            <el-breadcrumb-item>会员数量</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="app-container">
        <div class="box">
            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
            <div id="chart1" style="height:600px;"></div>
        </div>
    </div>
</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script src="../js/echarts.js"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart1 = echarts.init(document.getElementById('chart1'));

    // 使用刚指定的配置项和数据显示图表。
    //myChart.setOption(option);

    axios.get("/report/bt.do").then((res) => {
        var list = res.data.data;
        var echartDate = [];
        for (var i = 0; i < list.length; i++) {
            var t = list[i];
            var obj = {
                //数量
                value: t.num,
                //名字
                name: t.cname
            };
            echartDate.push(obj);
        }



            myChart1.setOption(
                {
                    title: {
                        text: '商品信息统计',
                        subtext: '纯属虚构',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                    },
                    series: [
                        {
                            name: '数量',
                            type: 'pie',
                            radius: '50%',
                            // data: echartDate,
                            center:['50%','60%'],
                            data:echartDate,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                });
        }
    );
</script>
</html>

在实体类我们需要定义两个属性：

controller:

package com.jiyun.controller;

import com.alibaba.dubbo.config.annotation.Reference;
import com.jiyun.entity.Result;
import com.jiyun.pojo.KeVo;
import com.jiyun.service.StudentService;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@RestController
@RequestMapping("report")
public class Tongji {

    @Reference
    StudentService  studentService;


         @RequestMapping("zzt")
         public Result zzt(){

             List<KeVo> list = studentService.findcount1();

             List<Integer> num = new ArrayList<>();
             List<String> cname = new ArrayList<>();
             Map<String,Object> map = new HashMap<>();
             for (KeVo keVo : list) {
                 num.add(keVo.getNum());
                 cname.add(keVo.getCname());
             }
             map.put("num",num);
             map.put("cname",cname);


             return new Result(true,"显示成功",map);
         }



         @RequestMapping("bt")
         public Result bingzhuangtu(){
             List<KeVo> list = studentService.findcount1();
             List<Integer> num = new ArrayList<>();
             List<String> cname = new ArrayList<>();
             List<Map<String,Object>> list1 = new ArrayList<>();
             for (KeVo keVo : list) {
                 num.add(keVo.getNum());
                cname.add(keVo.getCname());
                 HashMap<String,Object> map = new HashMap<>();
                 map.put("num",keVo.getNum());

                 map.put("cname",keVo.getCname());
                 list1.add(map);
             }



             return new Result(true,"显示成功",list1);
         }

}

xml 里面的sql;

    <select id="count" resultType="com.jiyun.pojo.KeVo"  parameterType="int">
        SELECT '1-10' cname , COUNT(*)   num
FROM   student
 WHERE age BETWEEN 1 AND 10
UNION ALL
SELECT '11-20' cname , COUNT(*)   num
FROM   student
WHERE age BETWEEN 10 AND 20
UNION ALL
SELECT '21-30' cname, COUNT(*)  num
FROM student
WHERE age BETWEEN 21 AND 30
UNION ALL
SELECT '31' cname, COUNT(*) num
FROM student
WHERE age> 30
    </select>

多种方法：