(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} 台
` }