【Django】Echarts连接数据库实现数据可视化——环形图

已于 2022-04-17 17:30:11 修改
阅读量6.9k 收藏 102
点赞数 17
分类专栏： django 文章标签： python django ajax echarts jquery
于 2022-04-05 02:58:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45859826/article/details/123963782
版权

文章目录

前言

经过上一文中国地图”与“世界地图的学习，初步了解了静态数据下的图表化。那么下文将详细介绍一下，如何接入数据库，并实现数据动态可视化。

所用技术版本
Python3.8
Django3.2
Echarts5.3
jQuery2.1

一、先上代码

1.index.html

<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
    <meta charset="UTF-8">
    <title>hello</title>
</head>
<body>
<div id="main1" style="height: 600px"></div>
</body>
</html>

<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="/static/js/echarts.js"></script>
     
    <script>
        var myChart3 = echarts.init(document.getElementById('main1'));

        $.post('/detection/get_search', function (data) {  //post方法提交到get_search视图
            option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'horizontal',
                    top: 'bottom',
                    padding: 0,
                },
                toolbox: {
                    show: true,
                    right: 50,
                    feature: {
                        dataView: {readOnly: false},
                        saveAsImage: {}, //保存为图片
                    }
                },
                series: [
                    {
                        name: '搜索类型频率',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center',
                            emphasis: {
                                show: true
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '30',
                                fontWeight: 'bold',
                            }
                        },
                        data: data  //data为后端返回的json数据
                    }
                ]
            };

            {#console.log(data);#}
            myChart3.setOption(option);
        });

    </script>

2.detection\views.py

from django.http import HttpResponse
from django.views.decorators.csrf import csrf_exempt
from detection.models import detection_collect

@csrf_exempt
def get_search(request):
    search_list = []
    type = detection_collect.objects.values_list('type',flat=True)
    type_list = list(type)
    type_set = set(type_list)
    
    try:
        for i in type_set:
            count = type_list.count(i)
            # print("the %s has found %d" %(i,type_list.count(i)))
            tem = {}
            tem['name'] = i
            tem['value'] = count
            search_list.append(tem)
        print('search_list:---',search_list)
    except Exception as e:
        print('e:',e)
    return HttpResponse(json.dumps(search_list), content_type='application/json')

2.detection\models.py

from django.db import models

class detection_collect(models.Model):
    id = models.AutoField(primary_key=True)
    username = models.CharField(max_length=30, null=True)
    url = models.CharField(max_length=255, null=True)
    type = models.CharField(max_length=100, null=True)
    time = models.DateTimeField(auto_now_add=True)

3.detection\urls.py

from django.urls import path
from . import views

urlpatterns = [

    path('', views.detection_view, name='detection_view'),

    #图表
    path('get_search', views.get_search, name='get_search'),

]

4.urls.py

from django.urls import path, include,

urlpatterns = [
    #资产探测
    path('detection/',include('detection.urls')),
]

