当前位置：首页 > backend >正文

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

backend 2025/8/11 13:04:02

一、项目背景

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

二、技术栈

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

三、后端接口实现

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

我们需要两个主要表：

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

2. Mapper 层实现

EchartsMapper.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 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

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 {@Autowiredprivate 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（无参数）

返回示例：

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

四、前端 ECharts 实现

1. 引入 ECharts

可以通过 CDN 引入：

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

或者下载到本地后引入：

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

2. 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

// 初始化图表
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();
});