devbox
凡人多烦事01
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

基于django的可视化大屏编程_大屏可视化交互动态模板网页前端模板如何引入基于django的平台中

作者：凡人多烦事01 | 2024-02-29 09:55:11

赞

踩

大屏可视化交互动态模板网页前端模板如何引入基于django的平台中

一、创建工程

 1、在项目下创建模板static目录，并建立css、img、js目录

 

 2、js目录下创建charts目录，其下创建bar.js、bar_vertical.js、heatmap.js、line.js、map.js、pie.js、rose.js、sandian.js、wordcloud.js文件

 wordcloud.js的代码

  1. function create_wordcloud(dom_id,data) {
  2.     var chart = echarts.init(document.getElementById(dom_id));
  3.     var option = {
  4.       tooltip: {},
  5.       series: [{
  6.         type: 'wordCloud',
  7.         gridSize: 2,
  8.         sizeRange: [12, 50],
  9.         rotationRange: [-90, 90],
  10.         //shape: 'pentagon',
  11.         width:100,
  12.         height: 100,
  13.         drawOutOfBound: true,
  14.         textStyle: {
  15.           normal: {
  16.             color: function () {
  17.               return 'rgb(' + [
  18.                 Math.round(Math.random() * 160),
  19.                 Math.round(Math.random() * 160),
  20.                 Math.round(Math.random() * 160)
  21.               ].join(',') + ')';
  22.             }
  23.           },
  24.           emphasis: {
  25.             shadowBlur: 10,
  26.             shadowColor: '#333'
  27.           }
  28.         },
  29.         data: data
  30.       }]
  31.     };
  32.  
  33.     if (option && typeof option === "object") {
  34.         chart.setOption(option, true);
  35.     }
  36.   }

 dashboard.html文件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.         <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.         <title>用户行为分析展示大屏</title>
  8.         <link rel="stylesheet" href="/static/css/bootstrap.min.css">
  9.         <link rel="stylesheet" href="/static/css/layui.css">
  10.         <link rel="stylesheet" href="/static/css/site.css">
  11.         <link rel="stylesheet" href="/static/css/dashboard.css">
  12.         <script src="/static/js/jquery.min.js"></script>
  13.         <script src="/static/js/bootstrap.min.js"></script>
  14.         <script src="/static/js/echarts.min.js"></script>
  15.         <script src="/static/js/echarts-wordcloud.min.js"></script>
  16.         <script src="/static/js/shine.js"></script>
  17.         <script src="/static/js/macarons.js"></script>
  18.         <script src="/static/js/china.js"></script>
  19.         <script src="/static/js/charts/pie.js"></script>
  20.         <script src="/static/js/charts/map.js"></script>
  21.         <script src="/static/js/charts/bar_vertical.js"></script>
  22.         <script src="/static/js/charts/line.js"></script>
  23.         <script src="/static/js/charts/rose.js"></script>
  24.         <script src="/static/js/charts/heatmap.js"></script>
  25.         <script src="/static/js/charts/bar.js"></script>
  26.         <script src="/static/js/charts/sandian.js"></script>
  27.         <script src="/static/js/charts/wordcloud.js"></script>
  28.         <script src="/static/js/dashboard.js"></script>
  29.  
  30.     </head>
  31.     <body>
  32.         <div class="container">
  33.             <div class="row" style="text-align:
  34.                 center;height:50px;font-weight:bolder;font-size:28px;color:white;background:url(/static/img/title.png);background-repeat:
  35.                 no-repeat;background-size: 100% 100%">
  36.                 <span>用户购物行为分析展示大屏</span>
  37.                 <span id="time"></span>
  38.             </div>
  39.             <div class="row" >
  40.                 <div class="col-sm-3">
  41.                     <div class="row">
  42.                         <div class="chart m-panel">
  43.                             <div class="panel-header">
  44.                                 <span style="margin-left:5px;font-weight:
  45.                                     bolder;">用户性别分析</span>
  46.                             </div>
  47.                             <div id="user_gender" style="height: 200px"></div>
  48.                         </div>
  49.                     </div>
  50.                     <div class="row">
  51.                         <div class="chart m-panel">
  52.                             <div class="panel-header">
  53.                                 <span style="margin-left:5px;font-weight:
  54.                                     bolder;">新用户注册</span>
  55.  
  56.                             </div>
  57.                             <div id="user_registertime" style="height: 200px"></div>
  58.                         </div>
  59.                     </div>
  60.                     <div class="row">
  61.                         <div class="chart m-panel">
  62.                             <div class="panel-header">
  63.                                 <span style="margin-left:5px;font-weight:
  64.                                     bolder;">商品推荐排行</span>
  65.                             </div>
  66.                             <div id="product_category" style="height: 200px"></div>
  67.                         </div>
  68.                     </div>
  69.  
  70.  
  71.                 </div>
  72.                 <div class="col-sm-6">
  73.                     <!-- <div class="row" id="summary" style="padding: 5px 0 0 0;">
  74.                         <div class="col-sm-3 summary">
  75.                             <div
  76.                                 style="height:100%;width:100%;background:#0D349B;"></div>
  77.                         </div> <div class="col-sm-3 summary">
  78.                             <div
  79.                                 style="height:100%;width:100%;background:#0D349B;"></div>
  80.                         </div> <div class="col-sm-3 summary">
  81.                             <div
  82.                                 style="height:100%;width:100%;background:#0D349B;"></div>
  83.                         </div> <div class="col-sm-3 summary">
  84.                             <div
  85.                                 style="height:100%;width:100%;background:#0D349B;"></div>
  86.                         </div>
  87.                     </div> -->
  88.                     <div class="row">
  89.                         <div class="m-panel">
  90.                             <div class="panel-header">
  91.                                 <span style="margin-left:5px;font-weight:
  92.                                     bolder;">用户地域分布</span>
  93.                             </div>
  94.                             <div id="user_province" style="height: 388px"></div>
  95.                         </div>
  96.                     </div>
  97.                     <div class="row">
  98.                         <div class="col-sm-6" style="padding:0 5px 0 0;">
  99.                             <div class="chart m-panel">
  100.                                 <div class="panel-header">
  101.                                     <span style="margin-left:5px;font-weight:
  102.                                         bolder;">商品热销词云</span>
  103.                                 </div>
  104.                                 <div id="product_name" style="height: 200px"></div>
  105.                             </div>
  106.                         </div>
  107.                         <div class="col-sm-6" style="padding:0 0 0 5px;">
  108.                             <div class="chart m-panel">
  109.                                 <div class="panel-header">
  110.                                     <span style="margin-left:5px;font-weight:
  111.                                         bolder;">商品销售量分布</span>
  112.                                 </div>
  113.                                 <div id="sandian" style="height: 200px"></div>
  114.                             </div>
  115.                         </div>
  116.                     </div>
  117.                 </div>
  118.                 <div class="col-sm-3">
  119.                     <div class="row">
  120.                         <div class="chart m-panel">
  121.                             <div class="panel-header">
  122.                                 <span style="margin-left:5px;font-weight:
  123.                                     bolder;">用户等级分布</span>
  124.                             </div>
  125.                             <div id="user_viplevel" style="height: 200px"></div>
  126.                         </div>
  127.                     </div>
  128.                     <div class="row">
  129.                         <div class="chart m-panel">
  130.                             <div class="panel-header">
  131.                                 <span style="margin-left:5px;font-weight:
  132.                                     bolder;">用户活跃度热图</span>
  133.                             </div>
  134.                             <div id="heatmap" style="height: 200px"></div>
  135.                         </div>
  136.                     </div>
  137.                     <div class="row">
  138.                         <div class="chart m-panel">
  139.                             <div class="panel-header">
  140.                                 <span style="margin-left:5px;font-weight:
  141.                                     bolder;">商品品牌排行</span>
  142.                             </div>
  143.                             <div id="product_brand" style="height: 200px"></div>
  144.                         </div>
  145.                     </div>
  146.                     <div class="row">
  147.  
  148.                     </div>
  149.                 </div>
  150.             </div>
  151.         </div>
  152.  
  153. <script type="text/javascript">
  154. function time(){
  155. var vWeek,vWeek_s,vDay;
  156. vWeek = ["星期天","星期一","星期二","星期三","星期四","星期五","星期六"];
  157. var date =  new Date();
  158. year = date.getFullYear();
  159. month = date.getMonth() + 1;
  160. day = date.getDate();
  161. hours = date.getHours();
  162. minutes = date.getMinutes();
  163. seconds = date.getSeconds();
  164. vWeek_s = date.getDay();
  165. document.getElementById("time").innerHTML = year + "年" + month + "月" + day + "日" + "\t" + hours + ":" + minutes +":" + seconds + "\t" + vWeek[vWeek_s] ;
  166. };
  167. setInterval("time()",1000);
  168.         </script>
  169.     </body>
  170. </html>

 models.py文件

  1. from django.db import models
  2.  
  3. # Create your models here.
  4.  
  5.  
  6. class attribute(models.Model):
  7.     id = models.IntegerField(verbose_name="信息ID", default=1, primary_key=True, unique=True, null=False)
  8.     type = models.IntegerField(verbose_name="类型", default=1, blank=False, null=False)
  9.     attr = models.CharField(verbose_name="属性罗列", max_length=50, null=False, default='')
  10.     value = models.CharField(verbose_name="占比罗列", max_length=50, null=False, default='')
  11.     operator = models.IntegerField(verbose_name="操作人员ID", default=999999, null=False)
  12.     opertime = models.DateField(verbose_name="操作时间", max_length=50, null=False)
  13.  
  14. class action(models.Model):
  15.     id = models.IntegerField(verbose_name="信息ID",default=1, primary_key=True, unique=True, null=False)
  16.     action = models.CharField(verbose_name="行为大类", max_length=50, null=False, default='')
  17.     quantity = models.CharField(verbose_name="数量占比", max_length=50, null=False, default='')
  18.     operator = models.IntegerField(verbose_name="操作人员ID", default=999999, null=False)
  19.     opertime = models.DateField(verbose_name="操作时间", max_length=50, null=False)

 创建view.py文件

  1. from django.http import HttpResponse
  2. from django.shortcuts import render
  3. from user.models import attribute as UserAttribute
  4. from user.models import action as UserAction
  5. from product.models import attribute as ProductAttribute
  6. from product.models import action as ProductAction
  7. import json
  8. from enum import Enum
  9.  
  10. class UserAttrType(Enum):
  11.     gender = 1
  12.     province = 2
  13.     viplevel = 3
  14.     registertime = 4
  15.  
  16. class ProductAttrType(Enum):
  17.     category = 1
  18.     brand= 2
  19.     tradename = 3
  20.  
  21. def get_user_gender():
  22.  
  23.     user_gender = UserAttribute.objects.filter(type=1).latest('id')
  24.     return user_gender
  25.  
  26. def get_user_province():
  27.  
  28.     user_province = UserAttribute.objects.filter(type=2).latest('id')
  29.     return user_province
  30.  
  31. def get_user_viplevel():
  32.  
  33.     user_viplevel = UserAttribute.objects.filter(type=3).latest('id')
  34.     return user_viplevel
  35.  
  36. def get_user_registertime():
  37.  
  38.     user_registertime = UserAttribute.objects.filter(type=4).latest('id')
  39.     return user_registertime
  40.  
  41. def get_user_action(request):
  42.  
  43.     product_info = UserAction.objects.latest('id')
  44.     return product_info
  45.  
  46. def get_product_attribute(request):
  47.  
  48.     user_info = ProductAttribute.objects.latest('id')
  49.     return user_info
  50.  
  51. def get_product_name():
  52.  
  53.     product_name = ProductAttribute.objects.filter(type=3).latest('id')
  54.     return product_name
  55.  
  56. def get_product_brand():
  57.  
  58.     product_brand = ProductAttribute.objects.filter(type=2).latest('id')
  59.     return product_brand
  60.  
  61. def get_product_category():
  62.  
  63.     product_category = ProductAttribute.objects.filter(type=1).latest('id')
  64.     return product_category
  65.  
  66. def get_prodcut_action(request):
  67.  
  68.     product_info = ProductAction.objects.latest('id')
  69.     return product_info
  70.  
  71. def get_user_gender_json(request):
  72.     user_gender=get_user_gender()
  73.     resp = {}
  74.     resp['errorcode'] = 100
  75.     resp['detail'] = "success"
  76.     data = []
  77.  
  78.     try:
  79.         for i in range(len(user_gender.attr.split( '|'))):
  80.             data.append({"name": user_gender.attr.split( '|')[i], "value": user_gender.value.split( '|')[i]})
  81.     except Exception as e:
  82.         print('Error:', e)
  83.         resp['errorcode'] = 404
  84.         resp['detail'] = "failure"
  85.         data = e
  86.  
  87.     resp['data'] =data
  88.  
  89.     return HttpResponse(json.dumps(resp,ensure_ascii=False), content_type="application/json")
  90.  
  91.  
  92. def get_user_province_json(request):
  93.     user_province=get_user_province()
  94.     resp = {}
  95.     resp['errorcode'] = 100
  96.     resp['detail'] = "success"
  97.     data =[]
  98.  
  99.     try:
  100.         for i in range(len(user_province.attr.split( '|'))):
  101.             data.append({"name": user_province.attr.split( '|')[i], "value": user_province.value.split( '|')[i]})
  102.     except Exception as e:
  103.         print('Error:', e)
  104.         resp['errorcode'] = 404
  105.         resp['detail'] = "failure"
  106.         data = e
  107.  
  108.     resp['data'] =data
  109.  
  110.     return HttpResponse(json.dumps(resp,ensure_ascii=False), content_type="application/json")
  111.  
  112.  
  113. def get_user_viplevel_json(request):
  114.     user_viplevel=get_user_viplevel()
  115.     resp = {}
  116.     resp['errorcode'] = 100
  117.     resp['detail'] = "success"
  118.     data =[]
  119.  
  120.     try:
  121.         for i in range(len(user_viplevel.attr.split( '|'))):
  122.             data.append({"name": user_viplevel.attr.split( '|')[i], "value": user_viplevel.value.split( '|')[i]})
  123.     except Exception as e:
  124.         print('Error:', e)
  125.         resp['errorcode'] = 404
  126.         resp['detail'] = "failure"
  127.         data = e
  128.  
  129.     resp['data'] =data
  130.  
  131.     return HttpResponse(json.dumps(resp,ensure_ascii=False), content_type="application/json")
  132.  
  133. def get_user_registertime_json(request):
  134.     user_registertime=get_user_registertime()
  135.     resp = {}
  136.     resp['errorcode'] = 100
  137.     resp['detail'] = "success"
  138.     data =[]
  139.  
  140.     try:
  141.         for i in range(len(user_registertime.attr.split( '|'))):
  142.             data.append({"name": user_registertime.attr.split( '|')[i], "value": user_registertime.value.split( '|')[i]})
  143.     except Exception as e:
  144.         print('Error:', e)
  145.         resp['errorcode'] = 404
  146.         resp['detail'] = "failure"
  147.         data = e
  148.  
  149.     resp['data'] =data
  150.  
  151.     return HttpResponse(json.dumps(resp,ensure_ascii=False), content_type="application/json")
  152.  
  153.  
  154. def get_product_category_json(request):
  155.     product_category=get_product_category()
  156.     resp = {}
  157.     resp['errorcode'] = 100
  158.     resp['detail'] = "success"
  159.     data =[]
  160.  
  161.     try:
  162.         for i in range(len(product_category.attr.split( '|'))):
  163.             data.append({"name": product_category.attr.split( '|')[i], "value": product_category.value.split( '|')[i]})
  164.     except Exception as e:
  165.         print('Error:', e)
  166.         resp['errorcode'] = 404
  167.         resp['detail'] = "failure"
  168.         data = e
  169.  
  170.     resp['data'] =data
  171.  
  172.     return HttpResponse(json.dumps(resp,ensure_ascii=False), content_type="application/json")
  173.  
  174. def get_product_brand_json(request):
  175.     product_brand=get_product_brand()
  176.     resp = {}
  177.     resp['errorcode'] = 100
  178.     resp['detail'] = "success"
  179.     data =[]
  180.  
  181.     try:
  182.         for i in range(len(product_brand.attr.split( '|'))):
  183.             data.append({"name": product_brand.attr.split( '|')[i], "value": product_brand.value.split( '|')[i]})
  184.     except Exception as e:
  185.         print('Error:', e)
  186.         resp['errorcode'] = 404
  187.         resp['detail'] = "failure"
  188.         data = e
  189.  
  190.     resp['data'] =data
  191.  
  192.     return HttpResponse(json.dumps(resp,ensure_ascii=False), content_type="application/json")
  193.  
  194. def get_product_name_json(request):
  195.     product_name=get_product_name()
  196.     resp = {}
  197.     resp['errorcode'] = 100
  198.     resp['detail'] = "success"
  199.     data =[]
  200.  
  201.     try:
  202.         for i in range(len(product_name.attr.split( '|'))):
  203.             data.append({"name": product_name.attr.split( '|')[i], "value": product_name.value.split( '|')[i]})
  204.     except Exception as e:
  205.         print('Error:', e)
  206.         resp['errorcode'] = 404
  207.         resp['detail'] = "failure"
  208.         data = e
  209.  
  210.     resp['data'] =data
  211.  
  212.     return HttpResponse(json.dumps(resp,ensure_ascii=False), content_type="application/json")
  213.  
  214. def dashboard(request,):
  215.         return render(request,'dashboard.html')

 修改urls.py文件

  1. """ConsumerBuyingBehaviour URL Configuration
  3. The `urlpatterns` list routes URLs to views. For more information please see:
  4.     https://docs.djangoproject.com/en/2.2/topics/http/urls/
  5. Examples:
  6. Function views
  7.     1. Add an import:  from my_app import views
  8.     2. Add a URL to urlpatterns:  path('', views.home, name='home')
  9. Class-based views
  10.     1. Add an import:  from other_app.views import Home
  11.     2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
  12. Including another URLconf
  13.     1. Import the include() function: from django.urls import include, path
  14.     2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
  15. """
  16. from django.contrib import admin
  17. from django.urls import path
  18. from django.conf.urls import url
  19. from . import view
  20.  
  21. urlpatterns = [
  22.     path('',view.dashboard),
  23.     path('api/user_gender/', view.get_user_gender_json),
  24.     path('api/user_province/', view.get_user_province_json),
  25.     path('api/user_viplevel/', view.get_user_viplevel_json),
  26.     path('api/user_registertime/', view.get_user_registertime_json),
  27.     path('api/product_category/', view.get_product_category_json),
  28.     path('api/product_brand/', view.get_product_brand_json),
  29.     path('api/product_name/', view.get_product_name_json),
  30.     path('dashboard/', view.dashboard),
  31. ]

