本文由 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 作者：玄魂
