当前位置：首页 > news >正文

什么是商业网站湖北黄石市黄石市建设材料价格信息在哪个网站查询

news 2025/10/4 7:21:44

什么是商业网站,湖北黄石市黄石市建设材料价格信息在哪个网站查询,网页制作平台flash,免费空间网站怎么做的【Django】教程-1-安装创建项目目录结构介绍【Django】教程-2-前端-目录结构介绍【Django】教程-3-数据库相关介绍【Django】教程-4-一个增删改查的Demo 【Django】教程-5-ModelForm增删改查规则校验【正则钩子函数】【Django】教程-6-搜索框-条件查询前后端【Django】教程…

【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

from django.http import JsonResponse
from django.shortcuts import renderdef 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

{% 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 %}