jjsp_web/bns/js/supplement/monitoring_coverage_echarts.js

let myChart = echarts.init(document.getElementById('echarts-one'));
let myChart2 = echarts.init(document.getElementById('echarts-two'));
let myChart3 = echarts.init(document.getElementById('echarts-three'));
let myChart4 = echarts.init(document.getElementById('echarts-four'));
// echarts地图
let uploadedDataURL2 = "../../js/compreDisplay/anhui/anhui.json";
let myChart5 = echarts.init(document.getElementById('echarts-map2'));

function initEchartsOne(list) {
    let dataX = []; //名称
    let dataY = []; //数据
    $.each(list, function (index, item) {
        dataX.push(item.num);
        dataY.push(item.timeValue);
    })
    let option = {
        backgroundColor: 'transparent',
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
            },
            formatter: function (params) {
                console.error(params);
                let result = '';
                $.each(list, function (index, item) {
                    if (parseInt(params[0].name) === item.num) {
                        result += params[0].marker + '球机编号：' + item.name + '<br>' + '时长：' + item.time + '<br>'
                    }
                })
                return result;
            },
        },
        grid: {
            top: '10%',
            right: '10%',
            left: '15%',
            bottom: '10%',
        },
        dataZoom: [
            {
                type: "inside",
                zoomOnMouseWheel: false,
                moveOnMouseMove: true,
                moveOnMouseWheel: true,
                startValue: 0,
                endValue: 9,
            },
        ],
        xAxis: [
            {
                type: 'category',
                data: dataX,
                axisLine: {
                    lineStyle: {
                        color: 'rgba(66, 192, 255, .3)',
                    },
                },
                axisLabel: {
                    interval: 0,
                    margin: 10,
                    color: '#05D5FF',
                    textStyle: {
                        fontSize: 11,
                    },
                    rotate: '0',
                },
                axisTick: {//刻度
                    show: false,
                },
            },
        ],
        yAxis: [
            {
                axisLabel: {
                    padding: [3, 0, 0, 0],
                    formatter: '{value}',
                    color: 'rgba(95, 187, 235, 1)',
                    textStyle: {
                        fontSize: 11,
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(66, 192, 255, .3)',
                    },
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,0)',
                    },
                },
            },
        ],
        series: [
            {
                type: 'bar',
                data: dataY,
                barWidth: '10',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: 'rgba(5, 213, 255, 1)', // 0% 处的颜色
                                },
                                {
                                    offset: 0.98,
                                    color: 'rgba(5, 213, 255, 0)', // 100% 处的颜色
                                },
                            ],
                            false
                        ),
                        shadowColor: 'rgba(5, 213, 255, 1)',
                        shadowBlur: 4,
                    },
                },
                label: {
                    normal: {
                        show: false,
                        lineHeight: 10,
                        formatter: '{c}',
                        position: 'top',
                        textStyle: {
                            color: '#fff',
                            fontSize: 10,
                        },
                    },
                },
            },
        ],
    };

    myChart.setOption(option, true);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}

function initEchartsTwo(list) {
    let nameList = [];
    let dataList = []
    $.each(list, function (index, item) {
        nameList.push(item.name);
        dataList.push(item.num);
    })
    nameList = nameList.reverse();
    dataList = dataList.reverse();
    option = {
        backgroundColor: 'transparent',
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
            },
        },
        grid: {
            left: '18%',
            right: '10%',
            bottom: '8%',
            top: '5%',
        },
        xAxis: {
            show: true,
            type: 'value',
            name: '',
            // 坐标轴线
            axisLine: {
                show: false,
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.5)',
                    type: 'dashed'
                },
            },
            // 坐标轴小标记
            axisTick: {
                show: false,
            },
            // 坐标轴文本标签
            axisLabel: {
                textStyle: {
                    color: 'rgba(95, 187, 235, 1)',
                },
            },
            // 分隔线
            splitLine: {
                show: false,
                lineStyle: {
                    color: 'rgba(61, 137, 247, 1)',
                },
            },
            // 分隔区域
            splitArea: {
                show: false,
            },
        },
        yAxis: {
            data: nameList,
            axisLine: {
                lineStyle: {
                    color: 'rgba(66, 192, 255, .3)',
                },
            },
            axisLabel: {
                textStyle: {
                    color: 'rgba(95, 187, 235, 1)',
                },
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: false,
            },
        },
        series: [
            {
                name: '数量',
                type: 'bar',
                zlevel: 2,
                barWidth: 10,
                itemStyle: {
                    normal: {
                        barBorderRadius: 0,
                        label: {
                            show: true,
                            position: 'right',
                            color: '#fff',
                            // fontFamily: 'Bebas',
                        },
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 1,
                            y2: 0,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: 'rgba(61, 137, 247, 0)', //  0%  处的颜色
                                },
                                {
                                    offset: 0.7,
                                    color: 'rgba(5, 213, 255, 1)', //  100%  处的颜色
                                },
                                {
                                    offset: 1,

                                    color: 'rgba(5, 213, 255, 0.7)', //  100%  处的颜色
                                },
                            ],
                            global: false, //  缺省为  false
                        },
                        shadowColor: 'rgba(5, 213, 255, 1)',
                    },
                },
                data: dataList,
            },
        ],
    };

    myChart2.setOption(option, true);
    window.addEventListener("resize", function () {
        myChart2.resize();
    });
}

