手把手教你如何制作可视化大屏！-技术圈

手把手教你如何制作可视化大屏！

共 3404字，需浏览 7分钟

· 2021-03-15

导读：在我们生活和工作中，经常会看到可视化大屏，主要用于展示一些汇总信息，那如何制作一个酷炫的可视化大屏呢？

作者：王大伟

来源：华章计算机（ID：hzbook_jsj）

今天带大家看个github上的案例。

项目地址：

https://github.com/yyhsong/iDataV/tree/master/case09

可以看到，这是一个名为“上市公司全景概览”的可视化大屏，展示内容包含了上市公司地域分布、行业分布、股票情况及预测、市值排行、上市公司数等。展示形式包含环形图、双轴图（柱状图+折线图）、地图、条形图、数值。

接下来，我们从代码结构拆解一下这个案例。

首先，通过下图可以看出该项目由5部分组成。

分别是css、data、img、js和html，其中css是设置一些样式、data是数据来源，打开后可以看到是json格式数据，如下图所示。

Img中是一些图，我们可以看到，其中有背景图，也有一些展示的符号图，如下图所示。

大屏的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、Python、自然语言处理、数据分析挖掘、机器学习。曾获微软最有价值专家（MVP）荣誉称号。

本文摘编自《ECharts数据可视化：入门、实战与进阶》，经出版方授权发布。

延伸阅读《ECharts数据可视化》

长按上方二维码了解及购买

转载请联系微信：DoctorData

推荐语：ECharts官方推荐，系统全面、由浅入深、注重实操，带领读者快速从新人到高手。

看看作者怎么说

👇

干货直达👇

更多精彩👇

在公众号对话框输入以下关键词

查看更多优质内容！

PPT | 读书 | 书单 | 硬核 | 干货 | 讲明白 | 神操作

大数据 | 云计算 | 数据库 | Python | 可视化

AI | 人工智能 | 机器学习 | 深度学习 | NLP

5G | 中台 | 用户画像 | 1024 | 数学 | 算法 | 数字孪生

据统计，99%的大咖都关注了这个公众号

👇