>>《ECharts数据可视化：入门、实战与进阶》是一本由 ECharts 官方推荐，系统全面、由浅入深、注重实操，带领读者快速重新人到高手的书籍。欢迎参与文末赠书活动 。css
在咱们生活和工做中，常常会看到可视化大屏，主要用于展现一些汇总信息，那如何制做一个酷炫的可视化大屏呢？html
今天带你们看个github上的案例。git
项目地址：https://github.com/yyhsong/iDataV/tree/master/case09github
效果以下：ajax
能够看到，这是一个名为“上市公司全景概览”的可视化大屏，展现内容包含了上市公司地域分布、行业分布、股票状况及预测、市值排行、上市公司数等。展现形式包含环形图、双轴图（柱状图+折线图）、地图、条形图、数值。json
接下来，咱们从代码结构拆解一下这个案例。echarts
首先，经过下图能够看出该项目由5部分组成。学习
分别是css、data、img、js和html，其中css是设置一些样式、data是数据来源，打开后能够看到是json格式数据，以下图所示。ui
Img中是一些图，咱们能够看到，其中有背景图，也有一些展现的符号图，以下图所示。url
大屏的header部分：
大屏的背景：
还有一些图标符号等：
Js文件夹中包含着一些使用到的js文件，以下图所示。
以上文件夹的内容经过html调用，打开这个index.html，这是一个典型的html：
经过<script> 标签加载js文件：
Img中的图片经过img标签加载：
<img src="img/icon-01.png" />
Data中的json数据经过ajax方式加载：
可视化的部分经过ECharts实现，例如：
先初始化：
echarts.init(document.getElementById("mapChart"), "shine");
而后写个option：
const mapChartOpt = {...}
最后setoption：
mapChart.setOption(mapChartOpt);
若是要从零开始学习大屏可视化细节的制做，推荐阅读王大伟老师新书《ECharts数据可视化：入门、实战与进阶》中第7章 ECharts不一样场景Dashboard制做案例。
近些年，大屏数据可视化十分流行，在各行业普遍应用。3月7日19点-20点，王大伟将作客华章直播间，带你们从零开始用ECharts搭建一个电商行业的数据可视化大屏，该方法可复用到其余行业。欢迎扫码观看直播。
点击图片观看直播
【赠书福利】
识别下方二维码，关注公众号"OSC 开源社区"，聊天窗口回复“抽奖”二字便可参与（邀请好友助力可提升中奖几率），咱们将从参与者中随机挑取 5 名幸运读者，分别包邮赠送一本由机械工业出版社华章公司赞助的《ECharts 数据可视化：入门、实战与进阶》。活动截止到 3 月 8 日 10：00 整，快来参与吧~