Django使用pyecharts实现全国ping延迟地图显示
最终效果如下：
1、Django实现代码
settings配置如下：
pingTool是我的应用
pingTool下的url代码如下：
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()),
]
views代码如下：
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())
此项目用到python的pythonping包实现ping数据的提取 from pythonping import ping，自定义的ping代码如下：
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
前端代码如下：
<!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('