手把手教你如何制作可视化大屏!
在我们生活和工作中,经常会看到可视化大屏,主要用于展示一些汇总信息,那如何制作一个酷炫的可视化大屏呢?
今天带大家看个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
扫码回复“悦读时间”进入直播群
点击阅读全文观看直播
手把手教你如何制作可视化大屏!相关推荐
- Python机器学习---Pyecharts制作可视化大屏
文章目录 Pyecharts可视化 Map世界地图 柱状图.饼图 Pyecharts组合图表 ECharts是由百度开源的基于JS的商业级数据图表库,有很多现成的图表类型和实例,而Pyecharts则 ...
- 超简单,用Python Pyecharts制作可视化大屏
经常有小伙伴问,如何制作数据可视化大屏? 今天主要详细讲一下Pyecharts制作可视化大屏. 注意,本文由于篇幅问题不会放置全部代码,会在提供文末全部代码的下载. ECharts是由百度开源的基于J ...
- echarts嵌套饼图自动动画_使用百度echarts制作可视化大屏——制作一个双层饼图...
使用百度echarts制作可视化大屏--制作一个双层饼图 发布时间:2018-06-12 16:24, 浏览次数:745 , 标签: echarts 实现一个两层嵌套的环形图,展示三个分类下各个品牌车 ...
- 使用百度echarts制作可视化大屏
先看一下效果图(部分) 我们现在就来完成这个第一个环形进度条. 1.下载百度echarts和jquery,添加到你的页面中: <script language="javascript& ...
- 使用百度echarts制作可视化大屏——最终效果和动态数据刷新
最终效果如下图: 接下来就是数据动态刷新了,这个没什么好说的,就是一个$.post的事,传递一个json给自定义的refresh函数就行了. $.post(url,null,function(d){ ...
- Python制作可视化大屏(东京奥运会)
目录 文章目录 前言 一.数据爬取 二.数据预处理 三.Pyecharts可视化 3.1 2020东京奥运会各国金牌分布图 3.2 2020东京奥运会奖牌榜详情 3.3 2020东京奥运会中国各项目获 ...
- 【Python】全文3000字,Pyecharts制作可视化大屏全流程! (附代码分享)
就在上一篇的文章当中 干货分享 | 用Pyecharts绘制20钟不同风格的炫酷交互式图表,建议收藏 有粉丝提到说是不是可以写一篇用Pyecharts模块做可视化大屏的相关教程,小编立马就答应了他的请 ...
- 4步教你玩转可视化大屏设计|内附实际操作
小编上次写了篇大屏数据可视化的文章<大屏做成这样,领导不重视你都难!>,围绕布局排版.配色.点缀以及动态效果等方面,阐述了帆软的一些经验,文章中酷炫的大屏效果引起了很大反响,非常多热心的用 ...
- 职场IT老手教你3步教你玩转可视化大屏设计,让领导眼前一亮!
我是制造企业的IT中心的研发人员,平常工作就是配合业务部门出出报表,选型一些商业软件,并在内部负责实施运维.最近领导出去参观了一些数字化转型比较领先的工厂和制造企业,回来就甩给我几张图,问能不能我们也 ...
最新文章
- 单细胞转录组数据整合分析专题研讨会(2019.11)
- 90后大龄女考研二战失败 该何去何从
- 架构模式: 事务日志跟踪
- python永久保存数据_python如何保存数据
- Spring security/Shiro ---登陆成功后返回登陆前界面<页面重定向>
- jq 下拉加载每次只执行一次_记一次 无限列表 滚动优化
- Network of Schools(POJ-1236)
- 基于JAVA+SpringMVC+Mybatis+MYSQL的学生健康信息管理系统
- 总结better-scroll插件的使用
- 【IO面试题】打印目录树形结构,并输出到file.txt中
- 文化财经SAR指标计算(一)
- 天津天狮学院电子与计算机学院,天津天狮学院欢迎您!
- python打印九九乘法口诀_PYTHON如何打印九九乘法表
- 阿里面试官:说一下公平锁和非公平锁的区别?
- R语言 去掉NA求均值
- 向图档插入外部DWG图片 auto CAD .NET二次开发
- java全栈系列之JavaSE-面向对象(方法的定义与调用)030
- java运行applet的命令_Java工具JDK中用来运行Applet程序的命令是()
- 定语的基本概念和用法
- 【三维人脸识别】matlab读取.wrl三维图像文件