ECharts项目实战：全球GDP数据可视化

【课程简介】

可视化是前端里一个几乎可以不用写网页，但又发展得非常好的方向。在互联网产品里，无论是C端中常见的双十一购物节可视化大屏，还是B端的企业中后台管理系统都离不开可视化。国家大力推动的智慧城市、智慧社区中也有很多可视化的应用。当下企业需要在很多场景下使用可视化图表来展示体现数据，比如营销数据，生产数据，用户数据，使用图形展示数据，可以让数据更加直观，数据特点更加突出。市场上对懂可视化的人才需求是越来越大，但是真正懂得的人并不多，本次课程将通过一个将全球GDP数据动态排名的案例，带大家体验ECharts数据可视化的魅力，增加前端工程师的竞争力。

【主讲内容】

1.ECharts制作图表+基本数据处理方法

2.如何配置图表与Ajax获取真实数据

3.应用案例：实现全球GDP数据动态排名

【教程推荐】ECharts项目实战：全球GDP数据可视化

项目中用到的资料，老师已经放到百度网盘了。

资料下载地址及密码：链接：https://pan.baidu.com/s/1L22giISr-TIFgPRYUZ-qJA  提取码：ze49

echarts基本使用

5分钟上手echarts

1.将 下载的 资料（GDP文件夹） 使用 vscode 或其他代码编辑器打开

2.查看官方 文档 > 使用手册 ，根据这个手册，可以学到，使用echarts大概分为4个步骤

1.创建一个具有宽高的盒子

2.初始化 echarts

3.设置配置项

4.生成图表

适当增加样式

1、将body设置为全屏的

2、div的高度设为 100%

3、设置一个背景图片（选配）

如何配置echarts图表

1、参考官方教程

2、参考官方配置项手册

案例中小试牛刀

1、图表的标题，要求标题字体微软雅黑、字体大小40，橙色，左右居中，距离顶部30像素。

2、调整网格（图表区域），距离顶部 80px、距离右侧 180px、

3、去掉图例（legend）和输入移入提示（tooltip）

动态排序柱状图基本配置

参考 动态排序柱状图 文档，将动态排序柱状图基本的配置加好。

主要是修改

xAxis （X轴配置）

yAxis （Y轴配置）

series （系列数据配置）

模拟GDP数据

 将这些数据展示在图表中

1.去掉 yAxis 中的 data

2.将 series 系列中的 data 换成 上述数据

3.在 series 系列中，通过 encode 来指定 X 轴 和 Y 轴分别使用哪一列数据

4.将 yAxis 中的 max 修改为 9，表示只显示 10 个国家

让数据动起来

1.让数据动起来的原理很简单，只需要利用定时器，间隔一段时间，修改 series 中的数据即可。

2.比如间隔 1s ，随机改变一下 series 中的 GDP 数据，来测试一下

设置柱子的背景色

通过series中的 itemStyle 可以设置每一个柱子的颜色，语法如下：

 设置国旗

案例中，适合使用label来设置，label配置项的具体语法是：

 Ajax获取真实数据

1.真实数据来源于世界银行。

2.老师已经把数据下载，整理好，就是代码文件夹中的 data.json

3.通过 axios 库，将数据取出来，代码参见 这里。

将真实数据应用到图表中

这里只需要将前面那个 for 循环放到 then 方法内部，并修改数据为真实的数据即可，代码参考这里。

其他补充

1.去掉 xAxis 轴

2.去掉 yAxis 的轴线和刻度

3.图表右下角加入年（参考这个官方示例）

4.自由选择修改一下字体颜色、背景图片等等