vue实现酷炫可视化大屏

技术要点

• vue2
• less
• echarts
• v-charts
• flexible
  主要采用v-charts+echarts进行实现图表可视化

效果图

项目搭建

采用vue-cli脚手架进行项目创建

vue create 项目名称
1

项目结构:

代码编写

v-charts官网:https://v-charts.js.org/#/

首先看到上方目录结构进行主要分析

• util：封装了个获取当前时间的工具类
• components:编写图表可视化页面
• assets：存放静态资源

依赖安装:

npm i v-charts echarts -S
1

npm i -s lib-flexible
1

flexible的使用请自行参考网络上的文章,它是与rem做配合实现自适应的

入口文件main:

引入VCharts以及flexible自适应布局的东西

import Vue from 'vue'
import App from './App.vue'
import VCharts from 'v-charts'//引入vcharts图表（饿了么开发!）
import 'lib-flexible/flexible.js'
Vue.use(VCharts)
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
}).$mount('#app')

1
2
3
4
5
6
7
8
9
10

getTime.js工具类

/**
 * 补零
 */
const addZero = function (num) {
    if (parseInt(num) < 10) {
        num = "0" + num
    }
    return num
}
/**
毫秒转日期
*/
export const formatDate = (ms) => {
    // console.log(ms)
    /**
     * ms:毫秒数
     */
     if (ms) {
        var oDate = new Date(ms),
            oYear = oDate.getFullYear(),
            oMonth = oDate.getMonth() + 1,
            oDay = oDate.getDate(),
            oHour = oDate.getHours(),
            oMin = oDate.getMinutes(),
            oSen = oDate.getSeconds(),
            oTime = oYear + '-' + addZero(oMonth) + '-' + addZero(oDay) + ' ' + addZero(oHour) + ':' +
                addZero(oMin) + ':' + addZero(oSen);
        return oTime;
    } else {
        return ""
    }
}
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

echart.vue

<template>
  <div>
    <video id="myvideo">
      <source src="../assets/潮点网_84979.mp4" />
    </video>
    <!-- 头部 -->
    <header>
      <h1>数据可视化--碰磕</h1>
      <div class="time">{{nowTime}}</div>
    </header>
    <section class="main_box">
      <div class="box_children">
        <div class="panel bar">
          <h2>柱状图</h2>
          <div class="chart">
            <ve-histogram :data="chartData" width="100%" height="100%"></ve-histogram>
          </div>
          <div class="panel_footer"></div>
        </div>
        <div class="panel bar">
          <h2>饼形图</h2>
          <div class="chart">
            <ve-pie :data="chartData" width="100%" height="100%"></ve-pie>
          </div>
          <div class="panel_footer"></div>
        </div>
        <div class="panel bar">
          <h2>条形图</h2>
          <div class="chart">
            <ve-bar :data="chartData" width="100%" height="100%"></ve-bar>
          </div>
          <div class="panel_footer"></div>
        </div>
      </div>
      <div class="box_children">
        <ve-map :data="chartData" width="100%" height="100%"></ve-map>
      </div>
      <div class="box_children">
        <div class="panel bar">
          <h2>折线图</h2>
          <div class="chart">
            <ve-line :data="chartData" width="100%" height="100%"></ve-line>
          </div>
          <div class="panel_footer"></div>
        </div>
        <div class="panel bar">
          <h2>仪表盘</h2>
          <div class="chart">
            <ve-gauge :data="chartData" width="100%" height="100%"></ve-gauge>
          </div>
          <div class="panel_footer"></div>
        </div>
        <div class="panel bar">
          <h2>漏斗图</h2>
          <div class="chart">
            <ve-funnel :data="chartData" width="100%" height="100%"></ve-funnel>
          </div>
          <div class="panel_footer"></div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import {formatDate} from '../util/getTime'
export default {
  name: 'myEchart',
  data(){
    return{
      nowTime:'',
      mytime:null,
      chartData:{
        columns: ['日期', '访问用户', '下单用户'],
        rows: [
          { '日期': '2018-05-22', '访问用户': 32371, '下单用户': 19810 },
          { '日期': '2018-05-23', '访问用户': 12328, '下单用户': 4398 },
          { '日期': '2018-05-24', '访问用户': 92381, '下单用户': 52910 }
        ]
      }
    }
  },
  created(){
    this.mytime=setInterval(() => {
      let now=new Date();
      let time=now.getTime()+1000;
      this.nowTime=formatDate(time)
    }, 1000);
  },
  mounted(){
    this.playvideo();//播放视频
  },
  beforeDestroy(){
    clearInterval(this.mytime);//关闭倒计时
  },
  methods:{
    chartEvents(val){
      console.log(val);
    },
    playvideo(){
      let video = document.getElementById("myvideo");
      //调用video标签的播放函数
      setTimeout(() => {
        video.play();
      }, 2000);
    }
  }
}
</script>
<style lang="less" scoped>
video{
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
}
header{
  height: 1.25rem;
  // background: rgb(235, 230, 135);
  h1{
    text-align: center;
    line-height: 1.25rem;
    font-size: 0.475rem;
    color: #fff;
  }
  .time{
    position: absolute;
    top: 0;
    right: 0.375rem;
    line-height: 0.9375rem;
    color: white;
    font-size: 0.25rem;
  }
}
.main_box{
    display: flex;
    min-width: 1024px;
    max-width: 1920px;
    margin: 0 auto;
    // background-color: #666666;
    padding: .125rem .125rem 0;
    .box_children{
      flex: 3;
    }
    // 第二个盒子占五份
    .box_children:nth-child(2){
      flex: 5;
    }
    .panel{
        height: 30vh;
        padding: 0 0.1875rem 0.5rem;
        margin-bottom: 0.1875rem;
        border: 1px solid rgba(25, 186, 139, 0.17);
        background: rgba(255, 255, 255, 0.03);
        &::before{
          position: absolute;
          // top: 0;
          left: 0.1875rem;
          width: 10px;
          height: 10px;
          border-left: 2px solid blue;
          border-top: 2px solid blue;
          content: '';
        }
        &::after{
          position: absolute;
          top: 0;
          right: 0;
          width: 10px;
          height: 10px;
          border-right: 2px solid blue;
          border-top: 2px solid blue;
          content: '';
        }
        .panel_footer{
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          &::before{
          position: absolute;
          bottom: 0;
          left: 0;
          width: 10px;
          height: 10px;
          border-left: 2px solid blue;
          border-bottom: 2px solid blue;
          content: '';
          }
          &::after{
            position: absolute;
            bottom: 0;
            right: 0;
            width: 10px;
            height: 10px;
            border-right: 2px solid blue;
            border-bottom: 2px solid blue;
            content: '';
          }
        }
        h2{
          height: .6rem;
          color: #fff;
          line-height: 0.6rem;
          text-align: center;
          font-size: 0.25rem;
          font-weight: 400;
        }
        .chart{
          height: 5rem;
        }
      }
  }
</style>

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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214

这样就实现了,这里背景图用的是一个炫酷的视频,开发者可自行替换成自己的视频…