本文由 VisActor 用户访谈整理而来,文档内容已经脱敏。
业务场景介绍
车辆智能管理监控系统,提供给车辆管理人员和司机使用。主要功能包括如下内容:
- 车辆监控
- 指挥调度
- 统计分析
- 其他功能
VisActor 实践
目前系统中使用的可视化组件是VisActor 的表格可视化组件 VTable,用来展示某一辆车的轨迹数据,并且使用表格和地图进行联动。
下面对几个核心功能进行讲解。
展示轨迹明细数据
由于轨迹数据上报频繁,需要表格支持至少万级别的无分页呈现,通常需要呈现几十万、百万的轨迹数据。 这里对关键数据进行梳理,然后使用VTable的 ListTable 进行数据展示,可以解决dom表格的的性能问题。无卡顿,效果丝滑。
这里使用VTable的方式做简单介绍,首先通过 columns 做行头的定义。
const columns=[
{
title: '车牌号',
field: 'plateNum',
disableSelect:true,
disableHeaderSelect:true,
headerStyle:{
bgColor:"#F5F7FA",
fontSize:15,
fontWeight:"normal"
},
style:{
color:"#606266",
},
width: 120,
},
(略...)
]
const option = {
records:this.tableData,
columns:columns,
widthMode:'standard',
select:{
disableSelect:true,
disableHeaderSelect:true
},
hover:{
disableHeaderHover:true
},
tooltip:{
isShowOverflowTextTooltip: true,
}
};
tableInstance = new VTable.ListTable(document.getElementById("tableContainer"), option);
对“车辆位置”一列进行了自定义渲染,需要实现自定义按钮的一个样式。
这里借助列的自定义渲染能力,结合VTable提供的 rect
和 text
图元进行样式的设置,核心代码如下:
{
title: '车辆位置',
field: 'address',
customRender(args){
elements.push({
type: 'rect',
fill: '#143D7D',
x: left+40,
y: 3,
radius:6,
width: 55,
height:30,
pickable:true,
cursor:"pointer"
});
elements.push({
type: 'text',
font: '14px Helvetica Neue',
fill: '#ffffff',
x: left+53,
y: 22,
text: "位置",
width: 30,
height:30,
cursor:"pointer"
});
}
return {
elements,
expectedHeight:top+20,
expectedWidth: maxWidth+20,
}
},
};
轨迹定位
该功能要求点击表格行数据进行轨迹线路定位,在地图上展示轨迹和定位信息。
这里没有找到VTable的行点击事件,所以监听了单元格事件,通过相关信息进行定位。
核心代码如下:
tableInstance.on('click_cell', args => {
const { col, row,originData,target } = args;
if(col==4&&target.type=='rect'){
that.geo2Address(originData,row)
}else{
this.$refs.bmap.dimensionMarker({lon:originData.longitude,lat:originData.latitude,time:originData.createtime})
}
})
轨迹播放
根据车辆行驶轨迹数据在地图上动态演示车辆的轨迹变化,改变表格中对应的行背景色并向上自动滚动。
这里实现方案比较简单,将走过的位置数据保存到数组,调用vtable的updateTheme方法,数组匹配行数据返回背景色,根据表格行高和行驶过的行数计算向上滚动的距离,设置vtable的scrollTop属性。
核心代码
isChangeBg(pitem,scrolldis){
requestAnimationFrame(()=>{
let to=null
this.scrolldis=scrolldis
this.colorArr.push({longitude:pitem.lng,latitude:pitem.lat})
to=this.updateTheme()
this.tableInstance&&(this.tableInstance.scrollTop=scrolldis)
to&&this.tableInstance.updateTheme(to)
})
},
updateTheme(){
let that=this
const themeobj=VTable.themes.DEFAULT.extends({
bodyStyle: {
bgColor(args) {
const { row, col } = args;
const record = args.table.getRecordByCell(col, row);
const fobj=that.colorArr.find(ele=>ele.longitude==record.longitude&&ele.latitude==record.latitude)
if(fobj){
return "#13ce66"
}
}
}
})
return themeobj
},
存在的问题
更新主题问题
问题描述
可以通过接口更新指定行的样式。
解决方案
后续VTable可能增加针对单元格或者整行整列的样式更新接口,或者是提供刷新单元格或者整行整列的接口。
行操作问题
问题描述
希望可以增加对行的操作,整行的点击事件,选中事件等,行属性配置,单独改变行数据,可以改变列的隐藏显示。
解决方案
VTable已经规划了行选的功能,事件方面也完善。
单独改变行数据已经有了接口updateRecords。
改变列的隐藏显示后续也会增加对应的接口来提供这个能力;
本文作者获得由VisActor 提供的字节新年礼包一份
欢迎交流
欢迎大家与我们进行交流:
1)VisActor 微信订阅号留言(可以通过订阅号菜单加入微信群):
2)飞书群:
3)VisActor 官网:www.visactor.io/
今夜无月,期待你点亮星空,感谢Star:
github:github.com/VisActor/VT…
更多参考:
- VTable——不只是高性能的多维数据分析表格,开源,免费,百万数据秒级渲染
- VisActor——面向叙事的智能可视化解决方案 – 掘金
- 火山引擎DataWind产品可视化能力揭秘 – 掘金
- 更多 VTable 示例
本文为稀土掘金技术社区首发签约文章,30天内禁止转载,30天后未获授权禁止转载,侵权必究!
原文链接:https://juejin.cn/post/7340574992256204809 作者:玄魂