vue实现可视化大屏

技术要点效果图项目搭建代码编写

技术要点

vue2lessechartsv-chartsflexible 主要采用v-charts+echarts进行实现图表可视化

效果图

项目搭建

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

vue create 项目名称

项目结构:

代码编写

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

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

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

依赖安装:

npm i v-charts echarts -S

npm i -s lib-flexible

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

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

}

}

echart.vue

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

相关链接

评论可见,请评论后查看内容,谢谢!!!
 您阅读本篇文章共花了: