The final effect is as follows:
1. Django implementation code
The settings are configured as follows:
pingTool is my app
The url code under pingTool is as follows:
from django.urls import re_path as url
from pingTool import views
from django.urls import path
urlpatterns = [
path('map/', views.MapView.as_view()),
path('mapresult/', views.mapClient.as_view()),
]
The views code is as follows:
from django.shortcuts import render
import json
import time
from random import randrange
from django.http import HttpResponse
from rest_framework.views import APIView
from pyecharts.charts import Bar, Line, Map
from pyecharts import options as opts
from pingTool import models
from tools.ping import pingIp, yd_data, lt_data, dx_data
from pyecharts.faker import Faker
def response_as_json(data):
json_str = json.dumps(data)
response = HttpResponse(
json_str,
content_type="application/json",
)
response["Access-Control-Allow-Origin"] = "*"
return response
def json_response(data, code=200):
data = {
"code": code,
"msg": "success",
"data": data,
}
return response_as_json(data)
def json_error(error_string="error", code=500, **kwargs):
data = {
"code": code,
"msg": error_string,
"data": {
}
}
data.update(kwargs)
return response_as_json(data)
JsonResponse = json_response
JsonError = json_error
def map():
# 获取各个省份运营商的ping延迟数据
yd_provinces, yd_values = yd_data()
lt_provinces, lt_values = lt_data()
dx_provinces, dx_values = dx_data()
m = (
Map()
.add("移动", [list(z) for z in zip(yd_provinces, yd_values)], "china")
.add("联通", [list(z) for z in zip(lt_provinces, lt_values)], "china")
.add("电信", [list(z) for z in zip(dx_provinces, dx_values)], "china")
# .add("电信", [list(z) for z in zip(Faker.provinces, Faker.values())], "china")
.set_global_opts(
title_opts=opts.TitleOpts(
title="ping全国延迟", subtitle=time.strftime('%Y-%m-%d %H:%M'), pos_left='center'),
visualmap_opts=opts.VisualMapOpts(
min_=0,
max_=200,
is_piecewise=True,
split_number=5,
range_text=['高', '低'],
pieces=[
{
"min": 0, "max": 20},
{
"min": 20, "max": 40},
{
"min": 40, "max": 80},
{
"min": 80, "max": 160},
{
"min": 200, "max": 2000},
]
),
toolbox_opts=opts.ToolboxOpts(
is_show=True, orient='vertical', pos_top='middle', pos_left="90%"),
legend_opts=opts.LegendOpts(pos_left='left', orient='vertical')
)
.dump_options_with_quotes()
)
return m
class MapView(APIView):
def get(self, request, *args, **kwargs):
return JsonResponse(json.loads(map()))
class mapClient(APIView):
def get(self, request, *args, **kwargs):
return HttpResponse(content=open("./templates/map.html", encoding='utf-8').read())
This project uses python's pythonping package to extract ping data from pythonping import ping. The custom ping code is as follows:
import re
import time
import json
from pythonping import ping
from pyecharts.faker import Faker
# 读取省份运营商的ip信息
with open("tools/provinceIP", 'r', encoding='utf-8') as f:
content = json.loads(f.read())
# 获取省份的ping数据
def get_provincesData(IP):
ip_data = ping(IP, count=5, verbose=False)
return ip_data
# 移动延迟数据
def yd_data():
value = []
yd_province = content['移动']['province']
yd_ip = content['移动']['IP']
for ip in yd_ip:
data = get_provincesData(ip)
value.append(data.rtt_avg_ms)
return yd_province, value
# 联通延迟数据
def lt_data():
value = []
lt_province = content['联通']['province']
lt_ip = content['联通']['IP']
for ip in lt_ip:
data = get_provincesData(ip)
value.append(data.rtt_avg_ms)
return lt_province, value
# 电信延迟数据
def dx_data():
value = []
dx_province = content['电信']['province']
dx_ip = content['电信']['IP']
for ip in dx_ip:
data = get_provincesData(ip)
value.append(data.rtt_avg_ms)
return dx_province, value
The front-end code is as follows:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="/static/icon/favicon.ico">
<title>ping</title>
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
<!-- 如果地图不显示需要添加此行 -->
<script type="text/javascript" src="https://assets.pyecharts.org/assets/maps/china.js"></script>
</head>
<body>
<div class="container">
<br>
<div id="map" style="width:1100px; height:800px;"></div>
</div> <!-- /container -->
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/ie10-viewport-bug-workaround.js"></script>
<script>
var chart = echarts.init(document.getElementById('map'), 'white', {
renderer: 'canvas' });
$(
function () {
fetchData(chart);
// setInterval(fetchData, 2000); //定时刷新
}
);
function fetchData() {
$.ajax({
type: "GET",
url: "http://127.0.0.1:8000/pingTool/map",
dataType: 'json',
success: function (result) {
chart.setOption(result.data);
}
});
}
</script>
</body>
</html>
The ip configuration of each province provinceIPis as follows:
{
"移动": {
"province": [
"广东省",
"北京市",
"上海市",
"江西省",
"湖南省",
"浙江省",
"江苏省",
"天津市",
"河北省",
"山西省",
"内蒙古自治区",
"辽宁省",
"吉林省",
"黑龙江省",
"安徽省",
"福建省",
"山东省",
"河南省",
"湖北省",
"广西壮族自治区",
"海南省",
"重庆市",
"四川省",
"贵州省",
"云南省",
"西藏自治区",
"陕西省",
"甘肃省",
"青海省",
"宁夏回族自治区",
"新疆维吾尔自治区"
],
"IP": [
"120.236.14.140",
"211.137.30.66",
"211.136.150.66",
"211.141.85.68",
"211.142.210.99",
"112.17.42.34",
"221.181.240.134",
"117.131.207.245",
"111.11.25.114",
"183.203.27.146",
"218.202.136.82",
"211.180.241.18",
"211.141.0.99",
"218.203.48.113",
"221.176.18.6",
"211.138.159.138",
"120.192.93.11",
"221.176.102.14",
"111.47.196.22",
"211.138.250.154",
"221.176.98.146",
"218.201.32.193",
"117.177.219.70",
"211.139.13.137",
"218.202.0.1",
"111.11.238.150",
"120.192.247.134",
"117.156.6.62",
"211.138.75.123",
"221.176.15.45",
"221.181.62.218"
]
},
"联通": {
"province": [
"广东省",
"北京市",
"上海市",
"江西省",
"湖南省",
"浙江省",
"江苏省",
"天津市",
"河北省",
"山西省",
"内蒙古自治区",
"辽宁省",
"吉林省",
"黑龙江省",
"安徽省",
"福建省",
"山东省",
"河南省",
"湖北省",
"广西壮族自治区",
"海南省",
"重庆市",
"四川省",
"贵州省",
"云南省",
"西藏自治区",
"陕西省",
"甘肃省",
"青海省",
"宁夏回族自治区",
"新疆维吾尔自治区"
],
"IP": [
"58.252.2.194",
"202.106.0.20",
"219.158.7.85",
"58.17.1.34",
"110.53.247.30",
"124.160.82.194",
"58.241.0.1",
"117.8.222.106",
"121.17.126.1",
"218.26.27.214",
"202.99.226.78",
"113.230.172.58",
"125.32.127.2",
"61.167.6.130",
"58.242.193.74",
"58.22.110.138",
"119.188.185.70",
"61.168.37.62",
"58.19.112.133",
"121.31.33.82",
"221.11.154.74",
"221.5.232.11",
"119.6.117.94",
"43.254.100.6",
"221.3.139.11",
"221.13.95.110",
"123.139.1.106",
"60.13.16.126",
"221.207.63.22",
"221.199.1.46",
"221.7.2.25"
]
},
"电信": {
"province": [
"广东省",
"北京市",
"上海市",
"江西省",
"湖南省",
"浙江省",
"江苏省",
"天津市",
"河北省",
"山西省",
"内蒙古自治区",
"辽宁省",
"吉林省",
"黑龙江省",
"安徽省",
"福建省",
"山东省",
"河南省",
"湖北省",
"广西壮族自治区",
"海南省",
"重庆市",
"四川省",
"贵州省",
"云南省",
"西藏自治区",
"陕西省",
"甘肃省",
"青海省",
"宁夏回族自治区",
"新疆维吾尔自治区"
],
"IP": [
"218.17.216.171",
"220.181.22.1",
"218.1.104.1",
"202.101.224.68",
"124.232.140.18",
"220.191.157.26",
"61.177.113.130",
"219.150.37.106",
"27.129.1.166",
"202.100.4.1",
"121.56.32.1",
"219.148.254.186",
"222.168.78.10",
"219.147.146.62",
"220.178.0.1",
"222.77.191.42",
"150.138.192.110",
"171.8.240.250",
"111.175.223.246",
"58.59.133.1",
"218.77.136.195",
"119.84.89.45",
"118.123.217.102",
"203.174.4.11",
"112.117.212.11",
"219.151.32.85",
"61.134.1.125",
"61.178.3.117",
"202.100.149.50",
"124.224.255.55",
"222.83.13.6"
]
}
}