echarts统计图详解（使用Echarts来实现数据可视化）
echarts统计图详解（使用Echarts来实现数据可视化）<div class="panel-body">如何显示呢，我们在html中需要一个div来衬托。比如下面的div 我们可以根据id来在JS中绑定Echarts的代码。如果看Echarts的官网会发现现在是区分了2个版本，新的版本是2.0的，有了较大的变化。效果做了更多的处理。假设每天存在着大量的备份任务，每天备份了多少，产生了多大备份集，备份花了多少时间，在这个基础上我又提了一个并行备份的概念，比如40个数据库从1:00开始备份，不管中间是如何调度的，如果是在5:00结束，那么就算并行备份时间是4个小时，而如果串行来算，可能备份的时间有10个小时，类似这样的道理。如果有了这些数据和参考，那么我们做优化的时候方向就会更加明确。是接入更多的业务，减少备份的存储容量，还是降低并行备份的时长。有了数据，有了概览，这些都会了然于胸。
自动化运维中，脚本化，工具化，平台化的过程中，有一个环节不可缺少，那就是可视化。
可视化这方面的开源产品还是相当的多，总体的方向都是借助于丰富的前端方案来联动，如今很大的特点是不光让数据显示出来，还让数据动起来。
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 %}
];
所以对于其他的数组也是如法炮制。很快就能够搞定了。
看到原来冷冰冰的数据在这种分析中有了新的含义，心里面是亮堂的。
