使用 ECharts 实现小区住户数量统计柱状图

一、项目背景

在很多社区管理系统中，我们需要直观地展示各小区的住户数量分布情况。ECharts 作为一款强大的可视化图表库，能够帮助我们快速实现各类数据可视化需求。本文将介绍如何通过后端接口获取数据，并使用 ECharts 绘制小区住户数量统计柱状图。

二、技术栈

后端：Spring Boot + MyBatis
前端：HTML + JavaScript + ECharts
数据库：MySQL（示例）

三、后端接口实现

1. 数据模型与数据库设计

我们需要两个主要表：

community：存储小区信息（community_id, community_name 等）
person：存储住户信息，包含关联小区的 community_id 字段

2. Mapper 层实现

EchartsMapper.java

java 复制代码

package com.qcby.mapper;

import org.apache.ibatis.annotations.Mapper;
import java.util.List;

@Mapper
public interface EchartsMapper {
    // 获取所有小区名称
    List<String> selectName();
    // 获取每个小区的住户数量
    List<Integer> selectCount();
}

EchartsMapper.xml

XML 复制代码

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.qcby.mapper.EchartsMapper">
     <select id="selectName" resultType="java.lang.String">
         SELECT community_name FROM community
     </select>
    <select id="selectCount" resultType="java.lang.Integer">
        SELECT COUNT(*)  FROM community c LEFT JOIN person p on c.community_id=p.community_id GROUP BY c.community_id
    </select>
</mapper>

3. Controller 层实现

EchartsController.java

java 复制代码

package com.qcby.controller;

import com.qcby.Utils.Result;
import com.qcby.mapper.EchartsMapper;
import org.springframework.beans.factory.annotation.Autowired;
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("/sys/inOut")
public class EchartsController {

    @Autowired
    private EchartsMapper echartsMapper ;
    
    @RequestMapping("/chart")
    public Result getEcharts(){
        // 准备返回数据
        Map<String, Object> data = new HashMap<>();
        // 小区名称列表
        List<String> names = echartsMapper.selectName();
        // 住户数量列表
        List<Integer> nums = echartsMapper.selectCount();

        // 饼图数据列表（本文主要讲柱状图，此数据可用于其他图表）
        List<Map<String, Object>> list = new ArrayList<>();
        for (int i = 0; i < names.size(); i++) {
            Map<String, Object> item = new HashMap<>();
            item.put("name", names.get(i));
            item.put("value", nums.get(i));
            list.add(item);
        }

        // 将数据放入data对象
        data.put("names", names);
        data.put("nums", nums);
        data.put("list", list);
        return Result.ok().put("data", data);
    }
}

4. 接口返回格式

接口地址：GET /sys/inOut/chart（无参数）

返回示例：

python 复制代码

{
    "msg": "操作成功",
    "code": 200,
    "data": {
        "names": [
            "栖海澐颂",
            "宸悦国际",
            "流星花园二区",
            "农学院家属院",
            "金达园",
            "建发城建·文源府",
            "北清云际"
        ],
        "nums": [
            5,
            3,
            1,
            2,
            4,
            2,
            1
        ],
        "list":[
            {
                "name": "栖海澐颂",
                "value": 5
            },
            // 更多数据...
        ]
    }
}

四、前端 ECharts 实现

1. 引入 ECharts

可以通过 CDN 引入：

html 复制代码

<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>

或者下载到本地后引入：

html 复制代码

<script src="js/echarts.min.js"></script>

2. HTML 结构

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>小区住户数量统计</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        .chart-container {
            width: 800px;
            height: 500px;
            margin: 50px auto;
        }
    </style>
</head>
<body>
    <div class="chart-container" id="barChart"></div>
    <script src="js/chart.js"></script>
</body>
</html>

3. JavaScript 实现

chart.js

javascript 复制代码

// 初始化图表
var chartDom = document.getElementById('barChart');
var myChart = echarts.init(chartDom);
var option;

// 从后端获取数据
fetch('/sys/inOut/chart')
    .then(response => response.json())
    .then(data => {
        if (data.code === 200) {
            // 设置图表配置
            option = {
                title: {
                    text: '小区住户数量统计',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: data.data.names,
                    axisLabel: {
                        // 让x轴标签旋转，防止重叠
                        rotate: 30
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '住户数量',
                    minInterval: 1  // 保证y轴刻度为整数
                },
                series: [
                    {
                        name: '住户数量',
                        type: 'bar',
                        data: data.data.nums,
                        itemStyle: {
                            // 设置柱形颜色
                            color: function(params) {
                                var colorList = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452'];
                                return colorList[params.dataIndex % colorList.length];
                            }
                        },
                        // 显示数值
                        label: {
                            show: true,
                            position: 'top'
                        }
                    }
                ]
            };

            // 渲染图表
            myChart.setOption(option);
        } else {
            console.error('获取数据失败:', data.msg);
        }
    })
    .catch(error => {
        console.error('请求出错:', error);
    });

// 响应窗口大小变化，重新绘制图表
window.addEventListener('resize', function() {
    myChart.resize();
});

五、实现效果

图表将展示各小区的住户数量对比，x 轴为小区名称，y 轴为住户数量，每个柱子上方将显示具体数值，鼠标悬停时会显示详细信息。不同的小区会用不同的颜色区分，整体布局简洁明了。

六、总结

通过本文的实现，我们完成了从后端接口获取小区住户数据，到使用 ECharts 绘制柱状图的全过程。主要步骤包括：

设计数据库表结构并编写 MyBatis 映射
实现后端接口，返回所需的统计数据
前端引入 ECharts 库，编写 HTML 结构
通过 JavaScript 请求后端接口，获取数据并配置 ECharts 图表
渲染图表并处理窗口大小变化

这种实现方式不仅可以用于小区住户统计，还可以根据实际需求修改后端接口和前端配置，应用于各种数据统计场景。