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.自由选择修改一下字体颜色、背景图片等等
我就是我
谁践踏了优雅
「爱情、让人受尽委屈。」
怼烎@
傷城~
ゞ 浴缸里的玫瑰
还没有评论，来说两句吧...