阅读:77
经过上一文中国地图”与“世界地图的学习,初步了解了静态数据下的图表化。那么下文将详细介绍一下,如何接入数据库,并实现数据动态可视化。
所用技术 | 版本 |
---|---|
Python | 3.8 |
Django | 3.2 |
Echarts | 5.3 |
jQuery | 2.1 |
<!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>
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')
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)
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'),
]
from django.urls import path, include,
urlpatterns = [
#资产探测
path('detection/',include('detection.urls')),
]
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系统自动存入的,截取部分,可供大家测试。
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]
{% load static %}
连接数据库的操作在前文“Python-Django初体验”中已有详细介绍,还不清楚的可以手动跳转:https://blog.csdn.net/qq_45859826/article/details/123956196?spm=1001.2014.3001.5501
静态图表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>
$.post('/detection/get_search', function (data) {
});
console.log(data);
其中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日于家中