前端炫酷大屏VUE+DataV+Echarts【已完结】_datav大屏 vue界面demo(1)_前端大屏组件

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

npm install -g @vue/cli

1
2

查看脚手架版本

vue -V

1
2

创建项目

vue create 项目名称

这里建议选手动、可以把用到的插件(router、vuex、ts等等)安装一下，不再手动一个一个安装

选择完成按下回车(enter键)，接下来会再次询问我们要使用的Vue的版本(2.x或者3.x)

项目启动

项目启动成功

扩展知识

package.json文件中devDependencies和dependencies的区别

1. dependcies：依赖的意思，这些安装包都是程序所依赖的包，需要发布到生产环境的。
2. dev即develop，开发的意思，也就是开发环境下的依赖。

例如安装axios
安装到开发环境 npm axios --save-dev
安装到生产环境 npm axios -save
区别：

devDependencies中的插件只用于开发环境，不用于生产环境，而dependencies是要发布到生产环境的。比如babel有关的转化es6到es5的依赖只是开发环境下转化用，生产过程中是用不到，所以只用写在devDependencies中，而像vue或element-ui这种实际运行会调用，得写在dependencies中

---

二、DataV - -大屏数据展示组件库

☞DataV 官网网址

DataV是Vue大屏数据展示组件库，组件基于Vue(React版)，主要用于构建大屏(全屏)数据展示页面即数据可视化，具有多种类型组件可供用:

• 边框:(带有不同边框的容器)
• 装饰:(用来点缀页面效果，增加视觉效果)
• 图表:(图表组件基于Echarts，轻量，易用)
• 其他:(飞线图/水位图/轮播图)

DataV的安装

☞[DataV官方详细步骤
代码如下（示例）：
npm 安装

npm install @jiaminghi/data-view -S

1
2

DataV的使用

//导入DataV
import datav from '@jiaminghi/data-view'
//vue使用DataV
Vue.use(datav)

1
2
3
4
5

DataV的组件

1.全屏容器组件

☞DataV全屏容器官网讲解

作用：相当于在游览器里面能够全屏的展示，同时它也能根据当前内容随着我们游览器大小发生变化，能够自适应。

2.边框组件

☞DataV边框官网讲解
边框组件里面有各种各样的比较炫酷的边框供我们使用。

了解完首先这些基础的组件，接下来就是简单写一下样式

• 方案1 ：
  
• 方案2 ：
  
  素材（css和图片以及源码）可以私信我免费获取

<template>
  <div class="content bg">
    <dv-full-screen-container>
      <!-- 全屏容器 -->
      <div class="module-box">
        <div style="flex:0 1 25%">
          <!-- 放大的比例默认为0 缩小的比例默认为1 25%是占得百分比-->
          <dv-border-box-8 style="width: 100%;height: 200px;">
            <!-- 边框 -->
          </dv-border-box-8>
          <dv-border-box-8 style="width: 100%;height: 200px;">
            <!-- 边框 -->
          </dv-border-box-8>
          <dv-border-box-8 style="width: 100%;height: 200px;">
            <!-- 边框 -->
          </dv-border-box-8>
        </div>
        <div style="flex:0 1 50%">
          <dv-border-box-11 title="数据大屏" style="width: 100%;height: 600px;">
            <!-- 边框 -->
          </dv-border-box-11>
        </div>
        <div style="flex:0 1 25%">
          <dv-border-box-8 style="width: 100%;height: 300px;">
            <!-- 边框 -->
          </dv-border-box-8>
          <dv-border-box-8 style="width: 100%;height: 300px;">
            <!-- 边框 -->
          </dv-border-box-8>
        </div>
      </div>

      <div class="module-box">
        <div style="flex:0 1 25%">
          <!-- 放大的比例默认为0 缩小的比例默认为1 25%是占得百分比-->
          <dv-border-box-8 style="width: 100%;height: 200px;">
            <!-- 边框 -->
          </dv-border-box-8>
        </div>
        <div style="flex:0 1 50%">
          <dv-border-box-8 style="width: 100%;height: 200px;">
            <!-- 边框 -->
          </dv-border-box-8>
        </div>
        <div style="flex:0 1 25%">
          <dv-border-box-8 style="width: 100%;height: 200px;">
            <!-- 边框 -->
          </dv-border-box-8>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>


export default {
 name: 'HomeView',
}
</script>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

/\* 先删除默认的内外边距 \*/
\* {
    margin: 0;
    padding: 0;
}
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    font-size: 62.5%;  /\* 设置过根节点的文字大小后，所有子节点的文字大小全部相对于根节点计算，html为10px \*/
  }
  body, input, button, a, textarea, select {
    margin: 0;
    font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
    font-size: 1.4rem;
    line-height: 1.5;
    color: #333;
  }
  html, body {
    width: 100%;
    height: 100%;
    margin: 0;
  }
  
  a {
    text-decoration: none;
  }
  a:hover, a:focus {
    text-decoration: none;
  }
  a:hover {
    filter: alpha(opacity=90);
    opacity: .9;
  }

  /\* 文本对齐 \*/
  .tc {
    text-align: center;
  }
  
  .tr {
    text-align: right;
  }
  
  .tl {
    text-align: left;
  }

  /\* 主体 \*/
  .content {
    color:#fff;
    background: #000;
    width:100%;
    height:100vh;
  }
  .bg {
    background:url('../img/pageBg.png') no-repeat center center;
    background-size: cover;
  }
  /\* 模块盒子 \*/
  .module-box {
    display:flex; 
    /\* flex弹性布局 \*/
    justify-content: space-between; /\*两端对齐\*/
    margin:5px;
    /\* margin外边距 \*/
  }
  /\* 主体 \*/
  .content{
    color: #fff;
    background: #000;
    width: 100%;
    height: 100vh;
  }
  .bg{
    background: url('../img/pageBg.png') no-repeat center; 
    background-size: cover;
  }


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