5.detection_detection_collect.sql

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for detection_detection_collect
-- ----------------------------
DROP TABLE IF EXISTS `detection_detection_collect`;
CREATE TABLE `detection_detection_collect`  (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(30) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `url` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `type` varchar(100) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `time` datetime(6) NOT NULL,
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = MyISAM AUTO_INCREMENT = 193 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of detection_detection_collect
-- ----------------------------
INSERT INTO `detection_detection_collect` VALUES (183, '555', 'jd.com', 'waf查询', '2022-03-15 01:21:13.126692');
INSERT INTO `detection_detection_collect` VALUES (80, '555', '114.114.114.114', 'ip信息搜索', '2022-03-13 16:10:22.359307');
INSERT INTO `detection_detection_collect` VALUES (81, '555', '114.114.114.114', 'ip信息搜索', '2022-03-13 16:11:31.672375');
INSERT INTO `detection_detection_collect` VALUES (78, '555', '99.12.13.21', 'ip信息搜索', '2022-03-13 13:08:31.617424');
INSERT INTO `detection_detection_collect` VALUES (77, '555', '6.6.6.6', 'ip信息搜索', '2022-03-13 09:09:51.273724');
INSERT INTO `detection_detection_collect` VALUES (76, '555', '6.6.6.6', 'ip138搜索', '2022-03-13 09:09:35.988596');
INSERT INTO `detection_detection_collect` VALUES (73, '444', 'www.baidu.com', 'waf查询', '2022-03-11 14:20:33.363923');
INSERT INTO `detection_detection_collect` VALUES (72, '444', 'http://192.168.137.129/', '信息泄露查询', '2022-03-11 14:20:20.860266');
INSERT INTO `detection_detection_collect` VALUES (71, '444', '114.114.114.114', 'ip信息搜索', '2022-03-11 14:20:12.020249');
INSERT INTO `detection_detection_collect` VALUES (70, '444', 'https://v.douyin.com/L6sykKs/', 'cms搜索', '2022-03-11 14:19:56.026192');
INSERT INTO `detection_detection_collect` VALUES (69, '444', 'taobao.com', 'whois搜索', '2022-03-11 14:19:50.737942');
INSERT INTO `detection_detection_collect` VALUES (68, '444', 'jd.com', 'cdn搜索', '2022-03-11 14:19:28.133046');
INSERT INTO `detection_detection_collect` VALUES (67, '444', 'http://www.cskaoyan.com/', 'cdn搜索', '2022-03-11 14:19:25.230318');
INSERT INTO `detection_detection_collect` VALUES (66, '444', 'http://whatweb.bugscaner.com/', 'cdn搜索', '2022-03-11 14:19:10.802627');
INSERT INTO `detection_detection_collect` VALUES (65, '444', 'jd.com', 'IP端口搜索', '2022-03-11 14:19:01.372188');
INSERT INTO `detection_detection_collect` VALUES (64, '444', 'jd.com', 'C段旁注搜索', '2022-03-11 14:18:52.549565');
INSERT INTO `detection_detection_collect` VALUES (63, '444', 'jd.com', 'dns搜索', '2022-03-11 14:18:30.979623');
INSERT INTO `detection_detection_collect` VALUES (62, '444', 'jd.com', 'dns搜索', '2022-03-11 14:18:26.932343');
INSERT INTO `detection_detection_collect` VALUES (61, '444', '', 'dns搜索', '2022-03-11 14:18:20.973494');
INSERT INTO `detection_detection_collect` VALUES (60, '444', 'jd.com', 'dns搜索', '2022-03-11 14:18:09.584881');
INSERT INTO `detection_detection_collect` VALUES (59, '444', 'jd.com', 'https证书查询', '2022-03-11 14:17:47.667782');
INSERT INTO `detection_detection_collect` VALUES (58, '444', 'jd.com', 'ip138搜索', '2022-03-11 14:17:13.332714');
INSERT INTO `detection_detection_collect` VALUES (57, '444', 'jd.com', 'Bing搜索', '2022-03-11 14:16:56.762542');

数据为WEB系统自动存入的，截取部分，可供大家测试。

二、图表展示

在这里插入图片描述

三、技术重点

1.django引入本地js

1.在根目录下创建 static目录，并引入js

在这里插入图片描述

2.setting.py中写入

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
]

3.在需引入js的html文件中写入，加载静态文件夹

{% load static %}

4.打开控制台验证

在这里插入图片描述

2.django连接mysql

连接数据库的操作在前文“Python-Django初体验”中已有详细介绍，还不清楚的可以手动跳转：https://blog.csdn.net/qq_45859826/article/details/123956196?spm=1001.2014.3001.5501

3.静改动，具体操作

静态图表hello.html

<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
    <meta charset="UTF-8">
    <title>hello</title>
</head>
<body>
<div id="main1" style="height: 600px"></div>
</body>
</html>

<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="/static/js/echarts.js"></script>

