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
数据可视化--碰磕
这样就实现了,这里背景图用的是一个炫酷的视频,开发者可自行替换成自己的视频…
相关链接
您阅读本篇文章共花了： 大家都在找：
vue.js：vue.js官网
javascript：javascript编辑器
echarts：echarts官网
发表评论
2024-06-20 17:40:30回复