如何用ajax获取到数据库的数据，并且在柱状图里面实现？

Question

以下是我的代码，我想通过ajax获取到数据库中的数据，并且将之插入到柱状图分布里面，该如何实现
前端代码

<script type="text/javascript">

        $(function(){
            initBar();
        })

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

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: '员工业绩汇总信息',
          textAlign: 'auto',
          left:"center",
        },
        tooltip: {},
        legend: {
          data: [], //后台获取
          bottom:0
        },
        xAxis: {
          data: []  //后台获取
        },
        yAxis: {},
            series: []  //后台获取
      };

      $.ajax({
        url:"/chart/bar/",
        type: 'GET',
        dataType: 'json',
        success: function(res){
            //将后台返回的数据，更新到option中
            if (res.status){
                option.legend.data=res.data.legend;
                option.xAxis.data=res.data.x_axis;
                option.series=res.data.series_list;}

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

后端代码

def chart_bar(request):
    """构造柱状图数据"""
    legend = ["张三"]
    series_list = [
        {
            "name": "张三",
            "type": 'bar',
            "data": [5, 20, 36, 10, 10, 20]
        }
    ]
    x_axis = ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']

    result = {
        "status": True,
        "data": {
            'legend': legend,
            'series_list': series_list,
            'x_axis': x_axis,
        }
    }

    return JsonResponse(result)

数据库代码

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. 从数据库获取数据：使用Django的ORM查询Order模型，获取订单数据，并将其转换为所需的格式。

2. 构造JSON响应：将查询结果转换为JSON格式，并返回给前端。

from django.http import JsonResponse
from .models import Order

def chart_bar(request):
    """构造柱状图数据"""
    orders = Order.objects.all().values('title', 'price')  # 查询所有订单的名称和价格
    orders_list = list(orders)
    legend = [order['title'] for order in orders_list]  # 图例数据
    series_data = [order['price'] for order in orders_list]  # 系列数据
    series_list = [{
        "name": "销售额",
        "type": 'bar',
        "data": series_data
    }]
    x_axis = [order['title'] for order in orders_list]  # x轴数据

    result = {
        "status": True,
        "data": {
            'legend': legend,
            'series_list': series_list,
            'x_axis': x_axis,
        }
    }

    return JsonResponse(result)

前端代码

1. 发送AJAX请求：使用jQuery的$.ajax方法发送请求到后端，并处理返回的数据。

2. 更新ECharts图表配置：将获取的数据动态地插入到ECharts柱状图配置项中。

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

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

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '员工业绩汇总信息',
                textAlign: 'auto',
                left:"center",
            },
            tooltip: {},
            legend: {
                data: [], //后台获取
                bottom:0
            },
            xAxis: {
                data: []  //后台获取
            },
            yAxis: {},
            series: []  //后台获取
        };

        $.ajax({
            url:"/chart/bar/",
            type: 'GET',
            dataType: 'json',
            success: function(res){
                //将后台返回的数据，更新到option中
                if (res.status){
                    option.legend.data = res.data.legend;
                    option.xAxis.data = res.data.x_axis;
                    option.series = res.data.series_list;

                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                }
            },
            error: function(err) {
                console.error('AJAX请求失败:', err);
            }
        });
    }
</script>

确保URL配置正确

在你的Django项目的urls.py文件中，确保已经配置了对应的URL，以便前端能够正确地发送请求到后端。

from django.urls import path
from .views import chart_bar

urlpatterns = [
    path('chart/bar/', chart_bar, name='chart-bar'),
]

测试和调试

1. 确保数据库连接正常：检查Django项目的数据库配置，确保能够正常连接并查询数据。

2. 检查前端请求：在浏览器的开发者工具中查看网络请求，确保AJAX请求发送到正确的URL，并且后端返回了预期的JSON数据。

3. 调试ECharts图表：如果图表没有正确显示，检查ECharts的配置项是否正确设置，确保数据格式符合ECharts的要求。

通过以上步骤，你应该能够实现从数据库获取数据并通过AJAX展示在柱状图中的目标。如果遇到任何问题，可以进一步检查代码或提供具体的错误信息进行调试。