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

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

今天带大家看个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制作案例。

更多精彩回顾

书讯 | 1月书讯:Hello 2021! (上)

书讯 | 1月书讯:Hello 2021! (下)

资讯 | TIOBE 1 月编程语言:Python 摘得 2020 年度编程语言!

书单 | 适合的才是最好的,小众数据库黑马不可小觑

干货 | 刚刚拿下「中国AI最高奖」的语音技术,能给我们带来什么?

收藏 | “绿宝书”好在哪?前端大佬们都在推荐

上新 | ECharts开山之作,官方推荐!精心规划适合初学者的ECharts学习路径!

赠书 | 【第39期】打破“打工人”魔咒,RPA 来狙击!

点击阅读全文购买

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值