如何使用ajax过去到数据库中的数据再在饼状图里面实现？

Question

以下是我的代码我想通过ajax获取到数据库里面的数据，并在饼状图里面实现，我该如何实现？
后端代码

def chart_pie(request):
    """构造饼图"""
    db_data_list = [
        {"value": 1048, "name": 'IT部门'},
        {"value": 735, "name": '美工部门'},
        {"value": 580, "name": '运营部门'},
        {"value": 484, "name": '财政部门'},
        {"value": 300, "name": '数据库部门'}
    ]

    result = {
        "status": True,
        "data": db_data_list
    }

    return JsonResponse(result)

前端代码

<script type="text/javascript">

        $(function(){
            initPie();
        })
function initPie() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('m3'));

        var option = {
  title: {
    text: '财政支出占比信息',
    subtext: '第一季度',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    bottom:0
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [], //后台获取
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

        $.ajax({
            url:"/chart/pie/",
            type:"get",
            dataType:"json",
            success: function(res){
                if (res.status){
                    option.series[0].data=res.data,
                    myChart.setOption(option)}}})

        myChart.setOption(option);
        }

数据库代码

class Order(models.Model):
    oid = models.CharField(verbose_name="订单号", max_length=64)
    title = models.CharField(verbose_name="名称", max_length=32)
    price = models.FloatField(verbose_name="价格")
    status_choice = (
        (1, "未支付"),
        (2, "已支付")
    )
    status = models.SmallIntegerField(verbose_name="状态", choices=status_choice, default=1)
    admin = models.ForeignKey(verbose_name="管理员", to="admin", on_delete=models.CASCADE)

mysql> select * from app01_order;
+----+--------------+-----------------+-------+--------+----------+
| id | oid | title | price | status | admin_id |
+----+--------------+-----------------+-------+--------+----------+
| 5 | 202407173145 | 只能卓手机 | 4324 | 1 | 1 |
| 6 | 202407174437 | 小米手机 | 4328 | 1 | 1 |
| 7 | 202407176563 | 华为手机 | 4321 | 1 | 1 |
| 8 | 202407174759 | 联想平板 | 2131 | 2 | 1 |
| 9 | 202407173654 | 苹果电脑 | 4324 | 2 | 1 |
| 11 | 202407188130 | IT设计部门 | 432 | 2 | 1 |
+----+--------------+-----------------+-------+--------+----------+

Answer 1

以下内容由AIGC及阿里嘎多学长共同生成、有用望采纳：

---

你的代码已经基本实现了通过AJAX获取后端数据并在饼状图中展示的功能。以下是一些具体的步骤和建议，帮助你确保代码能够正常工作：

1. 确保后端路由和URL匹配

首先，确保你的Django视图函数chart_pie与前端请求的URL匹配。这通常在Django的urls.py文件中定义。例如：

from django.urls import path
from . import views

urlpatterns = [
    path('chart/pie/', views.chart_pie, name='chart_pie'),
]

2. 调整后端代码以查询数据库

你需要从数据库中查询数据，并将这些数据转换为前端所需的格式。以下是修改后的后端代码示例：

from django.http import JsonResponse
from django.db.models import Count
from .models import Order

def chart_pie(request):
    """构造饼图"""
    # 查询数据库，统计每个状态的数量
    db_data_list = Order.objects.values('status').annotate(total=Count('status'))

    result = {
        "status": True,
        "data": db_data_list
    }

    return JsonResponse(result)

3. 调整前端代码以处理数据

在前端代码中，你需要处理从后端获取的数据，并将其转换为ECharts所需的格式。以下是修改后的前端代码示例：

<script type="text/javascript">
    $(function(){
        initPie();
    });

    function initPie() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('m3'));

        var option = {
            title: {
                text: '财政支出占比信息',
                subtext: '第一季度',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                bottom:0
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    data: [], // 后台获取
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        $.ajax({
            url:"/chart/pie/",
            type:"get",
            dataType:"json",
            success: function(res){
                if (res.status){
                    var data = res.data.map(function(item) {
                        return {value: item.total, name: item.status};
                    });
                    option.series[0].data = data;
                    myChart.setOption(option);
                }
            }
        });
    }
</script>

4. 检查数据格式

确保后端返回的数据格式与前端代码中处理数据的逻辑相匹配。在上述示例中，后端返回的数据是一个包含status和total字段的列表，前端代码通过map函数将这些数据转换为ECharts所需的格式。

5. 测试和调试

在完成以上步骤后，运行你的应用程序并访问相应的页面，检查饼状图是否正确显示。如果有任何问题，检查浏览器的开发者工具中的控制台和网络标签，查看是否有错误或未预期的响应。

通过以上步骤，你应该能够成功地从数据库获取数据并通过AJAX在前端的饼状图中展示这些数据。