【文末送书】手把手教你如何制作可视化大屏!
>>《ECharts数据可视化:入门、实战与进阶》是一本由 ECharts 官方推荐,系统全面、由浅入深、注重实操,带领读者快速从新人到高手的书籍。欢迎参与文末赠书活动 。 在我们生活和工作中,经常会看到可视化大屏,主要用于展示一些汇总信息,那如何制作一个酷炫的可视化大屏呢? 今天带大家看个github上的案例。 项目地址:https://github.com/yyhsong/iDataV/tree/master/case09 效果如下: 可以看到,这是一个名为“上市公司全景概览”的可视化大屏,展示内容包含了上市公司地域分布、行业分布、股票情况及预测、市值排行、上市公司数等。展示形式包含环形图、双轴图(柱状图+折线图)、地图、条形图、数值。 接下来,我们从代码结构拆解一下这个案例。 首先,通过下图可以看出该项目由5部分组成。 分别是css、data、img、js和html,其中css是设置一些样式、data是数据来源,打开后可以看到是json格式数据,如下图所示。 Img中是一些图,我们可以看到,其中有背景图,也有一些展示的符号图,如下图所示。 大屏的header部分: 大...