function initEchartsThree(list) {
    let dataX = []; //名称
    let dataY = []; //数据
    $.each(list, function (index, item) {
        dataX.push(item.num);
        dataY.push(item.watchTime);
    })
    let option = {
        backgroundColor: 'transparent',
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
            },
            formatter: function (params) {
                console.error(params);
                let result = '';
                $.each(list, function (index, item) {
                    if (parseInt(params[0].name) === item.num) {
                        result += params[0].marker + '球机编号：' + item.name + '<br>' + '观看次数：' + item.watchTime + '<br>'
                    }
                })
                return result;
            },
        },
        grid: {
            top: '10%',
            right: '10%',
            left: '10%',
            bottom: '10%',
        },
        dataZoom: [
            {
                type: "inside",
                zoomOnMouseWheel: false,
                moveOnMouseMove: true,
                moveOnMouseWheel: true,
                startValue: 0,
                endValue: 9,
            },
        ],
        xAxis: [
            {
                type: 'category',
                data: dataX,
                axisLine: {
                    lineStyle: {
                        color: 'rgba(66, 192, 255, .3)',
                    },
                },
                axisLabel: {
                    interval: 0,
                    margin: 10,
                    color: '#05D5FF',
                    textStyle: {
                        fontSize: 11,
                    },
                    rotate: '0',
                },
                axisTick: {//刻度
                    show: false,
                },
            },
        ],
        yAxis: [
            {
                axisLabel: {
                    padding: [3, 0, 0, 0],
                    formatter: '{value}',
                    color: 'rgba(95, 187, 235, 1)',
                    textStyle: {
                        fontSize: 11,
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(66, 192, 255, .3)',
                    },
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,0)',
                    },
                },
            },
        ],
        series: [
            {
                type: 'bar',
                data: dataY,
                barWidth: '10',
                itemStyle: {
                    normal: {
                        color: function (params) {
                            return new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    {
                                        offset: 0,
                                        color: getColor(params.value), // 100% 处的颜色
                                    },
                                    {
                                        offset: 0.98,
                                        color: '#2066ad',
                                    },
                                ],
                                false
                            )
                        },
                        // shadowColor: 'rgba(5, 213, 255, 1)',
                        shadowBlur: 4,
                    },
                },
                label: {
                    normal: {
                        show: true,
                        lineHeight: 10,
                        formatter: '{c}',
                        position: 'top',
                        textStyle: {
                            color: '#fff',
                            fontSize: 10,
                        },
                    },
                },
            },
        ],
    };
    function getColor(value) {
        let endColor = '#2066ad';
        if (value <= 2) {
            endColor = '#3f67a7';
        } else if (value > 2 && value <= 4) {
            endColor = '#5e6296';
        } else if (value > 4 && value <= 6) {
            endColor = '#7f618a';
        } else if (value > 6 && value <= 8) {
            endColor = '#a55a77';
        } else if (value > 8 && value <= 10) {
            endColor = '#c95665';
        } else if (value > 10 && value <= 12) {
            endColor = '#e45256';
        } else if (value > 12 && value <= 14) {
            endColor = '#ef5050';
        } else {
            endColor = '#f33';
        }
        return endColor;
    }
    myChart3.setOption(option, true);
    window.addEventListener("resize", function () {
        myChart3.resize();
    });
}

