世界杯ing～这不来个实时数据可视化？（结尾附源码）

一、场景介绍

世界杯赛程已经过半，目前的比分以及各球员的数据都可以比较容易的查询到，但是还不够直观。因此忙里偷闲，写一点小玩意儿，将动态获取的数据以各类图表的方式展现。

1. 概念介绍

• 实时数据

这个词一般出现在实时计算中，指的是数据会源源不断的输入进来。其实我们目前所需的数据源也是在不断的变化，只是变化的频率很慢，所以我们可以把其当成一个普通的数据接口使用就可以了。

由于整体的场景与实时数据统计的场景很相似，因此借用了实时数据这个词，意思是数据是动态获取的，可以随时根据最新的数据渲染图表。

• 数据可视化

数据可视化其实是一种描述性分析，最基本的数据查看方式就是以表格的形式，显然不利于对比，也不能反映数据的变化趋势，在分析方面表现力很弱。

如果使用图表的方式来呈现，就可以通过不同数据维度的组合，不同图表类型的展现、联动、下钻来反映数据之间的关系以及自身趋势的变化，这在各类应用中是十分常见的。

2. 最终效果

• 世界杯积分榜

• 世界杯射手榜

• 世界杯助攻榜

二、数据源获取

首先需要做的就是获取一个稳定的数据来源，以能够公开免费访问的为例，当然也可以直接购买体育数据平台的资源。

1. 数据来源

以网易体育为例：https://sports.163.com/worldcup2022/

• 点击数据下的射手榜：

• 打开浏览器控制台

• 保持控制台开启，刷新页面

• 点击JS选项卡进行筛选【有时也可能为json】
• 逐一查看左侧接口的返回数据【点击响应选项卡】
• 以射手榜数据为例，则player为所需

• 找到所需要的数据接口后就可以使用其它工具协助开发，如Postman

• 接口地址：https://gw.m.163.com/base/worldCup/qatar/player
• 请求方式：GET

2. 数据结构

确定了数据源之后我们接下来要将所需要的数据维度整理出来，可以方便在开发时进行对照，比对方式也十分简单，直接通过数据在页面上出现的效果就可以找到对应，如：

3. 数据获取

明确了数据源接口之后，我们只需要想办法将数据在代码中能够获取到，放在一个变量中准备进行解析和使用，可以直接使用jQuery封装的Ajax。

在获取数据时需要注意，因为我们的最终目标是将数据以图表的方式展现，所以在获取数据时应该以同步的方式，默认Ajax是异步的方式，案例代码如下：

• get_data.js

// 定义全局变量
var data = [];
function get_data() {
  // 关闭异步，设置为同步请求
  $.ajaxSetup({
    async: false
  });
  // 以JSON数据格式获取数据
  $.getJSON("https://gw.m.163.com/base/worldCup/qatar/player", function(resp) {
    data = resp.data.items;
    console.log(data);
  });
}

• index.html

需要将jQuery库文件优先引入，下载地址：https://code.jquery.com/jquery-3.6.1.min.js

<script type="text/javascript" src="js/jquery-3.6.1.min.js"></script>
<script type="text/javascript" src="js/get_data.js"></script>
<script type="text/javascript">
        get_data();
</script>

• 运行结果

现在我们需要的数据已经存放在了json数组中，后面根据图表类型整理成对应的数据结构就可以使用了。

三、可视化图表

在Web前端实现可视化图表有很多开源免费的组件，只需要简单的配置就可以达到比较精美的效果，本文以Echarts为例。

1. Echarts

• 官网：https://echarts.apache.org/zh/index.html
• 下载地址：https://raw.githubusercontent.com/apache/echarts/5.4.1/dist/echarts.js
• 示例地址：https://echarts.apache.org/examples/zh/index.html

Echarts是一个可以快速入门的前端可视化组件，支持千万级的数据渲染展示，官方文档齐全，支持全中文，大家感兴趣可以自己深入学习一下。如果我们现在想要快速做出一个效果图，只需要从示例中选择一个效果相似的，修改一下数据就可以马上在自己的代码中实现了。

2. 官方案例

• 选择一个示例模板：以简单柱状图为例

• 代码实时编辑预览

• 复制完整代码

• 本地实现

使用代码时，只需要在html页面定义一个id为main的div元素即可，效果如下：

对从示例获得的代码进行简单修改【bar.js】：

// 纯HTML项目中只需要引入echarts.js文件即可成功初始化echarts对象
//var echarts = require('echarts');
$(function(){
  var chartDom = document.getElementById('main');
  var myChart = echarts.init(chartDom);
  var option;
  option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
      }
    ]
  };
  option && myChart.setOption(option);
});

3. 进球统计

现在我们只需要将获取到的数据整理成图表需要的数据格式就可以看到我们想要的效果了，目前我们需要填充好两个一维数组：xAxis下的data作为横轴数据，yAxis下的data作为纵轴数据。可以将前五名的球员名称作为横轴数据，进球数量作为纵轴数据，整理后如下：

$(function(){
  var chartDom = document.getElementById('main');
  var myChart = echarts.init(chartDom);
  // 定义x轴数据
  var xData = [];
  // 定义y轴数据
  var yData = [];
  // 数据构建
  for(var i = 0;i < 5;i++){
    xData.push(data[i].player);
    yData.push(data[i].goals);
  }
  var option;
  option = {
    xAxis: {
      type: 'category',
      data: xData// 替换为动态数据
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: yData,// 替换为动态数据
        type: 'bar'
      }
    ]
  };
  option && myChart.setOption(option);
});

四、案例源码

案例中使用了世界杯积分榜、世界杯射手榜、世界杯助攻榜三种数据源，包含柱状图、饼形图、散点图等类型，大家可以在此基础之上继续发挥，如：将各个国家的数据分组统计到一起，再以图表的方式呈现，只需要修改数据构建部分的代码即可。

• RealtimeData-WorldCup