手把手教你如何制作可视化大屏！
在我们生活和工作中，经常会看到可视化大屏，主要用于展示一些汇总信息，那如何制作一个酷炫的可视化大屏呢？
今天带大家看个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数据可视化：入门、实战与进阶》中第7章 ECharts不同场景Dashboard制作案例。
近些年，大屏数据可视化十分流行，在各行业广泛应用。3月7日19点-20点，王大伟将做客CSDN直播间，带大家从零开始用ECharts搭建一个电商行业的数据可视化大屏，该方法可复用到其他行业。欢迎扫码观看直播。
纸质书链接：https://mall.csdn.net/item/52930
电子书链接：https://mall.csdn.net/v2/#/sku/48117
直播间地址：https://live.csdn.net/room/hzbooks/yLsAYBX0
扫码回复“悦读时间”进入直播群
点击阅读全文观看直播
相关文章：
ES5和ES6数组遍历方法详解
ES5和ES6数组遍历方法详解 在ES5中常用的10种数组遍历方法: 1、原始的for循环语句2、Array.prototype.forEach数组对象内置方法3、Array.prototype.map数组对象内置方法4、Array.prototype.filter数组对象内置方法5、Array.prototype.reduce数组对象内置方法6、Array.prototype…
短信猫GSM Modem
短信猫是用来收发短信的设备，和手机一样 插入SIM卡，通过（USB或串口）数据线/PCI插槽接到电脑上 在电脑上通过相关软件就可以实现短信收发的功能相关软件也就是收发短信的短信应用软件 可以自己开发，也可以要求短信猫设备…
数量级提升！深度学习让机器人抓取更高效
作者 | Jeffrey Ichnowski等译者 | 凌霄出品 | AI科技大本营（ID:rgznai100）摘要电子商务仓库中的拣选机器人需要快速计算各种配置之间有效且平稳的机器人手臂运动。最近的研究中是将抓取力分析与手臂运动规划结合，以计算最佳的手臂平滑运动&a…
phpcms_v9修改文章会提示 [hash]数据验证失败
收藏备用：phpcms\modules\content\templates\content_edit.tpl.phpaction"?mcontent&ccontent&aedit改成action"?mcontent&ccontent&aedit&pc_hash<?php echo $_SESSION[pc_hash];?>"转载于:https://blog.51cto.com/w…
横向ListView（一） ——开篇，基础逻辑实现
2019独角兽企业重金招聘Python工程师标准>>> 第一次写博文，写得不好的地方还望各位看客见谅 为了学习自定义软件开发，且定制出满足自己需求的控件（不需要将就地使用第三方源码），本人花了一周的时间开发了个…
HTTP Response中的Chunked编码
进行Chunked编码传输的HTTP Response会在消息头部设置： Transfer-Encoding: chunked 表示Content Body将用Chunked编码传输内容。 Chunked编码使用若干个Chunk串连而成，由一个标明长度为0的chunk标示结束。每个Chunk分为头部和正文两部分，头部…
ORACLE RAC 更改instance name完整步骤
下面是更改的部分步骤，但是启动问题还是存在，求达人完整。单实例的数据库修改SID比较简单，只需要修改pfile相关参数，就可以挂载数据库。 RAC环境其实一样，只不过除了修改pfile，还需要修改 OCR信息。首先来看…
炸裂！微软重磅推出混合现实平台 Mesh、基于 Excel 的低代码语言 Power Fx，Ignite 2021 太精彩！...
作者 | 伍杏玲出品 | CSDN（ID：CSDNnews）“一开始，这就是混合现实的梦想。” 在微软 Ignite 2021 大会上，微软 HoloLens 之父 Alex Kipman 头戴 HoloLens 2，出现在科技感十足的海底世界虚拟舞台上࿰…
Apache Spark 2.2.0 中文文档 翻译活动
为什么80%的码农都做不了架构师？>>> Spark 2.2.0 已然发布（2017-07-11 发布） 5 天了，更新了一些新套路吧！ 此版本从 Structured Streaming（结构化流）中删除 experimental࿰…
Unity3D常用代码总结
1 GUI汇总 function OnGUI() { GUI.Label(Rect(1,1,100,20),"Im a Label"); //1 GUI.Box(Rect(1,21,100,20),"Im a Box"); //2 GUI.Button(Rect(1,41,100,20),"Im a Button"); //3 GUI.RepeatButton(Rect(1,61,120,20),"Im a RepeatButton&…
Python 搭建车道智能检测系统
作者 | 李秋键责编 | 寇雪芹出品 | AI科技大本营（ID:rgznai100）引言：本文将利用opencv实现对复杂场景下车道线的实时检测；所使用的图像处理方法主要是在读取图片的基础上，进行多种边缘检测，然后对不同的检测…
ASP.NET弹出窗口技术之增加网站流量方法
作为Microsoft的最新建立动态Web网站的工具,ASP.NET相对于ASP和JSP在改变原始的Web编程方式方面有了长足的长进。它的代码与页面分离技术(CodeBehind)以及完善的Web服务器控件为程序员提供了一个更加符合传统编程的Web服务器端开发方式。但Web编程还是有着与传统编程不相同的特…
检查是否支持 SO_REUSEPORT
为什么80%的码农都做不了架构师？>>> int reuse_port(int sockfd) {#ifndef SO_REUSEPORT#define SO_REUSEPORT (15)#endifconst int on 1;return setsockopt(sockfd, SOL_SOCKET, SO_REUSEPORT, &on, sizeof(on)); } 转载于:https://my.oschina.n…
nginx的tmp文件过大导致磁盘空间不足一例
个人微博：http://weibo.com/h2fly欢迎技术交流现象：8月23之后，时不时收到服务器的/usrused > 90%的报警排查:1、du发现磁盘/usr使用不大，而报警使用的df》明显是有文件删除了空间没释放。注：du和df的实现机制不同&a…
10年Java老兵宝藏资料，吐血奉献！
2021都说工作不好找，也对开发人员的要求变高。前段时间自己有整理了一些Java后端开发面试常问的高频考点问题做成一份PDF文档（1000道高频题），同时也整理一些图文解析及笔记，今天在这免费分享给大家，希望大家…
IOCP , kqueue , epoll ... 有多重要？
原文地址：http://blog.codingnow.com/2006/04/iocp_kqueue_epoll.html设计 mmo 服务器，我听过许多老生常谈，说起处理大量连接时， select 是多么低效。我们应该换用 iocp (windows), kqueue(freebsd), 或是 epoll(linux) 。的确&am…
[故障解决]图文:python启动报错:api-ms-win-crt-runtime-l1-1-0.dll丢失解决
python启动报错：api-ms-win-crt-runtime-l1-1-0.dll丢失解决 环境 Windows 7 SP1 x64python3.6.1报错 解决办法 1.下载VC redist（安装时读条卡在：正在处理:Windows7_MSU_x64）2.到C:\ProgramData\Package Cache\里面搜索࿰…
ASP.NET设计应用程序的七大绝招
随着微软.NET的流行，ASP.NET越来越为广大开发人员所接受。作为ASP.NET的开发人员，我们不仅需要掌握其基本的原理，更要多多实践，从实践中获取真正的开发本领。在我们的实际开发中，往往基本的原理满足不了开发需求&#…
Chromium之各国语言切换
在\src\build\Debug\locales\目录下存放着各国语言所需要的资源文件xx.pak,我这边共有53中语言支持。 命令行进入src\build\Debug目录,敲:chrome.exe --langzh-CN就能用中文简体,zh-CN可以根据需要换成各种语言版本。 Chrome的整个solution中，每种语言都会有个相应的…
程序员每天工作摸鱼俩小时，月薪35K？
职场上有很多奇奇怪怪的事。比如说有人爆肝996，工资却还养不活自己。有人每天工作摸鱼，但是却月薪数万。前端时间，小编在某职场社交平台上看到这么一则帖子#程序员摸鱼2小时月入35k#仔细看下，该员工每天的工作日常就是摸鱼的间隙工…
JAVA的get post 区别
1. get 是从服务器上获取数据，post 是向服务器传送数据。 get 请求返回 request - URI 所指出的任意信息。Post 请求用来发送电子邮件、新闻或发送能由交互用户填写的表格。这是唯一需要在请求中发送body的请求。使用Post请求时需要在报文首部 Content - Length 字段…
多些时间能少写些代码（转自酷壳 – CoolShell.cn）
我在我的微博上说过这样一段话，我想在这里把我的这个观点阐述地更完整一些。左耳朵耗子：聪明的程序员使用50%-70%的时间用来思考，尝试和权衡各种设计和实现，而用30% – 50%的时间是在忙碌着编码，调试和测试。聪明的老板…
HTTP协议之Chunked解析
在网上找了好一会，始终没发现有解析Chunked编码的文章，那就自己写一个吧，呵呵。网上使用Chunked编码的网站似乎并不是很多，除了那些使用GZip压缩的网站，例：google.com，还有就是大部分打开GZip压…
关于深度学习编译器，这些知识你需要知道
作者 | 小O妹出品 | AI科技大本营（ID:rgznai100）神经网络编译器概览近年来，以机器学习、深度学习为核心的AI技术得到迅猛发展，深度神经网络在各行各业得到广泛应用： 1. CV（计算机视觉）…
checkbox点击切换选中状态
2019独角兽企业重金招聘Python工程师标准>>> function cboxChecked(ele) {$(ele).click(function () {var isChecked $(ele).attr(checked);if (!isChecked) {$(ele).attr(checked, true)} else {$(ele).attr(checked, false)}})} 转载于:https://my.oschina.net/u…
提升Hadoop计算能力的并行框架
集算器是新型并行计算框架，它支持读写HDFS中的文件，可以通过并行框架将计算任务分担到多个节点中。它专注于加强Hadoop的计算能力，从而实现计算性能和开发效率更高的大数据应用。更强的计算能力。Hadoop所使用的计算语言为JAVA，JA…
在ASP.NET 2.0中建立站点导航层次
站点导航提供程序--ASP.NET 2.0中的站点导航提供程序暴露了应用程序中的页面的导航信息，它允许你单独地定义站点的结构，而不用考虑页面的实际物理布局。默认的站点导航提供程序是基于XML的，但是你也可以通过编写自定义的提供程序，…
加速数据中心变革，Xilinx推出软件定义、硬件加速型 Alveo SmartNIC
近日，为满足现代数据中心发展需求，赛灵思公司宣布推出一系列全新数据中心产品及解决方案，包括全新 Alveo SmartNIC 系列、smart world （智能世界） AI 视频分析应用、一款能够实现亚微秒级交易的加速算法交易参考设计&a…
跟阿里云技术专家阙寒一起深度了解视频直播CDN技术
网络直播平台现下已经十分火热，很多常见的直播平台都采用了阿里云直播CDN来搭建自身业务。今天，我们请来了阿里云CDN团队技术专家阙寒，来介绍下视频的一些基础知识和视频直播的架构。在进入正题之前，我们先来了解视频直播相关的名…
一个ASP.NET中使用的MessageBox类
/// <summary>/// 自定义信息对话框/// </summary>public class MessageBox{/// <summary>/// 定义一个web页面，用来显示用户自定错误提示信息/// </summary>System.Web.UI.Page p;/// <summary>/// 实例时，参数为:this 如…