在之前的一篇文章通过xpath和beautifulsoup爬取游戏币实时价格

给大家分享了价格数据的获取，今天给大家讲解下数据的展现，依旧是django做框架，图表插件是Echarts，另外价格数据是存放在Mysql里的。

准备

django是默认支持mysql的，但是如果你在执行migrate这个命令的时候出错，那请先安装PyMySql:

pip install PyMySQL

并且在项目的__init__.py文件里加上：

import pymysqlpymysql.install_as_MySQLdb()

接着你去需要去Ecahrts的官网下载js包并选择使用的模板，这里我选了股市的K线图作为基础：

在了解一些Echarts基本配置参数后就可以开始了。

1.路由

urlpatterns = [
path('<int:id>/', views.detail, name='detail'),
]

使用区服ID对不同的页面进行区分，页面方法指向views的detail这个方法

2.模型

class price(models.Model):
id= models.IntegerField(primary_key=True)
serverid = models.IntegerField()
servername = models.CharField(max_length=20)
price=models.DecimalField( max_digits=5, decimal_places=2)
time=models.DateTimeField()
date=models.DateField()

从上到下依次是自增PK，服务器ID（即1中提到的区服ID），服务器名，价格，时间，日期。顺便提一下，本文中的数据采集频率是一小时一次。

3.Views

在给大家看代码之前需要先讲解下一些概念

模板：我们可以直接在使用HttpResponse?将内容返回给浏览器，但是显然这样不利于前端的开发。所以使用了模板来进行渲染后返回给客户端。首先需要在应用目录下建立一个templates的文件夹，django会自动从这里面查找模板。

数据库映射：一般来说用django开发都是先建立好model然后通过命令将model生成表到数据库中，但这次我先建好了表，再进行映射。

def detail(request,id):
latest_price_list = price.objects.filter(serverid=id).order_by('time')
datas = serializers.serialize("json", latest_price_list)
context = {'latest_price_list': latest_price_list,'datas':datas}
return render(request, 'dnf/detail.html', context)

第一句price.objects就是django自带的隐射，后面的filter和order_by就是筛选，有点类似c#的linq，如果想要熟练获取需要的数据，你还得多了解它的语法。在获取到一个区服的价格列表后，通过serializers的serialize对list进行序列化，再把包装成一个字典交给render方法，到此为止后端就算好了。

4.模板

模板这里主要就是Echarts的方法调用了，不再赘述。

需要提一下的是开头的load static是用来加载静态文件的。

还有就是这个datas| safe 是用于序列化数据的声明，也是容易遗落出错的地方。

{% load static %}
<script src="{% static 'dnf/echarts.js' %}" type="text/javascript"></script>
<script src="http://mat1.gtimg.com/libs/jquery/1.12.0/jquery.js"></script> {% if latest_price_list%}

<div id="container" style="height: 100%"></div>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
var upColor = '#ec0000';
var upBorderColor = '#8A0000';
var downColor = '#00da3c';
var downBorderColor = '#008F28';
var data = new Array();
var datas = {{ datas| safe }};
for (var i = 0; i < datas.length; i++) {
data[i] = [
echarts.format.formatTime('yyyy-MM-dd\nhh:mm:ss', datas[i].fields.time.replace('T',' ').replace('Z','')),
+parseFloat(datas[i].fields.price).toFixed(2), // open
+parseFloat(datas[i].fields.price).toFixed(2), // highest
+parseFloat(datas[i].fields.price).toFixed(2), // lowest
+parseFloat(datas[i].fields.price).toFixed(2), // close
12220,
1 // sign
];
}

var option = {
dataset: {
source: data
},
title: {
text: datas[0].fields.servername,
subtext: '数据量: ' + echarts.format.addCommas(data.length)+'条'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line'
}
},
grid: [
{
left: '10%',
right: '10%',
bottom: 100
}
],
xAxis: [
{
type: 'category',
scale: true,
boundaryGap: false,
// inverse: true,
axisLine: { onZero: false },
splitLine: { show: false },
splitNumber: 20,
min: 'dataMin',
max: 'dataMax'
}
],
yAxis: [
{
scale: true,
splitArea: {
show: true
}
}
],
dataZoom: [
{
type: 'inside',
start: 10,
end: 100
},
{
show: true,
type: 'slider',
bottom: 10,
start: 10,
end: 100,
handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
handleSize: '105%'
}
],
series: [
{
type: 'line',
itemStyle: {
color: upColor,
color0: downColor,
borderColor: upBorderColor,
borderColor0: downBorderColor
},
encode: {
x: 0,
y: [1, 4, 3, 2]
}
}
]
};

if (option && typeof option === "object") {
myChart.setOption(option, true);
}

</script>

附上最终效果图

有些异常的数据是因为服务器在早晚刚开始的时候会有一些特殊的交易，在实际过程中可以将这些数据剔除，曲线图将会更加流畅。

版权所属，如需转载，请注明出处：搜闲鱼