使?JS+Three.js+Echart開發(fā)商場室內(nèi)地圖客流信息統(tǒng)計功能
現(xiàn)在的商場管理者在管理商場的同時?臨著?些?法避免的問題?如：?員監(jiān)管不到位、效率低下、商場同質(zhì)化嚴重，?流量少等。發(fā)現(xiàn)了這些問題作為開發(fā)?員的我們怎能視?不見，我們的責任就是發(fā)現(xiàn)問題解決問題，提供更好更智能的服務(wù)。因此就此問題我們想出了相應(yīng)的解決辦法，使?
JS+Three.js+Echart開發(fā)了?個功能界?，為商場管理者提供更加?效的管理?法。
通過商場管理系統(tǒng)的相應(yīng)界?，商場管理者可實時獲取商場的?流數(shù)據(jù)、?流密度的熱?分布、可實時查看商場各處的視頻監(jiān)控信息、安保?員的實時位置信息及運動軌跡。針對突發(fā)狀況可以即時調(diào)度、快速處理。還可以依據(jù)?數(shù)據(jù)分析周邊業(yè)態(tài)情況，為制定運營策略提供數(shù)據(jù)?持等。
就以上的市場實際情況需求，開始了我的功能開發(fā)之旅。
我使?ESMap的地圖編輯器編輯好商場地圖后，開始布局規(guī)劃解決問題
開發(fā)流程如下：
?先，實現(xiàn)?個商場客流量信息的餅狀統(tǒng)計表，還有各個時間點的流量趨勢和?群密度的線性圖表。再實現(xiàn)?個控制?板，可以通過控制?板根據(jù)地圖的熱?圖查看商場各個位置客流量以及各個位置的實時視頻等，情況??了然；最后做?個可以搜索店鋪客流量及營業(yè)額情況的搜索框。
1.?便開發(fā)，先使?模擬數(shù)據(jù)創(chuàng)建圖表，投?使?后??接?后臺數(shù)據(jù)即可。
(1)使?Echart創(chuàng)建統(tǒng)計客流量的餅狀圖：
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: '內(nèi)',
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: '內(nèi)',
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創(chuàng)建?群密度線性圖表，封裝在函數(shù)lineSetA()內(nèi)：
//?群密度線性圖表
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);
}
創(chuàng)建流量趨勢線性圖表，封裝在函數(shù)lineSetB()內(nèi)：
//流量趨勢線性圖表
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);
}
切換線性圖表數(shù)據(jù)顯?實現(xiàn)：
//切換線性圖表數(shù)據(jù)顯?
$(".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');//在創(chuàng)建?個新盒?裝圖表 aa.id = 'ec3'
aa.className = 'line-cen'
$(".line-box").append(aa)
if (n == 1) {
lineSetA();//顯??群密度圖表
} el {
lineSetB();//顯?流量趨勢圖表
}
}
