安检区每小时安检旅客echarts #0a2a43配置项内容和展示
机场安检区每小时安检旅客信息分析
配置项如下
var dataInfo = [{
"name": "AB",
"count": [{
"name": "AB",
"point": "04",
"total": 238
},
{
"name": "AB",
"point": "05",
"total": 594
},
{
"name": "AB",
"point": "06",
"total": 952
},
{
"name": "AB",
"point": "07",
"total": 700
},
{
"name": "AB",
"point": "08",
"total": 284
},
{
"name": "AB",
"point": "09",
"total": 226
},
{
"name": "AB",
"point": "10",
"total": 281
},
{
"name": "AB",
"point": "11",
"total": 287
},
{
"name": "AB",
"point": "12",
"total": 304
},
{
"name": "AB",
"point": "13",
"total": 284
},
{
"name": "AB",
"point": "14",
"total": 269
},
{
"name": "AB",
"point": "15",
"total": 289
},
{
"name": "AB",
"point": "16",
"total": 0
},
{
"name": "AB",
"point": "17",
"total": 0
},
{
"name": "AB",
"point": "18",
"total": 0
},
{
"name": "AB",
"point": "19",
"total": 0
},
{
"name": "AB",
"point": "20",
"total": 0
},
{
"name": "AB",
"point": "21",
"total": 0
},
{
"name": "AB",
"point": "22",
"total": 0
},
{
"name": "AB",
"point": "23",
"total": 0
},
{
"name": "AB",
"point": "00",
"total": 0
},
{
"name": "AB",
"point": "01",
"total": 0
},
{
"name": "AB",
"point": "02",
"total": 0
},
{
"name": "AB",
"point": "03",
"total": 0
}
]
},
{
"name": "AC",
"count": [{
"name": "AC",
"point": "04",
"total": 236
},
{
"name": "AC",
"point": "05",
"total": 606
},
{
"name": "AC",
"point": "06",
"total": 627
},
{
"name": "AC",
"point": "07",
"total": 559
},
{
"name": "AC",
"point": "08",
"total": 300
},
{
"name": "AC",
"point": "09",
"total": 201
},
{
"name": "AC",
"point": "10",
"total": 286
},
{
"name": "AC",
"point": "11",
"total": 185
},
{
"name": "AC",
"point": "12",
"total": 417
},
{
"name": "AC",
"point": "13",
"total": 379
},
{
"name": "AC",
"point": "14",
"total": 326
},
{
"name": "AC",
"point": "15",
"total": 369
},
{
"name": "AB",
"point": "16",
"total": 0
},
{
"name": "AB",
"point": "17",
"total": 0
},
{
"name": "AB",
"point": "18",
"total": 0
},
{
"name": "AB",
"point": "19",
"total": 0
},
{
"name": "AB",
"point": "20",
"total": 0
},
{
"name": "AB",
"point": "21",
"total": 0
},
{
"name": "AB",
"point": "22",
"total": 0
},
{
"name": "AB",
"point": "23",
"total": 0
},
{
"name": "AB",
"point": "00",
"total": 0
},
{
"name": "AB",
"point": "01",
"total": 0
},
{
"name": "AB",
"point": "02",
"total": 0
},
{
"name": "AB",
"point": "03",
"total": 0
}
]
},
{
"name": "DE",
"count": [{
"name": "DE",
"point": "04",
"total": 887
},
{
"name": "DE",
"point": "05",
"total": 2207
},
{
"name": "DE",
"point": "06",
"total": 2382
},
{
"name": "DE",
"point": "07",
"total": 2202
},
{
"name": "DE",
"point": "08",
"total": 1744
},
{
"name": "DE",
"point": "09",
"total": 2105
},
{
"name": "DE",
"point": "10",
"total": 2385
},
{
"name": "DE",
"point": "11",
"total": 2238
},
{
"name": "DE",
"point": "12",
"total": 1777
},
{
"name": "DE",
"point": "13",
"total": 1760
},
{
"name": "DE",
"point": "14",
"total": 1857
},
{
"name": "DE",
"point": "15",
"total": 1898
},
{
"name": "AB",
"point": "16",
"total": 0
},
{
"name": "AB",
"point": "17",
"total": 0
},
{
"name": "AB",
"point": "18",
"total": 0
},
{
"name": "AB",
"point": "19",
"total": 0
},
{
"name": "AB",
"point": "20",
"total": 0
},
{
"name": "AB",
"point": "21",
"total": 0
},
{
"name": "AB",
"point": "22",
"total": 0
},
{
"name": "AB",
"point": "23",
"total": 0
},
{
"name": "AB",
"point": "00",
"total": 0
},
{
"name": "AB",
"point": "01",
"total": 0
},
{
"name": "AB",
"point": "02",
"total": 0
},
{
"name": "AB",
"point": "03",
"total": 0
}
]
},
{
"name": "FG",
"count": [{
"name": "FG",
"point": "04",
"total": 759
},
{
"name": "FG",
"point": "05",
"total": 1743
},
{
"name": "FG",
"point": "06",
"total": 1768
},
{
"name": "FG",
"point": "07",
"total": 1680
},
{
"name": "FG",
"point": "08",
"total": 931
},
{
"name": "FG",
"point": "09",
"total": 1108
},
{
"name": "FG",
"point": "10",
"total": 1363
},
{
"name": "FG",
"point": "11",
"total": 1173
},
{
"name": "FG",
"point": "12",
"total": 722
},
{
"name": "FG",
"point": "13",
"total": 1031
},
{
"name": "FG",
"point": "14",
"total": 852
},
{
"name": "FG",
"point": "15",
"total": 998
},
{
"name": "AB",
"point": "16",
"total": 0
},
{
"name": "AB",
"point": "17",
"total": 0
},
{
"name": "AB",
"point": "18",
"total": 0
},
{
"name": "AB",
"point": "19",
"total": 0
},
{
"name": "AB",
"point": "20",
"total": 0
},
{
"name": "AB",
"point": "21",
"total": 0
},
{
"name": "AB",
"point": "22",
"total": 0
},
{
"name": "AB",
"point": "23",
"total": 0
},
{
"name": "AB",
"point": "00",
"total": 0
},
{
"name": "AB",
"point": "01",
"total": 0
},
{
"name": "AB",
"point": "02",
"total": 0
},
{
"name": "AB",
"point": "03",
"total": 0
}
]
}
];
var seriesColor = ["#00baff", "#3de7c9", "#f5222d", "#b96bc6"];
var legendData = [];
var xaxisList = [];
var metaDate = [];
var serieData = [];
for (var i = 0; i < dataInfo.length; i++) {
legendData.push(dataInfo[i].name);
var arrGroup = [];
for (var j = 0; j < dataInfo[i].count.length; j++) {
arrGroup.push(dataInfo[i].count[j].total);
}
metaDate.push(arrGroup);
}
for (var k = 0; k < dataInfo[0].count.length; k++) {
xaxisList.push(dataInfo[0].count[k].point);
}
// console.log(legendData)
// console.log(xaxisList)
// console.log(metaDate)
for (var v = 0; v < legendData.length; v++) {
var serie = {
name: legendData[v],
type: "line",
symbol: "circle",
symbolSize: 10,
itemStyle: {
normal: {
color: seriesColor[v]
}
}, //拐点样式
lineStyle: {
// 系列级个性化折线样式
width: 1,
type: "solid",
color: seriesColor[v]
},
data: metaDate[v]
};
serieData.push(serie);
}
var option = {
backgroundColor: '#0a2a43',
tooltip: {
trigger: "axis" //鼠标经过提示
},
legend: {
icon: "rect", //icon为圆角矩形
top: "0",
right: "0",
itemWidth: 20,
itemHeight: 20,
data: legendData,
textStyle: {
//图例文字的样式
color: "#ffffff",
fontSize: 15
}
},
grid: {
left: 0,
top: "10%",
right: "1%",
bottom: "10%",
containLabel: true
},
xAxis: {
type: "category",
boundaryGap: false,
data: xaxisList,
axisLine: {
lineStyle: {
color: "#525e70",
width: 1
}
},
axisLabel: {
interval: 0,
color: "#9da3ad"
},
axisTick: {
show: false
}
},
yAxis: {
name: "人",
nameGap: 8,
type: "value",
splitLine: {
show: false
}, //去除网格线
axisLine: {
lineStyle: {
color: "#7a8290",
width: 1
}
},
axisLabel: {
color: "#9da3ad"
},
axisTick: {
show: false
}
},
color: seriesColor,
series: serieData
};
截图如下