修改settings.py文件

  1. """
  2. Django settings for ConsumerBuyingBehaviour project.
  4. Generated by 'django-admin startproject' using Django 2.2.4.
  6. For more information on this file, see
  7. https://docs.djangoproject.com/en/2.2/topics/settings/
  9. For the full list of settings and their values, see
  10. https://docs.djangoproject.com/en/2.2/ref/settings/
  11. """
  12.  
  13. import os
  14.  
  15. # Build paths inside the project like this: os.path.join(BASE_DIR, ...)
  16. BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
  17.  
  18.  
  19. # Quick-start development settings - unsuitable for production
  20. # See https://docs.djangoproject.com/en/2.2/howto/deployment/checklist/
  21.  
  22. # SECURITY WARNING: keep the secret key used in production secret!
  23. SECRET_KEY = '0=$&m8he4kttcw8xzw534olj-m%-vud%%cdtz)_#vo+l_oumht'
  24.  
  25. # SECURITY WARNING: don't run with debug turned on in production!
  26. DEBUG = True
  28. ALLOWED_HOSTS = ['*']
  31. # Application definition
  33. INSTALLED_APPS = [
  34.     'django.contrib.admin',
  35.     'django.contrib.auth',
  36.     'django.contrib.contenttypes',
  37.     'django.contrib.sessions',
  38.     'django.contrib.messages',
  39.     'django.contrib.staticfiles',
  40.     'user',
  41.     'product',
  42. ]
  44. MIDDLEWARE = [
  45.     'django.middleware.security.SecurityMiddleware',
  46.     'django.contrib.sessions.middleware.SessionMiddleware',
  47.     'django.middleware.common.CommonMiddleware',
  48.     'django.middleware.csrf.CsrfViewMiddleware',
  49.     'django.contrib.auth.middleware.AuthenticationMiddleware',
  50.     'django.contrib.messages.middleware.MessageMiddleware',
  51.     'django.middleware.clickjacking.XFrameOptionsMiddleware',
  52. ]
  54. ROOT_URLCONF = 'ConsumerBuyingBehaviour.urls'
  56. TEMPLATES = [
  57.     {
  58.         'BACKEND': 'django.template.backends.django.DjangoTemplates',
  59.         'DIRS': [BASE_DIR+"/templates"],
  60.         'APP_DIRS': True,
  61.         'OPTIONS': {
  62.             'context_processors': [
  63.                 'django.template.context_processors.debug',
  64.                 'django.template.context_processors.request',
  65.                 'django.contrib.auth.context_processors.auth',
  66.                 'django.contrib.messages.context_processors.messages',
  67.             ],
  68.         },
  69.     },
  70. ]
  72. WSGI_APPLICATION = 'ConsumerBuyingBehaviour.wsgi.application'
  75. # Database
  76. # https://docs.djangoproject.com/en/2.2/ref/settings/#databases
  78. DATABASES = {
  79.     'default': {
  80.         #'ENGINE': 'django.db.backends.sqlite3',
  81.         #'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
  82.         'ENGINE': 'django.db.backends.mysql',
  83.         #'NAME': 'consumer_buying_behaviour',
  84.         #'USER': 'user01',
  85.         #'PASSWORD': 'sugon123!',
  86.         #'HOST': 'localhost',
  87.         #'PORT': '3306',,
  88.         'NAME': 'user_actions_db',
  89.         'USER': 'root',
  90.         'PASSWORD': '123456',
  91.         'HOST': '211.84.112.23',
  92.         'PORT': '8046',
  93.         #'HOST': '172.16.0.11',
  94.         #'PORT': '3306',
  95.     }
  96. }
  99. # Password validation
  100. # https://docs.djangoproject.com/en/2.2/ref/settings/#auth-password-validators
  102. AUTH_PASSWORD_VALIDATORS = [
  103.     {
  104.         'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
  105.     },
  106.     {
  107.         'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
  108.     },
  109.     {
  110.         'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
  111.     },
  112.     {
  113.         'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
  114.     },
  115. ]
  118. # Internationalization
  119. # https://docs.djangoproject.com/en/2.2/topics/i18n/
  121. LANGUAGE_CODE = 'en-us'
  123. TIME_ZONE = 'UTC'
  125. USE_I18N = True
  127. USE_L10N = True
  129. USE_TZ = True
  132. # Static files (CSS, JavaScript, Images)
  133. # https://docs.djangoproject.com/en/2.2/howto/static-files/
  135. STATIC_URL = '/static/'
  136. STATICFILES_DIRS=[os.path.join(BASE_DIR,'static'),]

3、发布工程

python.exe manage.py runserver 127.0.0.1:8000

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号