Echarts中怎么实现数据可视化-成都快上网建站

Echarts中怎么实现数据可视化

这期内容当中小编将会给大家带来有关Echarts中怎么实现数据可视化,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

成都创新互联公司于2013年成立,先为金溪等服务建站,金溪等地企业,进行企业商务咨询服务。为金溪企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

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

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

Echarts中怎么实现数据可视化

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

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

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

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

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

< type="text/java">

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);

整体来看这个过程还好啊,也没多少代码,那是因为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.deion

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 %}

];

上述就是小编为大家分享的Echarts中怎么实现数据可视化了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注创新互联行业资讯频道。


分享文章:Echarts中怎么实现数据可视化
标题网址:http://kswjz.com/article/pggiig.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流