任务新增导出

zhongrj

2023-06-27 d74b495736f0c04522ec54274b70fed0ded2878d

 public/map/widgets/realTimePolice/1.js

New file
@@ -0,0 +1,284 @@
(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 = "<div>" +
                    "<div style='text-align:center;'>" + param[0].name + "</div>" +
                    "<div style='padding-top:5px;'>";
                for (var i = 0; i < param.length; i++) {
                    resultTooltip +=
                        "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:" + param[i].color + ";'></span>" +
                        "<span style=''> " + param[i].seriesName + ": </span>" +
                        "<span style='color:" + param[i].color + "'>" + param[i].value + "</span></span><span>条</span></br>"

                }
                resultTooltip += "</div>";

                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 `<div> ${res.marker} ${res.name}: ${res.value} 台 </div>`
}