【Django】教程-12-柱状图

【Django】教程-1-安装+创建项目+目录结构介绍
 【Django】教程-2-前端-目录结构介绍
 【Django】教程-3-数据库相关介绍
 【Django】教程-4-一个增删改查的Demo
【Django】教程-5-ModelForm增删改查+规则校验【正则+钩子函数】
【Django】教程-6-搜索框-条件查询前后端
 【Django】教程-7-分页，默认使用django的
 【Django】教程-8-页面时间组件
 【Django】教程-9-登录+退出
 【Django】教程-10-ajax请求Demo，结合使用
 【Django】教程-11-ajax弹窗实现增删改查

18. 图

18.1 柱状图

chart_view.py

python 复制代码

from django.http import JsonResponse
from django.shortcuts import render


def list(request):
    """ 数据统计页面"""

    return render(request, 'chart/chart_list.html')


def chart_bar(request):
    """ 构造 柱状图的数据"""
# 具体数据，可以通过数据查询获取，修改具体字段的值，返回 
    legend = ["销量", "业绩"]
    x_axis = ['1月', '2月', '3月', '4月', "5月", "6月", "7月", "8月"]
    series = [{
        "name": '销量',
        "type": 'bar',
        "data": [10, 20, 15, 5, 8, 34, 33, 72]
    }, {
        "name": '业绩',
        "type": 'bar',
        "data": [15, 24, 53, 9, 25, 63, 21, 23]
    }]
    result = {
        "status": True,
        "data": {
            "legend": legend, "series": series, "x_axis": x_axis
        }
    }

    return JsonResponse(result)

urls.py 增加下面，layout.html 增加跳转连接 <li><a href="/chart/list">数据统计</a></li>

复制代码

path('chart/list', chart_view.list),
path('chart/bar', chart_view.chart_bar),

chart_list.html

html 复制代码

{% extends 'login/layout.html' %}
{% load static %}
{% block content %}
    <div class="container">
        <div class="panel panel-default">
            <div class="panel-heading">折线图</div>
            <div class="panel-body">
                Panel content
            </div>
        </div>
        <div class="row">
            <div class="col-sm-8">
                <div class="panel panel-default">
                    <div class="panel-heading">柱状图</div>
                    <div class="panel-body">
                        <div id="m1" style="width: 680px;height: 400px"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="panel panel-default">
                    <div class="panel-heading">饼图</div>
                    <div class="panel-body">
                        Panel content
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block js %}
    <script src="{% static 'js/echarts.min.js' %}"></script>
    <script src=https://code.jquery.com/jquery-3.6.0.min.js></script>
    <script type="text/javascript">
        $(function () {
            initBar();
        })

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

            // 指定图表的配置项 和 数据
            var option = {
                title: {
                    text: '业绩排行榜-展示'
                },
                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;

                        // 使用指定的配置项 和 数据显示图表
                        myChart.setOption(option);
                    }
                }
            })
        }
    </script>
{% endblock %}

效果图