前端炫酷大屏VUE+DataV+Echarts【已完结】_datav大屏 vue界面demo

用户33914928060
164 阅读5分钟

最后

四轮技术面+一轮hr面结束，学习到了不少，面试也是一个学习检测自己的过程，面试前大概复习了 一周的时间，把以前的代码看了一下，字节跳动比较注重算法，面试前刷了下leetcode和剑指offer， 也刷了些在牛客网上的面经。大概就说这些了，写代码去了~

祝大家都能收获大厂offer~

篇幅有限，仅展示部分内容

开源分享：docs.qq.com/doc/DSmRnRG…

<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>



/\* 先删除默认的内外边距 \*/
\* {
    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;
  }
3.装饰组件和图表组件

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

在这里插入图片描述
1.胶囊柱图

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


//数据
<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>

效果
在这里插入图片描述
2.水位图
水位图有三种形态，多种配置

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


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

config属性(配置项)
在这里插入图片描述
效果

在这里插入图片描述

3.飞线图

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

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


数据
```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>

效果

在这里插入图片描述
4.锥形柱图
锥形柱图是特殊的柱状图，他将根据数值大小，降序排列锥形柱，适合排名类数据展示。
在这里插入图片描述

<dv-conical-column-chart :config="config5" style="width:100%;height:100%;" />
<!-- 锥形柱图 -->


<script>
export default {
 name: 'HomeView',
 data() {
 return {
 config5: {
 data: [
 {
 name: '周口',
 value: 55
 },
 {
 name: '南阳',
 value: 120
 },
 {
 name: '西峡',
 value: 71
 },
 {
 name: '驻马店',
 value: 66
 },
 {
 name: '新乡',
 value: 80
 },
 {
 name: '信阳',
 value: 35
 },
 {
 name: '漯河',
 value: 15
 }
 ],
 img: [
 require('../assets/img/1st.png'),
 require('../assets/img/2st.png'), 
 require('../assets/img/3st.png'), 
 require('../assets/img/4st.png'),
 require('../assets/img/5st.png'),
 require('../assets/img/6st.png'), 
 require('../assets/img/7st.png'),
 ]
 }
 }
</script>

效果

在这里插入图片描述
5.排名轮播表
排名轮播表同轮播表类似，也可以选择单条轮播或整页轮播。
在这里插入图片描述

<dv-scroll-ranking-board :config="config6" style="width:100%;height:100%" />
   <!-- 排名轮播表 -->


<script>
export default {
 name: 'HomeView',
 data() {
 return {
 config6: {
 data: [
 {
 name: '周口',
 value: 55
 },
 {
 name: '南阳',
 value: 120
 },
 {
 name: '西峡',
 value: 78
 },
 {
 name: '驻马店',
 value: 66
 },
 {
 name: '新乡',
 value: 80
 },
 {
 name: '信阳',
 value: 45
 },
 {
 name: '漯河',
 value: 29
 }
 ]
 }
 }
</script>

效果图

在这里插入图片描述
6.进度池
[1] 颜色支持hex|rgb|rgba|颜色关键字等四种类型。
[2] 默认配色为[‘#3DE7C9’, ‘#00BAFF’], 自动应用渐变色，若不想使用渐变色，请配置两个相同的颜色。
[3] 自动使用value的值替换字符串中的’{value}'标记。
在这里插入图片描述

<dv-percent-pond :config="config7" style="width:100%;height:100%;" />
<!-- 进度池 -->


<script>
export default {
 name: 'HomeView',
 data() {
 return {
 config7: {
 value: 86,
 localGradient: true,
 }
 }
</script>

效果图
在这里插入图片描述
7.动态环图
基于Charts封装
在这里插入图片描述

<dv-active-ring-chart :config="config8" style="width:100%;height:100%" />
<!-- 动态环图 -->


<script>
export default {
 name: 'HomeView',
 data() {
 return {
 config8: {
 data: [
 {
 name: '周口',
 value: 55
 },
 {
 name: '南阳',
 value: 120
 },
 {
 name: '西峡',
 value: 78
 },
 {
 name: '驻马店',
 value: 66
 },
 {
 name: '新乡',
 value: 80
 }
 ]
 }
 }
</script>

效果图
在这里插入图片描述
8.图表
图表组件基于Charts (opens new window)封装，只需要将对应图表option数据传入组件即可。
☞Charts实例
☞Charts配置项

<dv-active-ring-chart :config="config8" style="width:100%;height:100%" />
<!-- 图表 -->


option: {
        radar: {
          indicator: [
            { name: '西峡', max: 300 },
            { name: '周口', max: 300 },
            { name: '南阳', max: 300 },
            { name: '驻马店', max: 300 },
            { name: '郑州', max: 300 },
            { name: '洛阳', max: 300 }
          ]
        },
        series: [
          {
            type: 'radar',
            data: [111, 256, 178, 152, 266, 132]
          }
        ]
      }

效果图

在这里插入图片描述

算法

  1. 冒泡排序

  2. 选择排序

  3. 快速排序

  4. 二叉树查找: 最大值、最小值、固定值

  5. 二叉树遍历

  6. 二叉树的最大深度

  7. 给予链表中的任一节点，把它删除掉

  8. 链表倒叙

  9. 如何判断一个单链表有环

由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

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

avatar
文章
阅读
粉丝