摘要

今天，Ofter分享一个独家出品的集动态数据，实用，炫酷的可视化大屏，非常值得学习。

动态数据：API接口获取(如天气、今日热搜等)；
素材丰富：含动图、装饰、动态排序、多图表联合共享数据集；
全屏及链接：点击标题就可全屏，点击可查看大图，点击热搜可查看具体信息。

多语言动态数据可视化大屏（附源码）（数据动态可视化大屏展示）

Ofter在前几篇文章中，讲解了如何用pyecharts或Vue来制作可视化大屏，pyecharts和vue各有优势，就看大家的侧重点:

pyecharts：基于python和echarts，数据的统计、分析、处理更便捷；前端页面风格相对单一，可能没那么好看。

多语言动态数据可视化大屏（附源码）（数据动态可视化大屏展示）

vue：可导入的可视化库很多，前端页面自由度高，更炫酷；数据也可以处理，基于javascript/typescript，相对来说没有python方便。

多语言动态数据可视化大屏（附源码）（数据动态可视化大屏展示）

可视化仓库

介绍动态、炫酷、实用的可视化大屏前，Ofter先为大家介绍几个我们常用的精选库。

1.echarts: 图表齐全，基本所有你能想到的图表都有，有非常好的开源社区。

https://echarts.apache.org/examples/zh/index.html

多语言动态数据可视化大屏（附源码）（数据动态可视化大屏展示）

2.viser: ant系列，支持react, vue, angular语言，官方文档实在是模糊不清。

https://viserjs.gitee.io/demoHome.html

多语言动态数据可视化大屏（附源码）（数据动态可视化大屏展示）

3.ucharts: 基于echarts，基本都是常用图表，适合基础入门学习，另外有个优点是配置与数据解耦，后端数据直接渲染。

https://demo.ucharts.cn/#/

多语言动态数据可视化大屏（附源码）（数据动态可视化大屏展示）

4.dataV: 亮点是有动态装饰效果，样式比较科技感，与其他库搭配使用。

http://datav.jiaminghi.com/guide/

多语言动态数据可视化大屏（附源码）（数据动态可视化大屏展示）

注：专业角度上，我们都是使用echarts，其他库作为补充使用。

编写大屏代码

终于回归正题了，Ofter以上图这个大屏为例，为大家介绍下如何编写动态的可视化大屏。

多语言动态数据可视化大屏（附源码）（数据动态可视化大屏展示）

一、准备工作

编写代码的工具：pycharm
Vue安装和简单示例‬：参考‬之前‬的人文章‬《vue完整‬教程‬-从零开始‬编写‬可视化‬大屏‬》
可视化库：上图大屏采用了echarts（图表部分）和dataV（装饰部分）两个库
数据：echarts的练习数据，API接口获取

二、大屏布局

准备工作做完，我们就完成了50%的工作，我们再设计一下大屏的排版，主要定一下所用图表和各图表的宽高占比，这样我们就完成了75%的工作，剩下的就编写代码。

多语言动态数据可视化大屏（附源码）（数据动态可视化大屏展示）

三、代码编写

1.全局引用仓库

全局引用就不用每个vue文件再引用了，将src-main.js代码改成如下：

import Vue from 'vue'import App from './App'import router from './router'import * as echarts from 'echarts' //引入echartsimport dataV from '@jiaminghi/data-view' //引入datavVue.use(dataV) //使用datavVue.prototype.$echarts = echarts //使用echartsVue.config.productionTip = falsenew Vue({ el: '#app', router, components: { App }, template: '<App/>'})

2.项目结构

结构基本上都大同小异，就有一点要注意：数据集像json,excel等要存放在与src平级的static目录下，放置在src-assets可能会读不出数据。

多语言动态数据可视化大屏（附源码）（数据动态可视化大屏展示）