使⽤JS+Three.js+Echart开发商场室内地图客流信息统计功能
现在的商场管理者在管理商场的同时⾯临着⼀些⽆法避免的问题⽐如：⼈员监管不到位、效率低下、商场同质化严重，⼈流量少等。发现了这些问题作为开发⼈员的我们怎能视⽽不见，我们的责任就是发现问题解决问题，提供更好更智能的服务。因此就此问题我们想出了相应的解决办法，使⽤
JS+Three.js+Echart开发了⼀个功能界⾯，为商场管理者提供更加⾼效的管理⽅法。
通过商场管理系统的相应界⾯，商场管理者可实时获取商场的⼈流数据、⼈流密度的热⼒分布、可实时查看商场各处的视频监控信息、安保⼈员的实时位置信息及运动轨迹。针对突发状况可以即时调度、快速处理。还可以依据⼤数据分析周边业态情况，为制定运营策略提供数据⽀持等。
就以上的市场实际情况需求，开始了我的功能开发之旅。
我使⽤ESMap的地图编辑器编辑好商场地图后，开始布局规划解决问题
开发流程如下：
⾸先，实现⼀个商场客流量信息的饼状统计表，还有各个时间点的流量趋势和⼈群密度的线性图表。再实现⼀个控制⾯板，可以通过控制⾯板根据地图的热⼒图查看商场各个位置客流量以及各个位置的实时视频等，情况⼀⽬了然；最后做⼀个可以搜索店铺客流量及营业额情况的搜索框。
1.⽅便开发，先使⽤模拟数据创建图表，投⼊使⽤后⾃⾏接⼊后台数据即可。
(1)使⽤Echart创建统计客流量的饼状图：
function circleSet() {
myChart1 = echarts.ElementById('ec1'));
myChart2 = echarts.ElementById('ec2'));
var color= ['#b679fe', '#6271fd','#94d96c', '#0fbdd9','#f0f0f0'];
var dataStyle = {
normal: {
label: {
show: fal
},
labelLine: {
show: fal
},
shadowBlur: 40,
borderWidth: 10,
shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
}
};
//第⼀个饼状图
var optionCircleA = {
backgroundColor: '#fff',
title: {
text: '52452',
x: 'center',
y: 'center',
textStyle: {
fontWeight: 'normal',
fontSize: 14,
color: "#b679fe",
}
},
ries: [{
name: 'Line 1',
type: 'pie',
clockWi: fal,
radius: [37, 45],
center:['50%','50%'],
itemStyle: dataStyle,
hoverAnimation: fal,
startAngle: 90,
label:{
borderRadius:'10',
},
data: [{
value: 54.6,
name: '外',
itemStyle: {
normal: {
color: aphic.LinearGradient(0, 0, 0, 1, [{
offt: 0,
color:color[0]
}, {
offt: 1,
color: color[1]
}])
}
}
},
{
value: 0,
name: '',
tooltip: {
show: fal
},
},
]
},
{
name: 'Line 2',
type: 'pie',
clockWi: fal,
radius: [30, 32],
center:['50%','50%'],
itemStyle: dataStyle,
hoverAnimation: fal,
startAngle: 90,
data: [{
value: 56.7,
name: '内',
itemStyle: {
normal: {
color: aphic.LinearGradient(0, 0, 0, 1, [{ offt: 0,
color: color[4]
}, {
offt: 1,
color: color[4]
}])
}
}
},
{
value: 0,
name: '',
tooltip: {
show: fal
},
},
]
},
]
};
//第⼆个饼状图
var optionCircleB = {
backgroundColor: '#fff',
title: {
text: '15386',
x: 'center',
y: 'center',
textStyle: {
fontWeight: 'normal',
fontSize: 14,
color: "#94d96c",
}
},
ries: [{
name: 'Line 1',
type: 'pie',
clockWi: fal,
radius: [37, 45],
center:['50%','50%'],
itemStyle: dataStyle,
hoverAnimation: fal,
startAngle: 90,
label:{
borderRadius:'10',
},
data: [{
value: 54.6,
name: '外',
itemStyle: {
normal: {
color: aphic.LinearGradient(0, 0, 0, 1, [{ offt: 0,
color:color[2]
}, {
offt: 1,
color: color[3]
}])
}
}
},
{
value: 0,
name: '',
tooltip: {
show: fal
},
},
]
},
{
name: 'Line 2',
type: 'pie',
clockWi: fal,
radius: [30, 32],
center:['50%','50%'],
itemStyle: dataStyle,
hoverAnimation: fal,
startAngle: 90,
data: [{
value: 56.7,
name: '内',
itemStyle: {
normal: {
color: aphic.LinearGradient(0, 0, 0, 1, [{ offt: 0,
color: color[4]
}, {
offt: 1,
color: color[4]
}])
}
}
},
{
value: 0,
name: '',
tooltip: {
show: fal
},
},
]
},
]
};
myChart1.tOption(optionCircleA);
myChart2.tOption(optionCircleB);
}
效果如下图：
(2)使⽤echart创建⼈群密度线性图表，封装在函数lineSetA()内：
//⼈群密度线性图表
function lineSetA() {
myChart3 = echarts.ElementById('ec3'));
var colors = ['#12c3f8', '#4384d7'];
optionLineA = {
color: colors,
visualMap: [{
show: fal,
type: 'continuous',
riesIndex: 0,
color: colors,
}],
xAxis: {
type: 'category',
data: ['0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22'],
show: true,
position: {
bottom: 10,
show: fal,
},
onZero: fal,
axisLine: {
lineStyle: {
width: 0,
}
}
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} ⼈',
fontSize: 10,
},
axisLine: {
lineStyle: {
width: 0,
}
},
minInterval: 300,
},
grid: [{
top: '40',
bottom: '25',
left: '50',
right: '10'
}],
ries: [{
data: [ 0, 10, 20, 30, 40, 100, 600, 900, 880, 900, 1100, 1000], type: 'line',
smooth: true,
markPoint: {
data: [
{
name: '880',
coord: ['16','880'],
value: '880',
],
label: {
show: true,
},
}
}]
};
myChart3.tOption(optionLineA);
}
创建流量趋势线性图表，封装在函数lineSetB()内：
//流量趋势线性图表
function lineSetB() {
myChart4 = echarts.ElementById('ec3'));
var colors = ['#12c3f8', '#4384d7'];
var optionLineB = {
color: colors,
visualMap: [{
show: fal,
type: 'continuous',
riesIndex: 0,
min: 0,
max: 600,
borderWidth: 3,
color: colors,
}],
xAxis: {
type: 'category',
data: ['0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22'],
show: true,
},
onZero: fal,
axisLine: {
lineStyle: {
width: 0,
}
}
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} ⼈/平⽅⽶',
fontSize: 10,
},
axisLine: {
lineStyle: {
width: 0,
}
},
minInterval: 0.5,
},
grid: [{
top: '40',
bottom: '25',
left: '70',
right: '10'
}],
ries: [{
data: [ 0, 1, 2, 3, 4, 3, 2, 3, 3.5, 2, 1, 3],
type: 'line',
smooth: true,
markPoint: {
data: [
{
name: '4',
coord: ['14','3'],
value: '4',
}
],
label: {
show: true,
},
}
}]
};
myChart4.tOption(optionLineB);
}
切换线性图表数据显⽰实现：
//切换线性图表数据显⽰
$(".list-b .title-box .t-a").click(function() {//点击流量趋势
$(".list-b .title-box .t-b").removeClass('active');//移除当前样式
$(this).addClass('active');//给点击添加新样式
resizeLineA();
})
$(".list-b .title-box .t-b").click(function() {//点击⼈群密度
$(".list-b .title-box .t-a").removeClass('active');
$(this).addClass('active');
resizeLineA(1);
})
更换装图表的盒⼦（div）和线性图表信息：
function resizeLineA(n) {
$(".line-cen").remove();//先移除原有的盒⼦
var aa = ateElement('div');//在创建⼀个新盒⼦装图表 aa.id = 'ec3'
aa.className = 'line-cen'
$(".line-box").append(aa)
if (n == 1) {
lineSetA();//显⽰⼈群密度图表
} el {
lineSetB();//显⽰流量趋势图表
}
}
