漂亮!将echarts加入到你的项目中!

echarts官网有很多好看的图例,怎么结合起来放到自己的项目中呢?比如这种酷酷的首页:

看起来美观又大方,自己能用上就好了。其实是可以的,echarts上有现成的图例和示例代码,咱们只要改改数据源就可以了,至于好看的布局,比如上图这种,我们直接借鉴过来不就可以了🐎。

以公司网页为例,简单介绍一个例子,下图这么多网址的巡检如何用一个图例来展示。

可以把它们写到文件里:

先创建一个文件,比如叫config.cfg

1
2
3
[url]
优酷 = http://www.youku.com/
错误网址 = http://www.111.cn/

安装configparser模块

1
pip install configparser

读取这些网址

1
2
3
4
5
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

1
2
3
4
5
6
7
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函数检查完放到一个列表中

1
2
3
4
5
6
7
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'])

结果如下:

1
2
3
4
5
6
[
 [0, 1],
 [1, 1, '优酷 ConnectTimeout'],
 [0, 1],
 [1, 1, '错误网址 ConnectTimeout']
]

把这些信息返回给前端

1
2
3
4
5
6
7
8
9
10
11
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,说明有错误信息

1
2
3
4
5
urlsState.forEach(key => {
    if (key.length == 3) {
    this.echartData.urls.info.push(key[2] + '\n')
    }
})

至于vue怎么展示,src\components\check\check.vue有详细内容,已上传,地址见下面“源码下载和安装”

源码下载和安装

前端

1
2
3
4
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

后端

1
2
3
4
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步,从检查到展示能一步到位,领导见了直夸有想法。

Python Geek Tech wechat
欢迎订阅 Python 技术,这里分享关于 Python 的一切。