漂亮！将echarts加入到你的项目中！
source link: http://www.justdopython.com/2022/09/05/python-shift/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
漂亮！将echarts加入到你的项目中！
2022-09-05
| python
echarts官网有很多好看的图例，怎么结合起来放到自己的项目中呢？比如这种酷酷的首页：
看起来美观又大方，自己能用上就好了。其实是可以的，echarts上有现成的图例和示例代码，咱们只要改改数据源就可以了，至于好看的布局，比如上图这种，我们直接借鉴过来不就可以了🐎。
以公司网页为例，简单介绍一个例子，下图这么多网址的巡检如何用一个图例来展示。
可以把它们写到文件里：
先创建一个文件，比如叫config.cfg
[url]
优酷 = http://www.youku.com/
错误网址 = http://www.111.cn/
安装configparser模块
pip install configparser
读取这些网址
import configparser
cfg = configparser.ConfigParser()
cfg.read('config.cfg',encoding='utf-8')
urls = cfg.items('url')
print(urls)
结果如下：
[('优酷', 'http://www.youku.com/'), ('错误网址', 'http://www.111.cn/')]
echarts官网找图
接下来，怎么展示网站的状态码是否为200呢？
echarts上找了一下，看到一个“极坐标柱状图”，很适合这种判断True or False的场景，
比如网页状态码是否为200，是返回1，否返回0，然后将echarts的数据源替换成我们的就是这种效果：
数值为1（代表正常）的条目会显示蓝条，0为异常则用红色文字打印出来，整体巡检效果如下：
检查url
requests模块判断状态码是否为200
import requests
def check_url(url):
try:
r = requests.get(url, timeout=10)
return r.status_code
except Exception as e:
return e
把config.cfg读到的网址，利用check_url函数检查完放到一个列表中
urls_state = []
for url in urls:
status_code = check_url(url[1])
if status_code == 200:
urls_state.append([0,1])
else:
urls_state.append([1, 1,url[0]+' ConnectTimeout'])
结果如下：
[
[0, 1],
[1, 1, '优酷 ConnectTimeout'],
[0, 1],
[1, 1, '错误网址 ConnectTimeout']
]
把这些信息返回给前端
from rest_framework.views import APIView
class get_urls(APIView):
def get(request,*args,**kwargs):
urlsState = check_url.main()
#网页的名字列表
cities = ['公司主页', 'maas', 'maas1', 'maas2', 'maas3', 'maas4', '1小猫咪', '2小猫咪', '3小猫咪', '4小猫咪', '5小猫咪', '6小猫咪', '7小猫咪', '8小猫咪', '9小猫咪','10小猫咪','11小猫咪','12小猫咪', 'maas4','maas5', 'maas6','maas7', 'maas8', 'maas9', 'maas10', 'maas11','maas15', 'maas13', 'maas14', 'maas', '数据可视化系统', 'maas', 'maas', 'x1', 'maas','maas']
return JsonResponse({'data': {
'urlsData':{'name':'网页','urlsState':urlsState,'cities':cities},
}})
这样前端在判断的时候，如果某个url信息的长度为3，说明有错误信息
urlsState.forEach(key => {
if (key.length == 3) {
this.echartData.urls.info.push(key[2] + '\n')
}
})
至于vue怎么展示，src\components\check\check.vue有详细内容，已上传，地址见下面“源码下载和安装”
源码下载和安装
git clone https://gitee.com/sswfit/vue-morning-shift.git
cd vue-morning-shift
npm install --registry=https://registry.npm.taobao.org
npm run serve
git clone https://gitee.com/sswfit/morning_shift.git
cd morning_shift
pip install -r requirements.txt
python manage.py runserver localhost:8887
这是一个很好的例子：
-
前后端分离
-
动态更新
echarts数据 -
用到
DjangoRESTframework
更重要的是通过合并第1、2步，从检查到展示能一步到位，领导见了直夸有想法。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK