使用Echarts来实现数据可视化

自动化运维中,脚本化,工具化,平台化的过程中,有一个环节不可缺少,那就是可视化。

可视化这方面的开源产品还是相当的多,总体的方向都是借助于丰富的前端方案来联动,如今很大的特点是不光让数据显示出来,还让数据动起来。

Echarts这个方案从我接触到做出一个还算不错的图,也就不过几个小时的时间,其中至少60%的时间是花在数据的提取和嵌套环节。

Echarts的口碑很不错,听到一个中肯但是有比较损的话:Echarts是百度推出的最有良心的产品。总之Echarts的可视化效果做得很不错,能让数据可视化很快接入,立马高大上起来。

如果看Echarts的官网会发现现在是区分了2个版本,新的版本是2.0的,有了较大的变化。效果做了更多的处理。

假设每天存在着大量的备份任务,每天备份了多少,产生了多大备份集,备份花了多少时间,在这个基础上我又提了一个并行备份的概念,比如40个数据库从1:00开始备份,不管中间是如何调度的,如果是在5:00结束,那么就算并行备份时间是4个小时,而如果串行来算,可能备份的时间有10个小时,类似这样的道理。

如果有了这些数据和参考,那么我们做优化的时候方向就会更加明确。是接入更多的业务,减少备份的存储容量,还是降低并行备份的时长。有了数据,有了概览,这些都会了然于胸。

如何显示呢,我们在html中需要一个div来衬托。比如下面的div,我们可以根据id来在JS中绑定Echarts的代码。

 <div class="panel-body">
                            <div id="morris-area-chart" style="width:100%;height:400px"></div>
   </div>

如何和div关联起来,我们通过JS里面的document对象来定位。然后使用echarts的对象在这个基础上初始化,我们可以伪造一些数据。

<script type="text/javascript">
var myChart = echarts.init(document.getElementById('morris-area-chart'));
//alert(myChart)
var xAxisData = ['18-01-10','18-01-11','18-01-12','18-01-13','18-01-14','18-01-15','18-01-16'];
var data1 = [4030, 4020, 3600, 3750, 3900, 3740, 3760];
var data2 = [795,804,648,658,656,661,665];
option = {

    title: {
        text: '近期备份数据量统计'
    },
    legend: {
        data: ['日备份容量', '备份集个数'],
        align: 'left'
    },
    toolbox: {
        // y: 'bottom',
        feature: {
            magicType: {
                type: ['stack', 'tiled']
            },
            dataView: {},
            saveAsImage: {
                pixelRatio: 2
            }
        }
    },
    tooltip: {},
    xAxis: {
        data: xAxisData,
        silent: false,
        splitLine: {
            show: false
        }
    },
    yAxis: {
    },
    series: [{
        name: '日备份容量',
        type: 'bar',
        data: data1,
        animationDelay: function (idx) {
            return idx * 10;
        }
    }, {
        name: '备份集个数',
        type: 'bar',
        data: data2,
        animationDelay: function (idx) {
            return idx * 10 + 100;
        }
    }],
    animationEasing: 'elasticOut',
    animationDelayUpdate: function (idx) {
        return idx * 5;
    }
};
 myChart.setOption(option);
</scripts>

整体来看这个过程还好啊,也没多少代码,那是因为Echarts都帮我们做好了。我们来看看后端和前端是如何衔接的,也是做Echarts出图的难点吧。

从后端来说,我们通过Django API或者raw SQL来得到数据结果。

如果通过raw SQL方式来定制,则类似下面的步骤。

    cursor.execute(" xxxxxx")
    backup_size_all = dictfetchall(cursor)
    cursor.close()

其中cursor处理的结果默认是truple的,我们需要转换为字典,处理起来会更加方便,所以用了dictfecthall的方法。

def dictfetchall(cursor):
    desc = cursor.description
    return [
    dict(zip([col[0] for col in desc], row))
    for row in cursor.fetchall()
    ]

然后让response对象来返回到页面即可。

前端怎么去处理这个数据呢。这里面有个难点就是对于数据的方式。

