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.自由选择修改一下字体颜色、背景图片等等

ECharts项目实战：全球GDP数据可视化相关推荐

vue全家桶+Echarts+百度地图，搭建数据可视化系统（项目）
vue全家桶+Echarts+百度地图,搭建数据可视化系统 1. 前言 1.1 业务场景突然接到产品说要做一个数据监控的系统.有线图.柱状图.地图,类似于数据可视化的方式. 本人之前从未接触过Ech ...
周获 4700 Star 全球疫情数据可视化系统，超轻量级中文 OCR……GitHub 一周热点速览...
作者 | HelloGitHub-小鱼干来源 | HelloGitHub 摘要:连着两周成绩平平的 GitHub Trending 榜,终于和三月的天气一样进入全面变暖的模式,无论是本周刚开源搭乘 ...
比echarts还好用的数据可视化软件
一.数据可视化顾名思义,数据可视化就是将数据转换成图或表等,以一种更直观的方式展现和呈现数据,让读者能"一眼看懂"你想表达的信息.通过"可视化"的方式,复杂的 ...
视频教程-全新大数据企业电商数据仓库项目实战教程-大数据
全新大数据企业电商数据仓库项目实战教程张长志技术全才.擅长领域:区块链.大数据.Java等.10余年软件研发及企业培训经验,曾为多家大型企业提供企业内训如中石化,中国联通,中国移动等知名企业.拥有丰 ...
【PBL项目实战】户外智慧农场项目实战系列——3.云端可视化页面开发及设备数据源的配置与调试
[PBL项目实战]户外智慧农场项目实战系列--3.云端可视化页面开发及设备数据源的配置与调试原文链接 https://mp.weixin.qq.com/s/5OT57-_QlN7lwRMWvey4 ...
全球新闻数据可视化(2)--php连接数据库与数据可视化
上次文章主要介绍了全球新闻数据的下载,以及一些基本的利用python进行处理操作,本次介绍相关数据的查询和可视化操作. (7条消息) 全球新闻数据可视化(1)--数据下载与处理_小汤爱学习的博客-CS ...
相较于echarts，也许这款数据可视化软件更加适合你
echarts作为一款开源数据可视化工具有着许多优点,但是如果你在使用echarts时经常遇到问题,那么相较于echarts,选择一款专业的数据可视化软件也许更符合你的需求. 今天就将为你介绍一款神奇 ...
毕设IDEA2019之ssm+Echarts框架快速入门实现数据可视化（图表统计）
当后台管理系统有一定的数据量后,我们可能需要对这些数据进行统计.分析,提炼出更多有用的信息,而为了使这些冰冷的数据显得更平易近人,更直观的传达信息,我们可以使用图表来将数据表达出来,实现数据可视化.E ...
flutter 项目实战四列表数据展示
本项目借用逛丢网站的部分数据,仅作为 flutter 开发学习之用. 逛丢官方网址:https://guangdiu.com/ flutter windows开发环境设置 flutter 项目实战 ...

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

ECharts项目实战：全球GDP数据可视化相关推荐

最新文章

热门文章