3.装饰组件和图表组件

☞DataV装饰官网讲解
☞DataV图表官网讲解

1.胶囊柱图

<dv-capsule-chart :config="config" style="width:300px;height:200px" />

1
2

//数据
<script>
export default {
 name: 'HomeView',
 data() {
 return {
 config: {
 data: [
 {
 name: '南阳',
 value: 167
 },
 {
 name: '周口',
 value: 67
 },
 {
 name: '漯河',
 value: 123
 },
 {
 name: '郑州',
 value: 55
 },
 {
 name: '西峡',
 value: 98
 }
 ]
 }

 }
 }
}
</script>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

效果

2.水位图
水位图有三种形态，多种配置

<dv-water-level-pond :config="config2" style="width:100%;height:200px" />
<!-- 水位图 -->

1
2
3

<script>
export default {
 name: 'HomeView',
 data() {
 return {
 config2: {
 data: [66, 45],
 // 可以有多个水位，但默认显示值最大的水位信息。
 shape: 'roundRect',
 // 水位图形状
 colors:['#43CBFF','#9708CC'],
 // 水位图配色
 waveOpacity:0.2,
 // 波浪透明度
 }
 }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

config属性(配置项)

效果

3.飞线图

配置若干飞线点后，你可以在任意两点间设置飞线，得到动态飞线图，组件提供的dev模式可以帮你快速配置飞线点位置。

<dv-flyline-chart :config="config4" style="width:100%;height:100%;" />

1
2

数据
```html
<script>
export default {
 name: 'HomeView',
 data() {
 return {
 config4: {
 centerPoint: [0.48, 0.35],
 // 中心点坐标
 flylineColor:'#43CBFF',
 // 飞线颜色
 points: [
 // 飞线起始点数据
 {
 position: [0.52, 0.235],
 text: '新乡'
 },
 {
 position: [0.43, 0.29],
 text: '焦作'
 },
 {
 position: [0.59, 0.35],
 text: '开封'
 },
 {
 position: [0.53, 0.47],
 text: '许昌'
 },
 {
 position: [0.45, 0.54],
 text: '平顶山'
 },
 {
 position: [0.36, 0.38],
 text: '洛阳'
 },
 {
 position: [0.62, 0.55],
 text: '周口'
 },
 {
 position: [0.56, 0.56],
 text: '漯河'
 },
 {
 position: [0.37, 0.66],
 text: '南阳'
 },
 {
 position: [0.55, 0.81],
 text: '信阳'
 },
 {
 position: [0.55, 0.67],
 text: '驻马店'
 },
 {
 position: [0.37, 0.29],
 text: '济源'
 },
 {
 position: [0.20, 0.36],
 text: '三门峡'
 },
 {
 position: [0.76, 0.41],
 text: '商丘'
 },
 {
 position: [0.59, 0.18],
 text: '鹤壁'
 },
 {
 position: [0.68, 0.17],
 text: '濮阳'
 },
 {
 position: [0.59, 0.10],
 text: '安阳'
 }
 ],
 bgImgUrl: require('../assets/img/map.jpg'),
 // 背景图ur
 // 因为cli脚手架是基于webpack，这里采用require导入，这样方便webpack解析
 centerPointImg: {
 // 中心点图片配置
 url: require('../assets/img/mapCenterPoint.png')
 },
 pointsImg: {
 // 飞线点图片配置
 url: require('../assets/img/mapPoint.png')
 }
 }
 }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98

效果

4.锥形柱图
锥形柱图是特殊的柱状图，他将根据数值大小，降序排列锥形柱，适合排名类数据展示。

文末

技术是没有终点的，也是学不完的，最重要的是活着、不秃。

零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。

最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

自学最怕的就是缺乏自驱力，一定要自律，杜绝“三天打鱼两天晒网”，到最后白忙活一场。

高度自律的同时，要保持耐心，不抛弃不放弃，切勿自怨自艾，每天给自己一点点鼓励，学习的劲头就会很足，不容易犯困。

技术学到手后，找工作的时候一定要好好准备一份简历，不要无头苍蝇一样去海投简历，容易“竹篮打水一场空”。好好的准备一下简历，毕竟是找工作的敲门砖。

拿到面试邀请后，在面试的过程中一定要大大方方，尽力把自己学到的知识舒适地表达出来，不要因为是自学就不够自信，给面试官一个好的印象，面试成功的几率就会大很多，加油吧，骚年！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】