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

     阅读:29


前言

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

所用技术版本
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日于家中