<script>
    var myChart3 = echarts.init(document.getElementById('main1'));

    option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'horizontal',
            top: 'bottom',
            padding: 0,
        },
        toolbox: {
            show: true,
            right: 50,
            feature: {
                dataView: {readOnly: false},
                saveAsImage: {}, //保存为图片
            }
        },
        series: [
            {
                name: '搜索类型频率',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center',
                    emphasis: {
                        show: true
                    }
                },
                labelLine: {
                    show: false
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '30',
                        fontWeight: 'bold',
                    }
                },
                data: [
                    {value: 1048, name: 'Search Engine'},
                    {value: 735, name: 'Direct'},
                    {value: 580, name: 'Email'},
                    {value: 484, name: 'Union Ads'},
                    {value: 300, name: 'Video Ads'}
                ]
            }
        ]
    };

    {#console.log(data);#}
    myChart3.setOption(option);

</script>

在这里插入图片描述

1.将js数据写入以下框内，以post方法提交给后端/detection/get_search视图

$.post('/detection/get_search', function (data) {

});

2.同时接受后端传来的json格式的data数据，可通过以下代码在控制台查看data数据

console.log(data);

在这里插入图片描述

3.data数据是后端get_search()方法实现的，在后端返回的数据如下

在这里插入图片描述
其中name值为搜索类型，value值为该类型出现的次数。具体实现方法见上文中的detection\views.py。

总结

首先感谢各位师傅的优秀文章：

1.Echarts官方示例：https://echarts.apache.org/examples/zh/editor.html?c=pie-doughnut
2.jQuery $.post()方法的用法：http://c.biancheng.net/view/8006.html
3.Echarts菜鸟教程：https://www.runoob.com/echarts/echarts-tutorial.html

还是要给自己打气，加油！
2022年4月5日于家中

微雨停了
关注
专栏目录
eCharts使用图表简单示例
hu_shengyang的专栏
09-03 6万+
1. eCharts官网 http://echarts.baidu.com/index.html。     这是官网的简介：     ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量
Echarts连接数据库实例
06-13
连接数据库使用Echarts插件实现可视化的小例子。使用的技术是java+servlet+mysql。项目代码压缩包中包含.sql数据库文件，开发环境是myeclipse。
Django使用echarts进行可视化展示（mysql数据库）
热门推荐
zxctime的博客
07-21 1万+
Django使用echarts进行可视化展示（mysql数据库）条件准备连接mysql导入数据使用echarts可视化展示 本文以学生成绩折线图展示为例 条件准备 电脑上有myslq数据库 有 echarts 的 js 文件 连接mysql # settings.py 文件 DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', # mysql 数据库名 'NAME':
【数据可视化（一）】Pyecharts中如何使用MySQL数据库中的数据
Eden_Hazard7的博客
08-09 548
Pyecharts官网中的示例代码，和网上的大多数教学代码，都是基于csv文件或txt文件进行读取，在数据量较大时若需要进行数据的增删改查很不方便，如何直接使用MySQL数据库中的数据呢？本文也可以看作Python连接MySQL数据库的方法，供参考。
django之 echarts数据可视化2：导入数据库数据
水w的博客
04-30 5717
在前面的基础上，现在我们想要修改echarts示例数据，改成我们自己数据库中的数据。
Echarts连接数据库，实时绘制动态图
小蜗牛的珍贵百宝箱
05-15 1万+
Echarts实现动态绘制折线图，连接数据库
基于Django+Echarts的企业招聘数据可视化大屏项目源码+sql数据库（本科毕业设计）.zip
07-01
基于Django+Echarts的企业招聘数据可视化大屏项目源码+sql数据库（本科毕业设计）.zip基于Django+Echarts的企业招聘数据可视化大屏项目源码+sql数据库（本科毕业设计）.zip基于Django+Echarts的企业招聘数据可视化...
在django框架项目里实现了一个echarts数据可视化看板的模板界面
05-07
在django框架项目里实现了一个echarts数据可视化看板的模板界面，不仅实现了可视化看板的布局（标题、当前时间），而且里面还包括了2个柱状图、2个折线图、2个饼图的使用，以及中国地图map的使用。
Django+Python+Echarts对招聘数据进行可视化分析.zip
06-11
在本项目"Django+Python+Echarts对招聘数据进行可视化分析"中，开发者使用了三个核心组件：Django作为Web框架，Python作为后端编程语言，以及Echarts作为前端数据可视化库。这个组合提供了从数据处理到用户交互的...
Django+Python+Echarts对招聘数据进行可视化分析源码.zip
09-17
Django+Python+Echarts对招聘数据进行可视化分析源码.zip 代码完整下载可用，确保可以运行 Django+Python+Echarts对招聘数据进行可视化分析源码.zip 代码完整下载可用，确保可以运行。Django+Python+Echarts对招聘...
基于Python、Django2、echarts的智联招聘数据可视化设计源码
最新发布
10-01
本项目是一款基于Python、Django2和echarts的智联招聘数据可视化设计源码，共包含583个文件，涵盖229个JavaScript文件、107个HTML文件、61个CSS文件、52个PNG图片文件、22个txt文件、21个pyc文件、19个jpg文件、16个...
SSM+Echarts+Mysql实现的从数据库获取数据展示图表，展示，小案例
01-22
SSM+Echarts+Mysql实现的从数据库获取数据展示图表，展示，小案例，亲测（可用）
Django 配合Echarts绘制图表
CSDN
01-16 9566
在前面我总结了关于DjangoAdmin的使用技巧，利用DjangoAdmin这个后台管理功能，自己定制页面可以完成非常多的功能，下面我们将重点研究主机图形的绘制，展示和报表等功能的具体实现步骤，这里也算是个人的一点点经验。 定制查询图形功能 urls.py from django.contrib import admin from django.urls import path from My...
Django echarts初试随笔
那人那事的博客
12-26 350
Django项目的配置文件APP配置 INSTALLED_APPS = [ 'django.contrib.admin', # 管理员站点 'django.contrib.auth', # 认证授权系统 'django.contrib.contenttypes', # 内容类型框架 'django.contrib.sessions...
echarts 环形图动态数据
weixin_43614129的博客
06-16 653
功能需求：统计水井工作状态占比，并已环形图的方式，展示动态数据 后端代码 controller /** * 水井占比 * */ @RequiresPermissions("sjgg:aaa:sjlist") @GetMapping("/sjlist") @ResponseBody public List sjtongji(SjWell sjWell){ List<SjWell> selectsjtongji = sjWellS
Echarts与后台(SSM) 数据交互
qq_44543292的博客
05-09 5113
一、Echarts 是什么？ 在说 Echarts 是什么之前,先来看看我们常看到的数据图形: 这就是 Echarts 搞出来的,通俗一点来说,Echarts 就是可视化图形界面,获取到后台的数据,通过图形的形式形象化的展现在你的面前。相对于死板的数据字符串,清晰的图形分析简直好到不能再好。 当后台管理系统有一定的数据量后，我们可能需要对这些数据进行统计、分析，提炼出更多有用的信息，而为了使这些冰冷的数据显得更平易近人，更直观的传达信息，我们可以使用图表来将数据表达出来，实现数据...
Echarts 折线图对接后台数据
weixin_44640804的博客
11-10 2660
想要使用Echarts折线图来对接后台返回的数据，因为第一次使用这个图表库还不是很熟练，在对接数据时遇到了一些小问题。
django报表系统_django使用echarts
weixin_36325338的博客
12-23 1378
项目采用vue+echarts+datav开发的大屏数据展示及实现中国地图省市县下钻，数据图形可视化，数据间的相互联动。 ...»学习目录 1.可视化面板介绍 1.1技术要点 1.2案例适配方案 1.3页面主体布局2.Echarts(重点) 2.1echarts介绍 2.2echarts体验 2.3echarts基础配置3.Echarts快速使用 3.1官网实例 3.2.社区Gallery 废话少...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

微雨停了

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值