一、摘 要
今天,Ofter分享一个独家出品的集动态数据,实用,炫酷的可视化大屏,非常值得学习。
-
动态数据:API接口获取(如股票、天气、今日热搜等);
-
素材丰富:含动图、装饰、动态排序、多图表联合共享数据集;
-
全屏及链接:点击标题就可全屏,点击股票可查看大图,点击热搜可查看具体新闻。
Ofter在前几篇文章中,讲解了如何用pyecharts或Vue来制作可视化大屏,pyecharts和vue各有优势,就看大家的侧重点:
1. pyecharts
基于python和echarts,数据的统计、分析、处理更便捷;前端页面风格相对单一,可能没那么好看。
2. 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以上图这个大屏为例,为大家介绍下如何编写动态的可视化大屏。
1. 准备工作
1)编写代码的工具:pycharm
3)可视化库:上图大屏采用了echarts(图表部分)和dataV(装饰部分)两个库
4)数据:echarts的练习数据,API接口获取
2. 大屏布局
准备工作做完,我们就完成了50%的工作,我们再设计一下大屏的排版,主要定一下所用图表和各图表的宽高占比,这样我们就完成了75%的工作,剩下的就编写代码。
3. 代码编写
1)全局引用仓库
全局引用就不用每个vue文件再引用了,将src-main.js代码改成如下:
import Vue from 'vue'
import App from './App'
import router from './router'
import * as echarts from 'echarts' //引入echarts
import dataV from '@jiaminghi/data-view' //引入datav
Vue.use(dataV) //使用datav
Vue.prototype.$echarts = echarts //使用echarts
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
2)项目结构
结构基本上都大同小异,就有一点要注意:数据集像json,excel等要存放在与src平级的static目录下,放置在src-assets可能会读不出数据。
3)各图表代码编写
先在src-components目录下编写各图表代码。
以动态柱状排序图(各国人均收入动态排序)为例,在echarts中的官网示例中可找到代码,但是这个代码不能直接用。
一般,echarts的代码就分为两部分(变量定义和图表定义),也有可能只有图表定义:
1)变量定义:这个应该可以理解,就是为图表定义的变量;
2)图表定义:以"option="或"$"为首的就是图表定义部分。
Ofter在上图红框框出来的部分是需要自行添加的代码,然后就可以把echarts官网上的代码复制到下图如下位置。
4)测试图表
我们在路由src-router-index.js文件中配置下路由,就可以运行项目测试图表。
如果对vue不熟悉的,可以参考如下文章:最完整的Vue教程-从零开始编写可视化大屏
四、完整资料获取
(在评论处可查看下载方式)
1. 可视化仓库
1)echarts
2)viser
3)ucharts
4)dataV
2. 数据集
1)echarts练习数据源;
2)API:天气、股票、新闻等;
3. 源代码
1)Ofter数据科学大屏;
2)多套大屏模板;
3)多个Vue-echarts图表模板。