比如查询结果有两列,比如为backup_date,backup_size,简单模拟一些数据。

backup_date    backup_size
18-01-15      200
18-01-16      300
18-01-17      350

查询出来的结果转换成字典之后,就是类似这样的形式:

(backup_date:18-01-15,backup_size:200),(backup_date:18-01-16,backup_size:300),(backup_date:18-01-17,backup_size:350)

如果在前端初始化的时候,结果就类似:

18-01-15,200,18-01-16,300,18-01-17,350这样的方式,简单来说就是数据是在一起的,在一个循环中统一处理的。怎么区别开来呢,在这个场景中,我们可以按照2位基数做奇偶校验。

但是问题来了,前端的标签不支持看起来简单的逻辑校验和检查。怎么在前端做奇偶校验呢。

有一个特殊的标签,forloop.counter|divisibleby:2,明白了这点之后,我们就可以选择性的初始化,按照我们的预期来把数据放到不同的地方。所以Echarts中需要的几个数组都可以通过这种方式来初始化。

var xAxisData=[
    {% for ds in backup_pieces_all %}
        {% for k,v in ds.items %}
            {%  if forloop.counter|divisibleby:2 == 1 %}
                '{{ v }}',
            {% endif %}
        {% endfor %}
{% endfor %}
];

所以对于其他的数组也是如法炮制。很快就能够搞定了。

看到原来冷冰冰的数据在这种分析中有了新的含义,心里面是亮堂的。

原文发布于微信公众号 - 杨建荣的学习笔记(jianrong-notes)

原文发表时间:2018-01-19

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏java工会

使用Github创建自己的小博客

10920
来自专栏Cloud Native - 产品级敏捷

Cloud-Native 微服务架构元素卡; 15 分钟内搞定微服务架构设计

Cloud-Native微服务架构设计不应该是一个讲求标准答案, 简单粗暴的设计过程。而应该是一个考量各方因素下的一个“决策的过程”。

569120
来自专栏SDNLAB

【双语频道】6分钟了解ONOS

本视频来自ONOS首席架构师Thomas Vachuska的讲解,视频在短短6分钟左右的时间内深入浅出的对ONOS的架构进行了阐述和分析,并对其功能进行了演示...

33740
来自专栏Python中文社区

雪球网沪深全站股票评论爬虫

專 欄 ❈ 蜗牛仔,Python中文社区专栏作者,怒学Python爬虫,争当爬虫工程师, github地址: https://github.com/xiaob...

83360
来自专栏大数据挖掘DT机器学习

R语言与Excel约架!谁更适合做数据分析?

这两款工具的使用方法截然不同。使用Excel时,可以通过鼠标点击完成大部分工作,你可以访问界面内不同位置的各种工具。因此Excel非常便于使用(熟能生巧),...

34340
来自专栏Android 技术栈

Android DeepLink介绍与使用

前段时间公司让调研一下DeepLink,说以后会用到,之前看了很久,并做了个demo,现整理一下,方便以后查阅,如果有幸帮助到其他人就更好了。

60760
来自专栏FreeBuf

借你一双慧眼,鸟瞰二进制世界的秘密

由于Java世界的特性所致,安卓应用在代码自身保护方面一直乏善可陈。所谓的Java混淆等技术,也不过是一层簿簿的面纱,极易被撕开,毫无秘密可言。所以,当前也没有...

17800
来自专栏PPV课数据科学社区

大规模爬虫流程总结

爬虫是一个比较容易上手的技术,也许花5分钟看一篇文档就能爬取单个网页上的数据。但对于大规模爬虫,完全就是另一回事,并不是1*n这么简单,还会衍生出许多别的问题。...

395110
来自专栏Zchannel

核武按钮终被劫持?Meltdown与Spectre攻击深入解析

18120
来自专栏圣杰的专栏

性能优化知多少

1. 引言 最近一段时间,系统新版本要发布,在beta客户测试期间,暴露了很多问题,除了一些业务和异常问题外,其他都集中在性能上。有幸接触到这些性能调优的机会,...

22990

扫码关注云+社区

领取腾讯云代金券