投稿
  1. 极客之音首页
  2. 技术随笔

Vue+DataV+Echarts组件创建炫酷科技大屏~(注释多多)

小半 • • 技术随笔 • 阅读 312

导读：本篇文章讲解 Vue+DataV+Echarts组件创建炫酷科技大屏~(注释多多)，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com

📣文章目录

DataV介绍：

组件库基于Vue 开发，主要用于构建大屏，数据展示页面即数据可视化

  • 边框：带有不同边框的容器
  • 装饰：增加视觉效果
  • 图表：图表组件基于Charts封装，轻量，易用
  • 其他：飞线图/水位图/轮播表等

1.创建Vue项目

1.安装Vue/Cli

查看更多

npm i -g @vue/cli

在这里插入图片描述

2.使用命令，创建Vue项目

vue create datav-demo

会出现选择模板
操作提示：使用键盘上下控制选择那项，空格是选中，选中后括号里面会有“*”
1.请选择预置页面，Manually select features 手动选择配置
在这里插入图片描述

检查项目所需的特性
在这里插入图片描述
然后回车进入下个页面，选择Vue版本
在这里插入图片描述
进入使用什么css预编译器页面，选择Less
在这里插入图片描述
配置

在这里插入图片描述
预设，把之前的配置存起来 按y ，否则按n
在这里插入图片描述
保存预设名称自己随便取

在这里插入图片描述
备注：如果要删除预设我们可以在用户下找到.vuerc文件

在这里插入图片描述
打开就可以查看预设信息，删除后以后在创建Vue项目，选择预置页面就不会有这个预设信息
在这里插入图片描述

然后回车就会安装
在这里插入图片描述
在这里插入图片描述

创建成功查看项目
在这里插入图片描述

3.安装DataV

打开项目进入终端在项目目录下，运行命令

npm install @jiaminghi/data-view

在这里插入图片描述

4.运行vue/cli创建的项目

终端输入命令

vue-cli-service serve

在这里插入图片描述
如果你不知道怎么运行可以查看package.json文件里面的代码点击左边绿色三角形运行，和终端输入命令效果是一样的
在这里插入图片描述

点击运行后点击链接打开创建的项目
在这里插入图片描述
在这里插入图片描述
也可以使用npm 命令运行项目

npm run serve

在这里插入图片描述

在这里插入图片描述

那命令就是

npm run dev

2.如果已经有Vue项目（可以通过步骤1）

1.安装DataV

打开项目进入终端，在项目目录下，运行命令

npm install @jiaminghi/data-view

2.自动注册所有组件为全局组件

找到src目录下的main.js添加一下代码

// 将自动注册所有组件为全局组件
import dataV from '@jiaminghi/data-view'

Vue.use(dataV)

在这里插入图片描述

3.使用喜欢的样式

去官网找自己喜欢的样式官网地址
我使用这个边框特效
在这里插入图片描述
打开项目添加代码

<dv-border-box-1>dv-border-box-1</dv-border-box-1>

在这里插入图片描述
你们也可以跟我在App.vue界面添加代码，也可以在Helloworld.vue里面添加代码，Helloworld页面有很多数据是介绍vue的，为了新手可以看的懂，我就尽量怎么简单怎么来了

在这里插入图片描述

页面展示：
此时你的页面效果是这样的
在这里插入图片描述
怎么解决跟我走
我们找到全局容器

<dv-full-screen-container>content</dv-full-screen-container>

在这里插入图片描述
修改代码

    <dv-full-screen-container>
      <!-- 把边框标签放进去     -->
      <dv-border-box-1>dv-border-box-1</dv-border-box-1>
    </dv-full-screen-container>

在这里插入图片描述

在这里插入图片描述
我们需要添加一些样式来保证页面边框可以正常显示

<dv-border-box-1 :style="{width:'100%',height:'70%'}">DataV入门案例</dv-border-box-1>

在这里插入图片描述
效果图：

在这里插入图片描述
更改其他样式
在这里插入图片描述
修改代码，只要修改标签就可以有不同的样式，也可以自定义边框颜色啥的
在这里插入图片描述

在这里插入图片描述是不是有那味了
在这里插入图片描述

3.做一个属于自己的大屏

搞个背景色，在搭建好大屏的整体框架，在把不同颜色的小框架，设置展示的数据信息
，
后续会把Echarts组件也引入使用

1.使用Echarts丰富图表信息

引入Echarts给项目添加图表样式，之前我也写过，可以参考这篇文章，步骤也很简单就归纳一下就三个步骤，我们现在使用Echarts升级界面

后续五一后来补…

2.大屏展示

接着来吧
我们在项目中src下创建2个文件夹一个是config和view文件夹
在这里插入图片描述
view:用于存放一些视图
config:用于存放一些配置

我打算在第二个绿色块里面添加一个省份地图，用来展示一些信息
在这里插入图片描述
需要使用到阿里的在线工具点击直达

首页
在这里插入图片描述
我们后续的地图添加是使用了其他类型把js数据复制保持到项目的js文件中
在这里插入图片描述
在这里插入图片描述

在config中添加js文件用于存储复制出来的json数据
在这里插入图片描述

export default 粘贴json数据到后面

在这里插入图片描述
我是通过代码格式化后的你们看到的数据是全部连在一起的，由于工作比较忙导致，说五一后面把大屏搞出来一拖再拖，每天晚上都会利用一些时间进行学习和写这个大屏，想做出大屏还是比较容易的，需要多花时间在看官网的技术文档来实现一些效果。在这里插入图片描述

我也是初学者，平常都是在写java代码，虽然在公司我也写前端代码，但是写前端代码远远要比我写后端代码花的时间长。
吃惊
最后放张效果图，还有一部分没有代码堆出来，后续会把代码发布到git上，作为初学者比较难的是地图可能不是特别理解但是，没关系我在上面写了巨多的注释，展示一部分代码片段
在这里插入图片描述
就是这么多

在这里插入图片描述

最后看下效果图吧，相信自己你也可以在我这个基础上搞出NB的大屏
在这里插入图片描述
代码已经提交GitHub上，有兴趣的小伙伴可以去下载
访问地址

在这里插入图片描述

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/83839.html

赞 (0)
小半的头像小半
0 0

相关推荐

极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！