在当今数据驱动的世界中，可视化技术的重要性愈发凸显。前端可视化大屏项目作为数据可视化解决方案的一种，为用户提供了直观、清晰的数据展示方式。这种项目不仅在商业、科研等领域发挥着重要作用，也为普通用户带来了全新的数据理解体验。本文将深入探讨前端可视化大屏项目的特点、优势以及应用场景，带领读者进入数据的视觉盛宴。
1、项目描述
根据奔跑吧面条的**vue-big-screen**开源框架基础上进行修改。
-
项目需要全屏展示（按 F11）。
-
项目部分区域使用了全局注册方式，增加了打包体积，在实际运用中请使用 按需引入。
-
项目环境：Vue-cli、DataV、Echarts、Webpack、Npm、Node，axios,mock。
-
请拉取 master 分支的代码，其余分支是开发分支。
-
在项目public目录下存放地图数据合集，根据地市编存放。
友情链接：
-
Vue 官方文档 -
DataV 官方文档 -
echarts 实例，echarts API 文档 -
mock.js官网 -
axios官网
项目展示
项目预览地址
https://www.daidaibg.com/bigscreen
github地址
https://github.com/daidaibg/IofTV-Screen
Gitee地址
https://gitee.com/memeda520/IofTV-Screen
1.1滚动设置，自适应设置
项目中可以进行滚动配置，内容是否滚动
点击右上角设置按钮
可以进行以下配置，可以自行代码中进行修改或增加配置
2、主要文件介绍
| 文件 | 作用/功能 |
|---|---|
| main.js | 主目录文件，引入 Echart/DataV 等文件 |
| utils | 工具函数与 mixins 函数等 |
| views/ home.vue | 项目主结构 |
| views/其余文件 | 界面各个区域组件（按照位置来命名） |
| assets | 静态资源目录，放置 logo 与背景图片 |
| assets / css/ | 通用 CSS 文件，全局项目快捷样式调节 |
| components/echart | 所有 echart 图表（按照位置来命名） |
| common/… | 全局封装的 ECharts 和 flexible 插件代码（适配屏幕尺寸，可定制化修改） |
| api/api.js | 接口封装文件 |
| mock | 模拟数据接口地址 |
3、使用介绍
安装
npm install
node-sass 安装慢或失败问题 单独使用这个命令
npm i node-sass@4 --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
启动
npm start
接下来跟面条的差不多还是看面条的文档吧
https://gitee.com/MTrun/big-screen-vue-datav/tree/master#%E4%B8%89%E4%BD%BF%E7%94%A8%E4%BB%8B%E7%BB%8D
4、公用组件
封装了除面条外个别用到的组件
4.1 message消息提示
因为刚开始没想着用第三方提示库，自己简单封装了一个。
注：组件内部目前只有warning，类型，如果需要其他类型自己组件内添加。
因在main.js注册全局可以直接使用，不需要引入
this.$Message({
text: res.msg,
type: 'warning'
})
//也可以这样
this.$Message.warning(res.msg)
| 参数 | 描述 | 默认值 | 类型 | 可选值 |
|---|---|---|---|---|
| text | 提示文字 | – | string | – |
| type | 弹窗类型 | warning | string | warning |
4.2 外边框
因为我的项目外边框几乎一样，还有title,所以封装了此组件。
根据自己需求更改，更换外边框（srccomponentsitem-wrapitem-wrap.vue）下更换。
<ItemWrap
title="我是title"
>
<div>我是谁？</div>
</ItemWrap>
| 参数 | 描述 | 默认值 | 类型 | 可选值 |
|---|---|---|---|---|
| title | 标头 | – | string | – |
总结
通过本文的介绍，我们对前端可视化大屏项目有了更深入的了解。它不仅提供了丰富多彩的数据展示方式，还能够为用户提供直观、清晰的数据理解体验。在未来的发展中，前端可视化大屏项目将继续发挥重要作用，为各个领域的数据分析和决策提供支持，助力用户更好地理解和利用数据。
原文始发于微信公众号（python学习之旅）：前端可视化大屏项目的魅力
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/282705.html