function initEchartsFour(list) {
    var data = [
        {
            name: "二级风险",
            value: list[0].twoRate,
        },
        {
            name: "三级风险",
            value: list[0].threeRate,
        },
        {
            name: "四级风险",
            value: list[0].fourRate,
        },
        {
            name: "五级风险",
            value: list[0].fiveRate,
        },
    ];
    var titleArr = [],
        seriesArr = [];
    colors = [
        ["#DD690B", "#DD690B50"],
        ["#FFE91F", "#FFE91F50"],
        ["#2aa998", "#2aa99850"],
        ["#70e180", "#70e18050"],
        ["#a181fc", "#e3d9fe"],
    ];
    data.forEach(function (item, index) {
        titleArr.push({
            text: item.name,
            left: index * 26 + 11 + "%",
            top: "80%",
            textAlign: "center",
            textStyle: {
                fontWeight: "normal",
                fontSize: "14",
                color: colors[index][0],
                textAlign: "center",
            },
        });
        seriesArr.push({
            name: item.name,
            type: "pie",
            clockWise: false,
            radius: [30, 40],
            itemStyle: {
                normal: {
                    color: colors[index][0],
                    shadowColor: colors[index][0],
                    shadowBlur: 0,
                    label: {
                        show: false,
                    },
                    labelLine: {
                        show: false,
                    },
                },
            },
            hoverAnimation: false,
            center: [index * 26 + 11 + "%", "50%"],
            data: [
                {
                    value: item.value,
                    label: {
                        normal: {
                            formatter: function (params) {
                                return params.value + "%";
                            },
                            position: "center",
                            show: true,
                            textStyle: {
                                fontSize: "15",
                                fontWeight: "bold",
                                color: colors[index][0],
                            },
                        },
                    },
                },
                {
                    value: 100 - item.value,
                    name: "invisible",
                    itemStyle: {
                        normal: {
                            color: colors[index][1],
                        },
                        emphasis: {
                            color: colors[index][1],
                        },
                    },
                },
            ],
        });
    });

    option = {
        backgroundColor: "transparent",
        title: titleArr,
        series: seriesArr,
    };

    myChart4.setOption(option, true);
    window.addEventListener("resize", function () {
        myChart4.resize();
    });
}

/*地图风险等级选中*/
$(".check-risk").click(function (e) {
    let checkedName = $(this).find('p').eq(0).attr("checkedName");
    let isCheck = $(this).attr("isCheck");
    if (checkedName === '' && isCheck === '1') {
        $('.check-risk').each(function () {
            if ($(this).attr("isCheck") === '1') {
                $(this).attr("isCheck", '0')
                let checkedValue = $(this).find('p').eq(0).attr("checkedName");
                $(this).find('img').eq(0).attr("src", setRiskIcon(checkedValue, 1))
            }
        })
    } else if (checkedName === '' && isCheck === '0') {
        $('.check-risk').each(function () {
            if ($(this).attr("isCheck") === '0') {
                $(this).attr("isCheck", '1')
                let checkedValue = $(this).find('p').eq(0).attr("checkedName");
                $(this).find('img').eq(0).attr("src", setRiskIcon(checkedValue, 2))
            }
        })
    } else if (checkedName !== '' && isCheck === '1') {
        $(this).attr("isCheck", '0')
        $(this).find('img').eq(0).attr("src", setRiskIcon(checkedName, 1))
    } else if (checkedName !== '' && isCheck === '0') {
        $(this).attr("isCheck", '1')
        $(this).find('img').eq(0).attr("src", setRiskIcon(checkedName, 2))
    }
    mapSearch();
    // 设置风险等级选中样式
    function setRiskIcon(value, type) {
        if (value && type === 1) {
            return '../../img/title-btn/no-check/risk-' + value + '-nocheck.png';
        } else if (!value && type === 1) {
            return '../../img/title-btn/no-check/risk-1-nocheck.png';
        } else if (value && type === 2) {
            return '../../img/title-btn/check/risk-' + value + '-check.png';
        } else if (!value && type === 2) {
            return '../../img/title-btn/check/risk-1-check.png';
        }
    }
});

