热门标签
热门文章
- 12023年元宇宙五大趋势已定 如何夺得先机？_元宇宙未来发展趋势
- 2idea ——idea中Git提交代码到远程仓库回退步骤_idea回退远程仓库代码
- 3[超拟人语音合成] 科大讯飞API的Python实现_科大讯飞python语音对话
- 4壁纸动态-Mac电脑-4K超高清[po破]动态壁纸[解]Dynamic WallPaper 安装使用教程_dynamic wallpaper 18.4版
- 5git clone的时候直接加上用户名和密码_git clone 命令加上用户名
- 6Android 使用ping命令判断当前网络状态_android ping
- 7转载：大数据基础服务平台
- 8YOLOv8优化策略：注意力机制涨点系列篇| 多维协作注意模块MCA，效果秒杀ECA、SRM、CBAM等_mca注意力机制
- 9确定当前Python环境中的site-packages目录位置
- 10数组删除的各种方法
当前位置: article > 正文
【Django】Echarts连接数据库实现数据可视化——环形图_echarts连接数据库生成图表案例
作者：黑客灵魂 | 2024-06-29 14:08:58
赞
踩
echarts连接数据库生成图表案例
前言
经过上一文中国地图”与“世界地图的学习，初步了解了静态数据下的图表化。那么下文将详细介绍一下，如何接入数据库，并实现数据动态可视化。
| 所用技术 | 版本 |
|---|---|
| Python | 3.8 |
| Django | 3.2 |
| Echarts | 5.3 |
| jQuery | 2.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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
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')
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
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)
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
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'),
]
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
4.urls.py
from django.urls import path, include,
urlpatterns = [
#资产探测
path('detection/',include('detection.urls')),
]
- 1
- 2
- 3
- 4
- 5
- 6
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');
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
数据为WEB系统自动存入的，截取部分，可供大家测试。
二、图表展示
三、技术重点
1.django引入本地js
1.在根目录下创建 static目录，并引入js
2.setting.py中写入
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]
- 1
- 2
- 3
- 4
3.在需引入js的html文件中写入，加载静态文件夹
{% load static %}
- 1
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
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
1.将js数据写入以下框内，以post方法提交给后端/detection/get_search视图
$.post('/detection/get_search', function (data) {
});
- 1
- 2
- 3
2.同时接受后端传来的json格式的data数据，可通过以下代码在控制台查看data数据
console.log(data);
- 1
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日于家中
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/黑客灵魂/article/detail/769426
推荐阅读
相关标签
