(data) => {
var typeArray = data.data[0].type;
var dataArray = data.data[0].lists;
var timeArray = [];
var yDataArray = [];
dataArray.forEach((item, index) => {
timeArray.push(item.time.substring(5, 10))
})
typeArray.forEach((it, ind) => {
yDataArray.push([]);
dataArray.forEach((item, index) => {
if (item[it] == undefined) {
yDataArray[ind].push(0)
} else {
yDataArray[ind].push(item[it])
}
})
})
var colors = ['#1890ff', '#13b300', '#FCAF09', '#73DEBD', '#26C978', '#8CDF6C', '#FBD657', '#F56679', '#E07BCE', '#9D50E0', '#634FDA'];
var option = {
color: colors,
title: {
textStyle: {
fontWeight: 'normal',
fontSize: 32,
color: '#000'
},
left: '50%',
top: 0,
textAlign: 'center',
text: '日警情类型数量统计'
},
grid: {
top: '120',
left: '40',
right: '20',
bottom: '20'
// containLabel: true
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
textStyle: {
color: "#000"
}
},
padding: 5,
formatter: function (param) {
var resultTooltip = "
" +
"
" + param[0].name + "
" +
"
";
for (var i = 0; i < param.length; i++) {
resultTooltip +=
"" +
" " + param[i].seriesName + ": " +
"" + param[i].value + "条"
}
resultTooltip += "
";
return resultTooltip
}
},
legend: {
data: typeArray,
top: '40',
textStyle: {
fontWeight: 'normal',
fontSize: 18,
color: '#000'
},
},
xAxis: {
type: 'category',
axisLabel: {
color: '#396377',
interval: 0,
rotate: 0
},
axisLine: {
show: true,
lineStyle: {
color: '#396377'
},
width: 5
},
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(150, 164, 244, 0.1)'
}
},
data: timeArray
},
yAxis: [
{
type: 'value',
axisLabel: {
color: '#456F83'
},
axisLine: {
show: true,
lineStyle: {
color: '#456F83'
},
width: 5
},
axisTick: {
show: true
},
splitLine: {
show: false,
lineStyle: {
color: 'rgba(150, 164, 244, 0.3)'
}
},
}
],
series: []
}
for (var i = 0; i < typeArray.length; i++) {
option.series.push({
name: typeArray[i],
type: 'bar',
stack: "数量",
barWidth: '30%',
label: {
normal: {
show: false,
position: 'inside',
textStyle: {
color: '#000',
fontSize: 10,
}
}
},
data: yDataArray[i]
})
}
return option
}
(data) => {
var xData = [];
var yData = [];
data.data.forEach((item) => {
xData.push(item.cou)
yData.push(item.waringType)
})
var colors = ['#1890ff', '#13b300', '#FCAF09', '#73DEBD', '#26C978', '#8CDF6C', '#FBD657', '#F56679', '#E07BCE', '#9D50E0', '#634FDA'];
return {
color: colors,
title: {
textStyle: {
fontWeight: 'normal',
fontSize: 32,
color: '#000'
},
left: '50%',
top: 0,
textAlign: 'center',
text: '警情类型数量统计'
},
grid: {
top: '60',
left: '2%',
right: '2%',
bottom: '0',
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'none'
},
formatter: function (params) {
return params[0].name + ' : ' + params[0].value
}
},
xAxis: {
show: false,
type: 'value',
data: xData
},
yAxis: [{
type: 'category',
inverse: true,
axisLabel: {
show: true,
textStyle: {
color: '#000',
fontSize: 18
},
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
data: yData
}, {
type: 'category',
inverse: true,
axisTick: 'none',
axisLine: 'none',
show: true,
axisLabel: {
textStyle: {
color: '#000',
fontSize: 18
},
},
data: xData
}],
series: [{
name: '值',
type: 'bar',
zlevel: 1,
itemStyle: {
normal: {
barBorderRadius: 30,
color: function (params) {
var num = colors.length;
return colors[params.dataIndex % num]
},
},
},
barWidth: 20,
data: xData
}
]
};
}
(res) => {
return `
${res.marker} ${res.name}: ${res.value} 台
`
}