echarts饼图动态数据加载

最新推荐文章于 2024-03-29 19:37:27 发布

成长的路y

最新推荐文章于 2024-03-29 19:37:27 发布

阅读量4.3k

点赞数 8

分类专栏： echarts 文章标签： echarts

本文链接：https://blog.youkuaiyun.com/qq_41508632/article/details/88912305

版权

本文介绍了如何使用ECharts在前台页面动态加载饼图数据，通过后台代码获取并展示部门人数统计。通过执行SQL查询从`t_system_bmgl`表中获取`bg_mc`（部门名称）和`bg_rs`（部门人数）字段，最终成功绘制出饼图，展示了具体的结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前台页面：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
    <title>echarts</title>
    <script src="<%=basePath%>static/js/echarts.js"></script>
    <script src="<%=basePath%>static/js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        title : {
            text: '部门',