一. 图表统计:表结构设计

图表统计是无需设计表结构的，是根据现有的表数据来生成可视化的图表。

二. URL调整

新增对应的增删改查对应的URL，如下:

# 数据统计path('chart/list/', chart.chart_list),path('chart/bar/', chart.chart_bar),path('chart/pie/', chart.chart_pie),path('chart/line/', chart.chart_line),path('chart/highcharts/', chart.highcharts),

三. 后端功能实现

图表统计功能后端实现
chart.py

from django.shortcuts import render
from django.http import JsonResponsedef chart_list(request):""" 数据统计页面 """return render(request, 'chart_list.html')def chart_bar(request):""" 构造柱状图的数据 """# 数据可以去数据库中获取legend = ["只是甲", "NO.1"]series_list = [{"name": '只是甲',"type": 'bar',"data": [15, 20, 36, 10, 10, 10]},{"name": 'NO.1',"type": 'bar',"data": [45, 10, 66, 40, 20, 50]}]x_axis = ['1月', '2月', '4月', '5月', '6月', '7月']result = {"status": True,"data": {'legend': legend,'series_list': series_list,'x_axis': x_axis,}}return JsonResponse(result)def chart_pie(request):""" 构造饼图的数据 """db_data_list = [{"value": 2048, "name": 'IT部门'},{"value": 1735, "name": '运营'},{"value": 580, "name": '新媒体'},]result = {"status": True,"data": db_data_list}return JsonResponse(result)def chart_line(request):legend = ["上海", "广西"]series_list = [{"name": '上海',"type": 'line',"stack": 'Total',"data": [15, 20, 36, 10, 10, 10]},{"name": '广西',"type": 'line',"stack": 'Total',"data": [45, 10, 66, 40, 20, 50]}]x_axis = ['1月', '2月', '4月', '5月', '6月', '7月']result = {"status": True,"data": {'legend': legend,'series_list': series_list,'x_axis': x_axis,}}return JsonResponse(result)def highcharts(request):""" highcharts示例 """return render(request,'highcharts.html')

四. 前端页面

4.1 通用模板

layout.html

4.2 前端页面

chart_list.html

{% extends 'layout.html' %}
{% load static %}{% block content %}<div class="container"><div class="panel panel-default"><div class="panel-heading">折线图</div><div class="panel-body"><div id="m1" style="width: 100%;height: 300px"></div></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="m2" style="width: 100%;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"><div id="m3" style="width: 100%;height: 400px;"></div></div></div></div></div></div>
{% endblock %}{% block js %}<script src="{% static 'js/echarts.js' %}"></script><script type="text/javascript">$(function () {initLine();initBar();initPie();})/*** 初始化折线图*/function initLine() {var myChart = echarts.init(document.getElementById('m1'));var option = {title: {text: '分公司业绩图',left: "center",},tooltip: {trigger: 'axis'},legend: {data: [],bottom: 0},toolbox: {feature: {saveAsImage: {}}},xAxis: {type: 'category',boundaryGap: false,data: []},yAxis: {type: 'value'},series: []};$.ajax({url: '/chart/line/',type: "get",dataType: "JSON",success: function (res) {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);}}})}/*** 初始化柱状图*/function initBar() {// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('m2'));// 指定图表的配置项和数据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);}}})}/*** 初始化饼状图*/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: '预算',type: 'pie',radius: '50%',data: [{value: 1048, name: 'IT部门'},{value: 735, name: '运营'},{value: 580, name: '新媒体'},],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);}}})}</script>
{% endblock %}

五. 页面测试

将官网下载的 echarts.js、echarts.min.js 文件拷贝到项目的app01/static/js 下

参考:

https://www.bilibili.com/video/BV1NL41157ph

Django系列16-员工管理系统实战--echar图表统计相关推荐

Django系列10-员工管理系统实战--靓号管理
文章目录一. 靓号管理:表结构设计二. URL调整三.后端功能实现 3.1 增删改查逻辑实现 3.2 分页逻辑实现四. 前端页面 4.1 靓号列表 4.2 靓号新增 4.3 靓号修改五. 测 ...
基于Django的员工管理系统
目录一.新建项目二.创建app 三.设计表结构四.在MySQL中生成表五.静态文件管理六.添加页面七.模板的继承一.新建项目 django-admin startproject 员工管理 ...
【毕业设计之python系列】基于django的奶茶店管理系统
基于django的奶茶店管理系统摘要近年来,奶茶的受欢迎程度在全球范围内迅速增长.随着奶茶店数量的增加,管理这些商店变得越来越复杂.店主需要同时处理库存.订单.员工和客户等各种任务,有效地管 ...
django web app_妹子用半天时间开发一个员工管理系统，没错django就是这么强悍
熟悉python的朋友都知道,django简直是web开发领域的一个大杀器. 请求.模板.ORM.admin 都自带,程序员可以很轻松的开发出一个网站或者管理系统. 今天给大家分享一个超简单的员工管理 ...
SSM实战项目-员工管理系统 Spring+SpringMVC+MyBatis
项目描述: JavaWeb实战之员工管理系统,一个完整的SSM整合项目,适用于刚学完SSM框架的伙伴,熟练一下SSM整合,融会贯通.基本的增删改查都有,功能比较完善.使用框架并不是很难,关键是要理解起 ...
用Django半天时间开发一个员工管理系统实例教程分享
熟悉python的朋友都知道,django简直是web开发领域的一个大杀器. 请求.模板.ORM.admin 都自带,程序员可以很轻松的开发出一个网站或者管理系统. 今天小编给大家分享一个超简单的员工 ...
SpringBoot项目实战：员工管理系统
员工管理系统该项目实现了以下功能,对应的源码与数据库文件在资源中可下载项目部分展示 1. 数据库设计创建数据库 employee,创建两个表 employee(员工表)和depart(部门表) ...
springboot + vue + elementUI项目实战——简洁清新的员工管理系统（一）
springboot + vue + elementUI + mybatis + redis 清新的员工管理系统前言从这期,项目从需求分析开始,一步步实现一个老经典的清新的员工管理系统,适合有 ...
视频教程-Python+Vue+Django前后端分离项目实战-Python
Python+Vue+Django前后端分离项目实战教学风格独特,以学员视角出发设计课程,难易适度,重点突出,架构清晰,将实战经验融合到教学中.讲授技术同时传递方法.得到广大学员的高度认可. 王进 ...
狂神Spring Boot 员工管理系统超详细完整实现教程（小白轻松上手~）
[SpringBoot-web系列]前文: SpringBoot-web开发(一): 静态资源的导入(源码分析) SpringBoot-web开发(二): 页面和图标定制(源码分析) SpringBo ...

Django系列16-员工管理系统实战--echar图表统计

文章目录

一. 图表统计:表结构设计

二. URL调整

三. 后端功能实现

四. 前端页面

4.1 通用模板

4.2 前端页面

五. 页面测试

参考:

Django系列16-员工管理系统实战--echar图表统计相关推荐

最新文章

热门文章