traffic-volume
v1.0.5
Published
安装 ``` npm i traffic-volume ```
Downloads
24
Readme
路网流量图(Road Network Traffic Flow Map)
Getting started
安装
npm i traffic-volume引入
import road from 'traffic-volume'
import 'traffic-volume/trafficVolume.css'使用
<template>
<road :data="roadList" ref="roadRef"/>
</template>
<script>
const roadList =
[
{
'approachDirection':1,
'cdireCtion': '北',
'name':'解放路北',
'exitLaneCount': 665,
'lanes': [
{
'laneNo': '1',
'turn':"turnRight",
'count': '112',
'to':"8"
},
{
'laneNo': '1',
'turn':"turnRight",
'count': '102',
'to':"7"
},
{
'laneNo': '1',
'turn':"through",
'count': '330',
'to':"5"
},
{
'laneNo': '1',
'turn':"turnLeft",
'count': '300',
'to':"2"
},
{
'laneNo': '1',
'turn':"turnLeft",
'count': '100',
'to':"3"
},
{
'laneNo': '1',
'turn':"turnAround",
'count': '15',
'to':"1"
},
],
},
{
'approachDirection':2,
'cdireCtion': '东北',
'name':'解放路北',
'exitLaneCount': 665,
'lanes': [
{
'laneNo': '1',
'turn':"turnRight",
'count': '12',
'to':"8"
},
{
'laneNo': '1',
'turn':"through",
'count': '330',
'to':"6"
},
{
'laneNo': '1',
'turn':"turnLeft",
'count': '300',
'to':"3"
},
{
'laneNo': '1',
'turn':"turnLeft",
'count': '200',
'to':"4"
},
{
'laneNo': '1',
'turn':"turnAround",
'count': '15',
'to':"2"
},
],
},
{
'approachDirection': 3,
'cdireCtion': '东',
'name':'北京路东',
'exitLaneCount': 950,
'lanes': [
{
'laneNo': '1',
'turn':"turnRight",
'count': '150',
'to':"1"
},
{
'laneNo': '1',
'turn':"turnRight",
'count': '150',
'to':"8"
},
{
'laneNo': '1',
'turn':"through",
'count': '600',
'to':"7"
},
{
'laneNo': '1',
'turn':"turnLeft",
'count': '80',
'to':"4"
},
{
'laneNo': '1',
'turn':"turnLeft",
'count': '80',
'to':"5"
},
],
},
{
'approachDirection':4,
'cdireCtion': '东南',
'name':'解放路东南',
'exitLaneCount': 665,
'lanes': [
{
'laneNo': '1',
'turn':"turnRight",
'count': '312',
'to':"1"
},
{
'laneNo': '1',
'turn':"turnRight",
'count': '312',
'to':"2"
},
{
'laneNo': '1',
'turn':"through",
'count': '30',
'to':"8"
},
{
'laneNo': '1',
'turn':"turnLeft",
'count': '300',
'to':"5"
},
{
'laneNo': '1',
'turn':"turnLeft",
'count': '300',
'to':"7"
},
{
'laneNo': '1',
'turn':"turnAround",
'count': '15',
'to':"4"
},
],
},
{
'approachDirection': 5,
'cdireCtion': '南',
'name':'解放路南',
'exitLaneCount': 710,
'lanes': [
{
'laneNo': '1',
'turn':"turnRight",
'count': '450',
'to':"3"
},
{
'laneNo': '1',
'turn':"through",
'count': '450',
'to':"1"
},
{
'laneNo': '1',
'turn':"turnLeft",
'count': '450',
'to':"7"
},
],
},
{
'approachDirection':6,
'cdireCtion': '西南',
'name':'解放路西南',
'exitLaneCount': 665,
'lanes': [
{
'laneNo': '1',
'turn':"turnRight",
'count': '312',
'to':"3"
},
{
'laneNo': '1',
'turn':"turnRight",
'count': '312',
'to':"4"
},
{
'laneNo': '1',
'turn':"through",
'count': '330',
'to':"2"
},
{
'laneNo': '1',
'turn':"turnLeft",
'count': '300',
'to':"7"
},
{
'laneNo': '1',
'turn':"turnAround",
'count': '15',
'to':"6"
},
],
},
{
'approachDirection': 7,
'cdireCtion': '西',
'name':'北京路西',
'exitLaneCount': 1362,
'lanes': [
{
'laneNo': '1',
'turn':"turnRight",
'count': '300',
'to':"6"
},
{
'laneNo': '1',
'turn':"turnRight",
'count': '300',
'to':"5"
},
{
'laneNo': '1',
'turn':"through",
'count': '200',
'to':"3"
},
{
'laneNo': '1',
'turn':"turnLeft",
'count': '50',
'to':"1"
},
{
'laneNo': '1',
'turn':"turnLeft",
'count': '50',
'to':"8"
},
],
},
{
'approachDirection':8,
'cdireCtion': '西北',
'name':'解放路西北',
'exitLaneCount': 665,
'lanes': [
{
'laneNo': '1',
'turn':"turnRight",
'count': '312',
'to':"5"
},
{
'laneNo': '1',
'turn':"through",
'count': '330',
'to':"4"
},
{
'laneNo': '1',
'turn':"turnLeft",
'count': '300',
'to':"3"
},
{
'laneNo': '1',
'turn':"turnAround",
'count': '15',
'to':"8"
},
],
}
];
const roadRef=ref(null);
onMounted(()=>{
roadRef.value.initRoad({data:roadList})
})
</script>方法
使用方法
##效果
