使用Vue实现数据可视化大屏功能(一)

导语
现在在很多的工程项目中，都有有关于数据大屏相关的监控内容，这里我们就来看一下如何用Vue来搭建一个数据可视化大屏应用。

创建项目

使用WebStorm工具创建一个Vue的项目。如下图所示，配置好vue的脚手架工具和nodejs的运行环境，等待项目执行创建完成。
当然这里也可以采用命令行脚本构建的方式。

根据提示选择对应的编译版本进行创建

创建项目完成，如下图所示。

项目创建完成之后运行项目。效果如下

安装依赖

引入vue-router

在创建完成的项目中运行如下的命令，安装vue-router，注意执行第一个命令的时候，如果是Vue2的话会报错，需要去使用指定的版本号的方式来进行安装。

npm install vue-router --save
npm install vue-router@"3.1.5"

引入sass-loader

npm install --save-dev sass-loader
npm install --save-dev sass

注意直接安装这两个组件依赖的时候会因为版本问题而找不到对应的组件，需要进行如下的操作

npm uninstall sass-loader node-sass
npm install sass-loader@8.0.2 sass@1.26.5  --save-dev

这两个命令是将原有的sass的依赖剔除，然后引入新的sass依赖。

修改项目

第一步、编辑App.vue 的页面

根据Vue的原理这里我们引入了路由页面，并且将路由组件加入到主页面中。

<template><div id="app"><router-view/></div>
</template><style lang="scss">body {margin: 0;}#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
</style>

第二步、编写路由JS文件

在文件路径中创建router的文件夹并且创建router.js的路由配置文件内容如下，引入了Vue组件，引入了VueRouter组件，并且添加默认的路由配置。

import Vue from 'vue'
import VueRouter from "vue-router";
Vue.use(VueRouter)
const routes = [{path:'/',name:'index',component:()=>import('../views/index')}
]
const router = new VueRouter({mode:"history",routes
})
export default router

第三步、创建主页面路由文件

创建一个views的视图文件夹，添加index.vue的主视图文件，内容如下。

<template><div>这个页面有东西了</div>
</template><script>export default {name: "index"}
</script><style scoped></style>

第四步、在主文件中配置路由规则

import Vue from 'vue'
import App from './App.vue'
import router from "@/router";Vue.config.productionTip = falsenew Vue({router,render: h => h(App),
}).$mount('#app')

完成了以上四步操作之后，可以运行代码，会看到我们配置的主页面文件被加载。效果如下

使用Vue实现数据可视化大屏功能(一)相关推荐

使用Vue实现数据可视化大屏功能(二)
引入数据大屏相关组件用Datav插件做大屏可视化的组件,官网地址 http://datav.jiaminghi.com/ ,整个组件库都是基于Vue React版本实现,主要用于构建大屏数据可视 ...
基于vue+echarts 数据可视化大屏展示[附源码]
获取 ECharts 的路径有以下几种,请根据您的情况进行选择: 1) 最直接的方法是在 ECharts 的官方网站中挑选适合您的版本进行下载,不同的打包下载应用于不同的开发者功能与体积的需求,或者您 ...
Vue中如何进行数据可视化大屏展示
Vue中如何进行数据可视化大屏展示在现代数据驱动的应用程序中,数据可视化大屏已经成为了非常重要的一环.通过对海量数据进行可视化展示,可以帮助用户更好地理解和分析数据,从而做出更加明智的决策.在Vue ...
怎么做数据可视化大屏？从设计到上线，一般用这3类工具
数据可视化大屏成为了这两年很火爆的一个需求. 一方面,不少甲方都想做这么酷炫的大屏,用于公司展厅.日常经营监控,还有些特殊行业如交通.运输.工厂制造,会做更高级的3D建模等. 另一方面,市面上可提供做 ...
YYDatav的数据可视化大屏《精彩案例汇总》（PythonEcharts源码）
一. 资源下载 [1-10]套Python+Echarts数据可视化大屏案例(共10套)-企业管理文档类资源-CSDN下载第1篇https://yydatav.blog.csdn.net/articl ...
基于JavaScript+Koa2实现 Echarts 电商平台数据可视化大屏全栈【100010415】
全新 Echarts 电商平台数据可视化大屏全栈 1. 前言五一假期重学了新版 Echarts,一个基于 JavaScript 的开源可视化图表库,收集参考了很多网上资料,最终选择电商平台作为练手项 ...
如何保证两个不同宽高的canvas用同一组坐标正常显示_如何1人5天开发完3D数据可视化大屏【一】...
相信从事过数据可视化开发的你对大屏并不陌生,那么开发一个酷炫的大屏一定是很多数据可视化开发者想要做的事情. 我们使用three.js,大约一周的时间开发出了一个酷炫的数据可视化大屏: 1. 前言由于 ...
数据大屏产品介绍PPT_有这些图表美化工具，十分钟配出炫酷的数据可视化大屏...
有这些图表美化工具,十分钟配出炫酷的数据可视化大屏数据可视化难,试试这些图表美化图表可视化,是很多同学头疼的问题,因此找到一款操作简便,少花钱,可编辑数据,导出样式多的图表生成网站迫在眉睫. 1. ...
Qt编写数据可视化大屏界面电子看板12-数据库采集
一.前言数据采集是整个数据可视化大屏界面电子看板系统核心功能,没有数据源,这仅仅是个玩具UI,没啥用,当然默认做了定时器模拟数据,产生随机数据,这个可以直接配置文件修改来选择采用何种数据采集方法,总 ...