应对现在数据可视化的趋势，越来越多企业需要在很多场景下使用可视化图表来展示体现数据，让数据更加直观，数据特点更加突出
目前，数据可视化JS库也有很多，比如 echarts、d3.js 等等。
本项目使用的是 echarts 库实现的，效果如下：
- 领略 数据可视化 的魅力（小白）
- 掌握echarts图表的基本使用（稍有基础）
- 配置适合项目需求的图表（稍有基础）
- 掌握基本的数据处理方法（有一定基础）
- axios库的基本使用（稍有基础）
- HTML/CSS/JS基本语法
- echarts制作图表基本步骤
- 配置echarts图表
- Ajax获取真实数据
- 将数据应用到图表中展示
项目中用到的资料，老师已经放到百度网盘了。
资料下载地址及密码：
- 链接：百度网盘 请输入提取码
- 提取码：ze49
- 将 下载的 资料（GDP文件夹） 使用vscode或其他代码编辑器打开
- 查看官方 文档 > 使用手册 ，根据这个手册，可以学到，使用echarts大概分为4个步骤
-
- 创建一个具有宽高的盒子
- 初始化 echarts
- 设置配置项
- 生成图表
具体做法，创建 demo.html ，代码如下：
- 将body设置为全屏的
- div的高度设为 100%
实际开发中，有各不相同的需求和业务场景，官方给出的示例往往并不能满足项目需求，只能作为一个参考。
如果需要得到一个符合项目需求的图表，则需要自己修改配置项，对图表进行配置。
配置 echarts 图表，则需要查看 echarts 的 配置项手册 以及参考 echarts的 使用手册。
下面，简单的对图表进行一下配置，需求如下：
- 图表的标题，要求标题字体微软雅黑、字体大小40，橙色，左右居中，距离顶部30像素。
- 调整网格（图表区域），距离顶部 80px、距离右侧 180px
- 去掉图例（legend）和输入移入提示（tooltip）
参考 动态排序柱状图 文档，将动态排序柱状图基本的配置加好。
修改 xAxis 、yAxis 和 series，完整的配置如下：
将上述代码中的 41、42行的时间修改为 1000 毫秒，否则太慢了。
注意，修改 series 中的 data，随便修改为一个数组，参考上面的代码
完成后效果如下：
图表中使用的真实数据结构如下：
如何将这些数据展示在图表中呢？
- 去掉 yAxis 中的 data
- 将 series 系列中的 data 换成 上述数据
- 在 series 系列中，通过 encode 来指定 X 轴 和 Y 轴分别使用哪一列数据
- 将 yAxis 中的 max 修改为 9，表示只显示 10 个国家
这步搞定后，顺便将 yAxis 中的 max 修改为 9，表示只显示 10 个国家：
yAxis: {
type: 'category',
- // data: ['A', 'B', 'C', 'D', 'E'],
inverse: true,
animationDuration: 300,
animationDurationUpdate: 300,
+ max: 9 // 这里的 9 表示只显示 10 个国家
},
完成后效果：
让数据动起来的原理很简单，只要间隔一段时间，修改 series 中的数据即可。
比如间隔 1s ，随机改变一下 series 中的 GDP 数据，来测试一下
完成后的效果如下：
已经准备了每个国家使用的颜色（可以自行修改）。
存储颜色的文件是 文件夹中的
所以，首先在 demo.html 中加载这个js文件：
<script src="https://blog.csdn.net/itcast_cn/article/details/js/colors.js"></script>
设置柱子的颜色，需要用到 series 系列中的 配置项：
完成后，每个国家的柱子将会有自己的颜色，效果如下（截图软件原因，效果不是很好）：
使用自定义label标签的方式，设置国旗。
还是在 series 系列中，修改原有的
完成后，所有国家都使用的 中国国旗。
如何为每个国家设置自己的国旗呢？
我们从上面的代码中发现规律，只要 和 rich 中的 名字一样即可设置图片，所以可以动态的设置这个名字，全部使用国家名（不能用中文的，只能用英文的）
继续修改上面的代码：
上述代码中的 rich 变量，来自于 文件夹的 ，所以导入它
完成后效果如下：
目前使用的都是测试数据。
真实数据来源于网络（世界银行），经过老师整理后，形成 data.json （）
这些数据怎么用呢？答案是通过Ajax请求得到。所以：
- 导入 axios 库
- 发送请求，获取这些数据
得到如下结构的数据（和我们开始模拟的数据，结构是一样的，只不过这里的数据是从1960~2020年的全部数据）
- 加载得到全部的年（其实自己通过js方法计算也可以，不过为了方便，已经准备好这些年份的数据了）
- 将前面那个 放到 方法内部，并修改数据真真实的数据
这步完成，基本就可以达到最终效果了（数据变化60次，最终显示2020年的真实数据）。这里不再截图
可以稍微补充一下，比如去掉 xAxis 轴，去掉 yAxis 的轴线和刻度，图表右下角加入年。
- 去掉 xAxis 轴
- 去掉 yAxis 的轴线和刻度
- 图表右下角加入年（参考这个官方示例）
然后定时器中，修改这个年