基于ECharts图表分析腾讯新闻疫苗接种情况（中国、全球）

1.前言

该部分功能实现在写者的毕业设计中。和之前的博客一样，因为篇幅原因部分代码不能写入论文中，故使用博客记录代码和设计过程。该部分代码的实现参考了ECharts官网和腾讯新闻疫情网站。
链接：ECharts官网
腾讯新闻疫情疫苗信息

2.效果图实现展示

借用ECharts的饼图和象形柱图来设计两个图表。设计的效果图如下：

这两个图表的初始源代码都可以在ECharts官网的实例中找到，左边的是饼图类型，右边的是象形柱图，写者改变了数据的注入方式，并通过爬虫将数据在线注入。下面将会解释如何实现。

3.实现

本章节重点讲实现原理和设计步骤，代码将会贴在第四节中。
3.1 数据爬取
数据需要腾讯新闻疫情网页的接口，网址链接：腾讯疫情
在该网页上点击F12查看源码，刷新页面， 在All列表里面即可查看该网站的所有数据接口，找到疫苗信息的数据接口。如下图：

我们需要写Ajax请求，将该对应的数据爬取，然后调用写好的ECharts方法，ECharts方法中的数据换成爬取的数据即可。
3.2 ECharts图表设计
ECharts图表支持我们先搭好一个架子，填入一些测试数据，然后再注入自己的数据，我们可以先在编辑器里面加入ECharts代码，生成图表后在考虑如何使用代码自动注入数据。
本案例使用的图表是饼图+象形柱图。饼图非常简单，此处不再介绍。象形柱图，写者也是第一次使用，其实就是柱状图换成自己想要的形状，这种图表方式还是比较新颖的。以下是ECharts官网的部分象形柱状图案例：

本案例使用的正是左下角的象形柱状图。分别代表中国和全球的每百人接种率。
考虑到数据接口的数据分别是中国和全球的疫苗接种剂次和其每百人的接种率。所以前者使用的是饼状图，中国和海外疫苗接种剂次一起分析。而每百人的接种率，接口传递的就是俩个数据，例如中国52.03、 全球30.25等，我们直接在初始代码上修改即可。
注意，在ECharts代码中的legend和tooltip选项中根据需要修改。其中，data数据是映射图表的选项，一般以键值对描述。name应该参考图例（没有图例的话可以不用硬设），value就是我们需要注入的值（本案例就是单个的值，所以直接这里替换，如果是数据集的话，需要用dataset，官网有详细介绍）。

3.3 使用工具
该案例基本属于前端内容，可以在各种前端编辑器中编写（Html5+js）。写者在idea中管理编写。
需要引入ECharts、Jquery的插件，这两者在官网都能下载，在头文件中引入即可。

4.代码

4.1 引入插件
写者在ECharts官网上下的相关js文件，引入其一（下面代码的必须引入）即可，在webjar上下载的Jquery插件（要使用Ajax，所以需要引入）

<script src="js/echarts.js"></script>
    <script src="webjars/jquery/3.6.0/jquery.min.js"></script>
    <script src="webjars/jquery/3.6.0/jquery.js"></script>

4.2 具体代码
写者使用了BootStrap的样式，读者可以自行修改div框内的class样式。

<div class="center col-lg-12" style="width: 1300px;height:500px;position:relative;">
    <div style="left: 0"><span style="color: black;font-weight: bolder;font-size: 30px;">疫苗接种信息</span></div>

    <div style="width: 500px;height: 350px;top:10px;float: left" id="vaccinationsMain01" ></div>

    <div style="width: 600px;height: 350px;top:10px;float: right" id="vaccinationsMain02"></div>
    <table  bgcolor="#F1F8F4" width="150px" >
      <thead>
      <tr>
        <th style="text-align: center">
          全球累计接种
        </th>
      </tr>
      </thead>
      <tbody>