/*地图关键字搜索、风险等级选中*/
function mapSearch() {
    let selRiskList = [];
    mapPointList.splice(0, mapPointList.length);
    $('.check-risk').each(function () {
        if ($(this).attr("isCheck") === '1') {
            if ($(this).find('p').eq(0).attr("checkedName")) {
                selRiskList.push($(this).find('p').eq(0).attr("checkedName"))
            }
        }
    })
    if (selRiskList.length) {
        $.each(selRiskList, function (index, item) {
            let dataList = mainMapPointList.filter(item2 => {
                return item2.riskLevel === item
            })
            $.each(dataList, function (index3, item3) {
                mapPointList.push(item3)
            })
        })
    }
    console.error(mapPointList);
    loadMap(mapPointList);
}

function loadMap(dataMap) {
    $.getJSON(uploadedDataURL2, function (geoJson) {
        echarts.registerMap('anhui', geoJson);
        myChart2.hideLoading();
        let max = 480,
            min = 1.2; // todo
        let maxSize4Pin = 100,
            minSize4Pin = 100;

        let convertData = function (data) {
            let res = [];
            for (let i = 0; i < data.length; i++) {
                let geoCoord = data[i].coordinate;
                if (geoCoord) {
                    res.push({
                        name: data[i].name,
                        address: data[i].address,
                        riskLevel: data[i].riskLevel,
                        coordinate: data[i].coordinate,
                        value: geoCoord.concat(data[i].name, data[i].riskLevel),
                    });
                }
            }
            return res;
        };

        let option = {
            silent: false,
            backgroundColor: 'transparent',
            textStyle: {
                fontSize: 15,
                fontWeight: 'bold',
                color: 'red'
            },
            tooltip: {
                trigger: 'item',
                enterable: true,
                position: function (pos, params, dom, rect, size) {
                    if ($(dom).children($('p')).length === 0) $(dom).css('display', 'none')
                    pos = [pos[0], pos[1] + 10];
                    return pos;
                },
                backgroundColor: 'rgba(14, 17, 28,0.63)', //设置背景颜色
                textStyle: {
                    color: '#fff'
                },
                borderColor: "#174FDD",
                formatter: function (params) {
                    if (params.data)
                        return (
                            '<p class="map-p">球机编号:' + params.data.name + '</p>' +
                            '<p class="map-p">风险等级:' + setRiskLevelColor(params.data.riskLevel) + '</p>' +
                            '<p class="map-p">地址:' + params.data.address + '</p>'
                        )
                },
                // extraCssText: "background:url('../../img/tc.png') 100% 100% repeat;",
                extraCssText: "max-width:300px;height:auto;word-break:break-all;white-space:pre-wrap;",

            },
            geo: {
                show: true,
                map: 'anhui',
                aspectScale: 0.8,
                label: {
                    normal: {
                        show: true,
                        textStyle: {
                            color: '#fff',
                            fontFamily: 'Alibaba PuHuiTi R'
                        },
                        rotate: -20,
                    },
                    emphasis: {
                        show: true,
                    }
                },
                roam: false,
                scaleLimit: {
                    max: max,
                    min: min
                },
                itemStyle: {
                    normal: {
                        areaColor: '#275D74',
                        borderColor: '#5EB1B3',
                        borderWidth: 2,
                        shadowColor: 'rgba(80, 172, 243, 0.5)',
                        shadowBlur: 30
                    },
                    emphasis: {
                        areaColor: '#2B91B7',
                    }
                },
                tooltip: {
                    show: true
                }
            },
            series: [{
                name: '在线',
                type: 'scatter',
                coordinateSystem: 'geo',
                animation: false,
                symbolSize: function (val) {
                    let a = (maxSize4Pin - minSize4Pin) / (max - min);
                    let b = minSize4Pin - a * min;
                    b = maxSize4Pin - a * max;
                    return 20;
                },
                symbol: function (val) {
                    switch (val[3]) {
                        case '2':
                            return 'image://../../img/compreDisplay/two-risk.png';
                        case '3':
                            return 'image://../../img/compreDisplay/three-risk.png';
                        case '4':
                            return 'image://../../img/compreDisplay/four-risk.png';
                        case '5':
                            return 'image://../../img/compreDisplay/five-risk.png';
                        default:
                            break;
                    }
                },
                label: {
                    normal: {
                        show: false,
                        textStyle: {
                            color: '#fff',
                            fontSize: 15,
                            opacity: 1
                        }
                    }
                },
                zlevel: 6,
                z: 6,
                data: convertData(dataMap)
            },
            ]
        }

        myChart5.clear();
        myChart5.setOption(option, true);
    });
    window.addEventListener("resize", function () {
        myChart5.resize();
    });
}