使用django rest dateframe-优快云博客

本文链接：https://blog.youkuaiyun.com/shaohl2103/article/details/133545811

本文介绍了如何使用EChartsJavaScript库在网页中创建一个基本的柱状图，通过Ajax获取数据并在图表中展示销量。代码展示了从服务器获取数据并动态更新图表的过程。

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

<script src="{%static 'js/echarts.js'%}"></script>
<div class="container">
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <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: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };
    var names = [];    //类别数组（实际用来盛放X轴坐标值）
    var nums = [];    //销量数组（实际用来盛放Y坐标值）
      $.ajax({
        type: 'get',
        url: '/indexs/drfs',//请求数据的地址
        dataType: "json",        //返回数据形式为json
        success: function (result) {
            console.log(result[0].name);
            
            //请求成功时执行该函数内容，result即为服务器返回的json对象
            $.each(result, function (index,item) {
                names.push(item.name);    //挨个取出类别并填入类别数组                    
                nums.push(item.id);    //挨个取出销量并填入销量数组
                console.log(item.name);
            });
            // console.log(names);

            myChart.setOption({        //加载数据图表
                xAxis: {
                    data: names
                },
                series: [{
                    // 根据名字对应到相应的系列
                    name: '发布排行',  //显示在上部的标题
                    data: nums
                }]
            });
        },
        // }
    });

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