echarts
官网有很多好看的图例,怎么结合起来放到自己的项目中呢?比如这种酷酷的首页:
看起来美观又大方,自己能用上就好了。其实是可以的,echarts
上有现成的图例和示例代码,咱们只要改改数据源就可以了,至于好看的布局,比如上图这种,我们直接借鉴过来不就可以了🐎。
以公司网页为例,简单介绍一个例子,下图这么多网址的巡检如何用一个图例来展示。
可以把它们写到文件里:
先创建一个文件,比如叫config.cfg
1 |
|
安装configparser模块
1 |
|
读取这些网址
1 |
|
结果如下:
[('优酷', 'http://www.youku.com/'), ('错误网址', 'http://www.111.cn/')]
echarts官网找图
接下来,怎么展示网站的状态码是否为200
呢?
echarts
上找了一下,看到一个“极坐标柱状图
”,很适合这种判断True or False
的场景,
比如网页状态码是否为200
,是返回1
,否返回0
,然后将echarts
的数据源替换成我们的就是这种效果:
数值为1
(代表正常)的条目会显示蓝条,0
为异常则用红色文字打印出来,整体巡检效果如下:
检查url
requests
模块判断状态码是否为200
1 |
|
把config.cfg
读到的网址,利用check_url
函数检查完放到一个列表中
1 |
|
结果如下:
1 |
|
把这些信息返回给前端
1 |
|
这样前端在判断的时候,如果某个url
信息的长度为3
,说明有错误信息
1 |
|
至于vue
怎么展示,src\components\check\check.vue
有详细内容,已上传,地址见下面“源码下载和安装”
源码下载和安装
前端
1 |
|
后端
1 |
|
小结
这是一个很好的例子:
-
前后端分离
-
动态更新
echarts
数据 -
用到
DjangoRESTframework
更重要的是通过合并第1、2步,从检查到展示能一步到位,领导见了直夸有想法。