李维亮_前端开发攻城狮 - 2019年11月
type: channel
link: https://www.liweiliang.com/2019/11/
description: 行胜于言，自强不息！纸上得来终觉浅，绝知此事要躬行！
items: echarts横坐标轴为时间时,自定义显示时间粒度(时间间隔)
items: 基于video.js来实现vue的视频播放功能
items: element-ui table表格根据slot来实现自定义数据为空是的提示样式

echarts横坐标轴为时间时,自定义显示时间粒度(时间间隔)
type: item
date: 2019-11-29T17:18:15+08:00
description: 最近参加一个开源项目在使用echarts,发现好多人遇到需要自定义X轴时间刻粒度这个问题，为此发篇文章给大家讲解一下1、代码判断xAxis: { type: 'time', splitLine: { show: false }, interval: 3600, // 设置x轴时间间隔 axisLabel: { formatter: function(value, index) { return liangTools.unix2hm(value) } } }, 首先要把xAxis 显示类型设置成time，然后设置对应X轴时间间隔，也就interval对应的参数，这个大家需要注意下，如果后台返回的时间戳是毫秒级的那么axisLabel下formatter定义中返回日期也是根据对应来进行转换，如果是基于秒的那么formatter也要基于秒来去转换日期格式，否则会不匹配然后为了以后偷懒可以，把日期转换方法及毫秒转换秒的方法都贴上unix2hm: function(v) { if (/^(-)?\d{1,10}$/.test(v)) { v = v * 1000 } else if (/^(-)?\d{1,13}$/.test(v)) { v = v * 1000 } else if (/^(-)?\d{1,14}$/.test(v)) { v = v * 100 } else if (/^(-)?\d{1,15}$/.test(v)) { v = v * 10 } else if (/^(-)?\d{1,16}$/.test(v)) { v = v * 1 } else { alert('时间戳格式不正确') return } const dateObj = new Date(v) const hours = dateObj.getHours() > 10 ? dateObj.getHours() : '0' + dateObj.getHours() const minutes = dateObj.getMinutes() < 10 ? dateObj.getMinutes() + '0' : dateObj.getMinutes() const UnixTimeToDate = hours + ':' + minutes return UnixTimeToDate }, millToSecond: function(time) { return Math.round(time / 1000) } 最后看先完成后的显示效果

基于video.js来实现vue的视频播放功能
type: item
date: 2019-11-18T10:47:00+08:00
description: video.js是一个很好的视频播放插件，但是如果移植到vue上相信很多小伙伴很苦恼，是不是网上搜了一堆，发现不好使，我也是踩坑了，后来发现官方文档上就有，好尴尬，建议以后学习先看看官方文档，会有惊喜的。1.首先安装video.js，然后在main.js中引入npm i video.js -D //安装 //main.js 引入 import Video from 'video.js' import 'video.js/dist/video-js.css' Vue.prototype.$video = Video; 1.先官方基础的使用方法，自定一个组件，说明一下在使用video.js组件时需要在beforeDestroy增加一个dispose()方法，来销毁它，这样就可以解决重复载入报错问题了。 使用的时候 <video-player :options="videoOptions"/>

element-ui table表格根据slot来实现自定义数据为空是的提示样式
type: item
date: 2019-11-18T10:40:00+08:00
description: 使用vue就避免不了用element-ui使用table总是遇到设计小姐姐搞出来的不一样的空提示效果代码只要在el-table里面增加如下代码就可以了 暂无未推修任务， 新建推修任务 变身后的效果