
import * as echarts from "echarts"
// 用户占比
export const userShareConfig = {
    grid: {
        left: '0%',
        right: '0%',
        bottom: '3%',
        top: '4%',
    },
    xAxis:
    {
        show: false,
    }
    ,
    yAxis:
    {
        show: false,
        type: 'category',
    },
    title: {
        show: false,
        text: "暂无数据",
        left: "center",
        top: "center"
    },
    series: [
        {
            // animation: false, // 关闭柱状图的动画效果
            name: '新用户',
            type: 'bar',
            stack: 'total',
            data: [],
            barWidth: 12,
            yAxisIndex: 0,
            itemStyle: {
                color: '#0389FC',
                borderWidth: 2,
                // barBorderRadius: [12, 0, 0, 12],


            },
            label: {
                // animation: false, // 关闭柱状图的动画效果
                // show: true,
                // position: 'right',
                // distance: 8,
                formatter: '{insideTopRight|}',
                // rich: {
                //     insideTopRight: {
                //         color: 'red',
                //         align: 'right',
                //         width: 0,
                //         verticalAlign: "top",
                //         lineHeight: 14,
                //         fontSize: 17
                //     }
                // }
            },

        },
        {
            // animation: false, // 关闭柱状图的动画效果
            name: '老用户',
            type: 'bar',
            stack: 'total',
            data: [],
            barWidth: 12,
            itemStyle: {
                color: '#F0A610',
                barBorderRadius: [0, 12, 12, 0]
            },
        },
    ]
}
// 用户来源
export const userSourceConfig = {
    color: ["#0384fb", "#dc5151", "#00feff", "#f0a610"],
    tooltip: {
        trigger: "item",
        show: false
    },
    legend: {
        type: "scroll",
        // selectedMode: false,
        orient: "vertical",
        right: 0,
        top: "center",
        icon: "rect", // 修改形状
        itemWidth: 12,
        itemHeight: 12,
        textStyle: {
            fontSize: 18,
            color: "#fff",
            padding: [0, 0, 0, 0], // 修改文字和图标距离
            rich: {
                name: {
                    align: "left",
                    width: 100,
                    fontSize: 16,
                },
                v: {

                    borderRadius: "1px",
                    align: "right",
                    width: 20,
                    fontSize: 16,
                },
            },
        },
    },
    title: {
        show: false,
        text: "暂无数据",
        left: "center",
        top: "center"
    },
    series: [
        {
            name: "",
            type: "pie",
            radius: ["60%", "80%"],
            center: ["30%", "50%"],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: "center",
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: 26,
                    fontWeight: "bold",
                },
            },
            labelLine: {
                show: false,
            },
            data: [],
        },
    ],
    // backgroundColor: "#FFF",
}
// 在线人数
export const onlinePeopleConfig = {
    grid: {
        left: '5%',
        right: '5%',
        bottom: '15%',
        top: '15%',
        containLabel: true,
    },
    title: {
        show: false,
        text: "暂无数据",
        left: "center",
        top: "center"
    },
    dataZoom: [
        {
            type: 'inside',//设置缩放方式为鼠标滚轮
            filterMode: 'none'//不过滤数据，只改变数轴范围
        }
    ],
    legend: {
        top: 10,
        bottom: 10,
        orient: 'horizontal',
        icon: "rect",
        show: true,
        // data: [], // Set the font color of the legend to red
        // x: "330", // 水平居中
        itemWidth: 18,
        itemHeight: 4,
        itemStyle: {
            borderWidth: 0, // 设置边框宽度为0，即去掉边框样式
        },
        textStyle: {
            color: "#D8F0FF",
            fontSize: 12,
        },
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        axisLine: {
            width: 20,
            lineStyle: {
                color: "#04aaff",
            }
        },
        axisLabel: {
            // interval:2,
            fontSize: 16,
            color: "#fff",
            align: 'right',
            showMinLabel: true,
            showMaxLabel: true,
        },
        axisTick: {
            show: false
        },
        data: []
    },
    yAxis: {
        type: 'value',
        minInterval: 1,
        min: 0, 
        axisLine: {
            width: 20,
            lineStyle: {
                color: "#04aaff",
            }
        },
        axisLabel: {
            fontSize: 16,
            color: "#fff"
        },

        axisTick: {
            show: false
        },
        splitLine: {
            lineStyle: {
                color: "rgba(0, 157, 255, 0.14)",
                type: "solid",
                width: 2,
            },
        },
    },
    tooltip: {
        trigger: 'axis',
        padding: [0, 10, 0, 0],
        backgroundColor: "rgba(50,50,50,0.7)",
        formatter: function (series) {
            let liStr = `<div style="color:#FFF;font-size:12px;font-weight: bold;">
          ${series[0].axisValueLabel}</div>`
            let seriesItem
            for (let index = 0; index < series.length; index++) {
                seriesItem = series[index];
                const colors = ["#4EA6FE", "#00FEFF", "#F0A610"];
                liStr += `<li style="color:${colors[index]};font-size:11px;font-weight: bold;">
            <span style="margin-right:6px;display:inline-block;">${seriesItem.seriesName
                    }&nbsp:</span>
            <span style="color:#FFF}">${seriesItem.value}</span></li>`
            }
            return `<ul>${liStr}</ul>`
        },
    },
    series: [
        {
            name: '在线人数',
            data: [],
            type: 'line',
            smooth: true,
            symbolSize: 0.01,
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 0.9, [
                    {
                        offset: 0,

                        color: 'rgba(170, 201 ,234,0.8)'
                    },
                    {
                        offset: 1,

                        color: 'rgba(170, 201 ,234,0)'
                    },
                    {
                        offset: 0,
                        color: 'rgba(170, 201 ,234,1)'

                    },
                ])
            },
            itemStyle: {
                // color: "#3D5DF4",
                color: '#4EA6FE'
            },
            lineStyle: {
                // 线条加阴影
                // 设置阴影颜色
                // shadowColor: "#3D5DF4",
                shadowColor: "#4EA6FE",
                shadowOffsetX: 0,
                width: 2,
                // 设置阴影沿y轴偏移量为9
                shadowOffsetY: 9,
                // 设置阴影的模糊大小
                shadowBlur: 10,
                // 设置线条渐变色
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    { offset: 0, color: "#94C2FD00" },
                    { offset: 0.2, color: "#4EA6FE" },
                    { offset: 0.1, color: "#5B8FF900" },
                ]),
            },
        },
        {
            name: '进场人数',
            data: [],
            type: 'line',
            smooth: true,
            symbolSize: 0.01,
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 0.9, [
                    {
                        offset: 0,

                        color: 'rgba(0, 254 ,255,0.8)'
                    },
                    {
                        offset: 1,

                        color: 'rgba(0, 254 ,255,0)'
                    },
                    {
                        offset: 0,
                        color: 'rgba(0, 254 ,255,1)'

                    },
                ])
            },
            itemStyle: {
                color: '#00FEFF'
            },
            lineStyle: {
                // 线条加阴影
                // 设置阴影颜色
                // shadowColor: "#3D5DF4",
                shadowColor: "#4EA6FE",
                shadowOffsetX: 0,
                width: 2,
                // 设置阴影沿y轴偏移量为9
                shadowOffsetY: 9,
                // 设置阴影的模糊大小
                shadowBlur: 10,
                // 设置线条渐变色
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    { offset: 0, color: "#00FEFF00" },
                    { offset: 0.2, color: "#00FEFFFE" },
                    { offset: 0.1, color: "#00FEFF00" },
                ]),
            },



        },
        {
            name: '离场人数',
            data: [],
            type: 'line',
            smooth: true,
            symbolSize: 0.01,
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 0.9, [
                    {
                        offset: 0,

                        color: 'rgba(240, 166, 16,0.8)'
                    },
                    {
                        offset: 1,

                        color: 'rgba(240, 166, 16,0)'
                    },
                    {
                        offset: 0,
                        color: 'rgba(240, 166, 16,1)'

                    },
                ])
            },
            itemStyle: {
                color: '#F0A610'
            },
            lineStyle: {
                // 线条加阴影
                // 设置阴影颜色
                // shadowColor: "#3D5DF4",
                shadowColor: "#4EA6FE",
                shadowOffsetX: 0,
                width: 2,
                // 设置阴影沿y轴偏移量为9
                shadowOffsetY: 9,
                // 设置阴影的模糊大小
                shadowBlur: 10,
                // 设置线条渐变色
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    { offset: 0, color: "#F0A61000" },
                    { offset: 0.2, color: "#F0A610FE" },
                    { offset: 0.1, color: "#F0A61000" },
                ]),
            },
        }
    ]
}

// 成交金额
export const volumeTransactionConfig = {
    grid: {
        left: '5%',
        right: '5%',
        bottom: '3%',
        top: '10%',
        containLabel: true,
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        axisLine: {
            width: 20,
            lineStyle: {
                color: "#04aaff",
            }
        },
        axisLabel: {
            interval: 0,
            fontSize: 16,
            color: "#fff",
            formatter: (value, index) => {
                if (value) return value.slice(value.length-8,value.length-3)
            },
        },
        axisTick: {
            show: false
        },
        data: []
    },
    yAxis: {
        type: 'value',
        axisLine: {
            width: 20,
            lineStyle: {
                color: "#04aaff",
            }
        },
        axisLabel: {
            fontSize: 16,
            color: "#fff"
        },

        axisTick: {
            show: false
        },
        splitLine: {
            lineStyle: {
                color: "rgba(0, 157, 255, 0.14)",
                type: "solid",
                width: 2,
            },
        },
    },
    dataZoom: [
        {
            type: 'inside',//设置缩放方式为鼠标滚轮
            filterMode: 'none'//不过滤数据，只改变数轴范围
        }
    ],
    title: {
        show: false,
        text: "暂无数据",
        left: "center",
        top: "center"
    },
    tooltip: {
        trigger: 'axis',
        padding: [0, 10, 0, 0],
        backgroundColor: "rgba(50,50,50,0.7)",
        formatter: function (series) {
            let liStr = `<div style="color:#FFF;font-size:12px;font-weight: bold;">
          ${series[0].axisValueLabel ? series[0].axisValueLabel : series[0].axisValueLabel}</div>`
            let seriesItem
            for (let index = 0; index < series.length; index++) {
                seriesItem = series[index];
                const colors = ["#4EA6FE", "#00FEFF", "#F0A610"];
                liStr += `<li style="color:${colors[index]};font-size:11px;font-weight: bold;">
            <span style="margin-right:6px;display:inline-block;">${seriesItem.seriesName
                    }&nbsp:</span>
            <span style="color:#FFF}">${seriesItem.value}</span></li>`
            }
            return `<ul>${liStr}</ul>`
        },
    },
    series: [
        {
            name: '成交金额',
            data: [],
            type: 'line',
            smooth: true,
            symbolSize: 0.01,
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 0.9, [
                    {
                        offset: 0,

                        color: 'rgba(170, 201 ,234,0.8)'
                    },
                    {
                        offset: 1,

                        color: 'rgba(170, 201 ,234,0)'
                    },
                    {
                        offset: 0,
                        color: 'rgba(170, 201 ,234,1)'

                    },
                ])
            },
            itemStyle: {
                // color: "#3D5DF4",
                color: '#4EA6FE'
            },
            lineStyle: {
                // 线条加阴影
                // 设置阴影颜色
                // shadowColor: "#3D5DF4",
                shadowColor: "#4EA6FE",
                shadowOffsetX: 0,
                width: 2,
                // 设置阴影沿y轴偏移量为9
                shadowOffsetY: 9,
                // 设置阴影的模糊大小
                shadowBlur: 10,
                // 设置线条渐变色
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    { offset: 0, color: "#94C2FD00" },
                    { offset: 0.2, color: "#4EA6FE" },
                    { offset: 0.1, color: "#5B8FF900" },
                ]),
            },
        }
    ]
}

export const showFields = [
    {
        name: "直播观看人次",
        field: "readNum"
    },
    {
        name: "直播观看人数",
        field: "readPeopleNum"
    },
    {
        name: "人均观看时长(分钟)",
        field: "readDurationAvg"
    },
    {
        name: "点赞数",
        field: "favorCount"
    },
    {
        name: "评论数",
        field: "messCount"
    },
    {
        name: "分享数",
        field: "shareCount"
    },
    {
        name: "产品点击数",
        field: "browseProCount"
    },
    {
        name: "产品签约数",
        field: "subCount"
    }
];



// 直播地图
// export const liveMapConfig = {
//     backgroundColor: "transparent",
//     tooltip: {
//         show: true, // 是否显示 tooltip
//         trigger: 'item', // 触发类型，这里设置为 'item' 表示鼠标悬停在图形上时触发显示
//         formatter: function (params) {
//             console.log('params=>', params);
//             if (params.componentSubType == 'map')
//                 return params.name + ': ' + params.value; // 自定义 tooltip 的内容，这里展示区域名称和数值
//         }
//     },
//     geo: [
//         {
//             layoutCenter: ['50%', '50%'],//位置
//             layoutSize: '220%',//大小
//             show: true,
//             map: mapName,
//             roam: false,
//             zoom: 0.65,
//             aspectScale: 1,
//             label: {
//                 normal: {
//                     show: false,
//                     textStyle: {
//                         color: '#fff'
//                     }
//                 },
//                 emphasis: {
//                     show: true,
//                     textStyle: {
//                         color: '#fff'
//                     }
//                 }
//             },
//             itemStyle: {
//                 normal: {
//                     areaColor: {
//                         type: "linear",
//                         x: 1200,
//                         y: 0,
//                         x2: 0,
//                         y2: 0,
//                         colorStops: [{
//                             offset: 0,
//                             color: "rgba(3,27,78,0.75)", // 0% 处的颜色
//                         }, {
//                             offset: 1,
//                             color: "rgba(58,149,253,0.75)", // 50% 处的颜色
//                         },],
//                         global: true, // 缺省为 false
//                     },
//                     borderColor: "#c0f3fb",
//                     borderWidth: 1,
//                     shadowColor: "#8cd3ef",
//                     shadowOffsetY: 10,
//                     shadowBlur: 120,
//                 },
//                 emphasis: {
//                     areaColor: "rgba(0,254,233,0.6)",
//                     // borderWidth: 0
//                 }
//             }
//         }, {
//             type: "map",
//             map: mapName,
//             zlevel: -1,
//             aspectScale: 1,
//             zoom: 0.65,
//             layoutCenter: ["50%", "51%"],
//             layoutSize: "220%",
//             roam: false,
//             silent: true,
//             itemStyle: {
//                 normal: {
//                     borderWidth: 1,
//                     borderColor: "rgba(58,149,253,0.8)",
//                     shadowColor: "rgba(172, 122, 255,0.5)",
//                     shadowOffsetY: 5,
//                     shadowBlur: 15,
//                     areaColor: "rgba(5,21,35,0.1)",
//                 },
//             },
//         }, {
//             type: "map",
//             map: mapName,
//             zlevel: -2,
//             aspectScale: 1,
//             zoom: 0.65,
//             layoutCenter: ["50%", "52%"],
//             layoutSize: "220%",
//             roam: false,
//             silent: true,
//             itemStyle: {
//                 normal: {
//                     borderWidth: 1,
//                     // borderColor: "rgba(57, 132, 188,0.4)",
//                     borderColor: "rgba(58,149,253,0.6)",
//                     shadowColor: "rgba(65, 214, 255,1)",
//                     shadowOffsetY: 5,
//                     shadowBlur: 15,
//                     areaColor: "transpercent",
//                 },
//             },
//         },
//         {
//             type: "map",
//             map: mapName,
//             zlevel: -3,
//             aspectScale: 1,
//             zoom: 0.65,
//             layoutCenter: ["50%", "53%"],
//             layoutSize: "220%",
//             roam: false,
//             silent: true,
//             itemStyle: {
//                 normal: {
//                     borderWidth: 1,
//                     // borderColor: "rgba(11, 43, 97,0.8)",
//                     borderColor: "rgba(58,149,253,0.4)",
//                     shadowColor: "rgba(58,149,253,1)",
//                     shadowOffsetY: 15,
//                     shadowBlur: 10,
//                     areaColor: "transpercent",
//                 },
//             },
//         },
//         {
//             type: "map",
//             map: mapName,
//             zlevel: -4,
//             aspectScale: 1,
//             zoom: 0.65,
//             layoutCenter: ["50%", "54%"],
//             layoutSize: "220%",
//             roam: false,
//             silent: true,
//             itemStyle: {
//                 normal: {
//                     borderWidth: 5,
//                     // borderColor: "rgba(11, 43, 97,0.8)",
//                     borderColor: "rgba(5,9,57,0.8)",
//                     shadowColor: "rgba(29, 111, 165,0.8)",
//                     shadowOffsetY: 15,
//                     shadowBlur: 10,
//                     areaColor: "rgba(5,21,35,0.1)",
//                 },
//             },
//         },
//     ],
//     series: [
//         {
//             type: 'map',
//             map: mapName,
//             geoIndex: 0,
//             aspectScale: 1, //长宽比
//             zoom: 0.65,
//             showLegendSymbol: true,
//             roam: true,
//             label: {
//                 normal: {
//                     show: true,
//                     textStyle: {
//                         color: "#fff",
//                         fontSize: "120%"
//                     },
//                 },
//                 emphasis: {
//                     // show: false,
//                 },
//             },
//             itemStyle: {
//                 normal: {
//                     areaColor: {
//                         type: "linear",
//                         x: 1200,
//                         y: 0,
//                         x2: 0,
//                         y2: 0,
//                         colorStops: [{
//                             offset: 0,
//                             color: "rgba(3,27,78,0.75)", // 0% 处的颜色
//                         }, {
//                             offset: 1,
//                             color: "rgba(58,149,253,0.75)", // 50% 处的颜色
//                         },],
//                         global: true, // 缺省为 false
//                     },
//                     borderColor: "#fff",
//                     borderWidth: 0.2,
//                 },
//             },
//             layoutCenter: ["50%", "50%"],
//             layoutSize: "180%",
//             animation: false,
//             markPoint: {
//                 symbol: "none"
//             },
//             data: data,
//         },
//         //柱状体的主干
//         {
//             type: 'lines',
//             zlevel: 5,
//             effect: {
//                 show: false,
//                 symbolSize: 5 // 图标大小
//             },
//             lineStyle: {
//                 width: 6, // 尾迹线条宽度
//                 color: 'rgba(249, 105, 13, .6)',
//                 opacity: 1, // 尾迹线条透明度
//                 curveness: 0 // 尾迹线条曲直度
//             },
//             label: {
//                 show: 0,
//                 position: 'end',
//                 formatter: '245'
//             },
//             silent: true,
//             data: lineData()
//         },
//         // 柱状体的顶部
//         {
//             type: 'scatter',
//             coordinateSystem: 'geo',
//             geoIndex: 0,
//             zlevel: 5,
//             label: {
//                 normal: {
//                     show: true,
//                     formatter: function (params) {
//                         var name = params.data[2].name
//                         var value = params.data[2].value
//                         var text = `{tline|${name}} : {fline|${value}}个`
//                         return text;
//                     },
//                     color: '#fff',
//                     rich: {
//                         fline: {
//                             // padding: [0, 25],
//                             color: '#fff',
//                             fontSize: 14,
//                             fontWeight: 600
//                         },
//                         tline: {
//                             // padding: [0, 27],
//                             color: '#ABF8FF',
//                             fontSize: 12,
//                         },
//                     }
//                 },
//                 emphasis: {
//                     show: true
//                 }
//             },
//             itemStyle: {
//                 color: '#00FFF6',
//                 opacity: 1
//             },
//             symbol: symbolImg,
//             symbolSize: [110, 60],
//             symbolOffset: [0, -20],
//             z: 999,
//             data: scatterData(),
//         },
//         {
//             name: 'Top 5',
//             type: 'effectScatter',
//             coordinateSystem: 'geo',
//             data: convertData(toolTipData),
//             showEffectOn: 'render',
//             itemStyle: {
//                 normal: {
//                     color: '#00FFFF',
//                 }
//             },
//             rippleEffect: {
//                 scale: 5,
//                 brushType: 'stroke',
//             },
//             label: {
//                 normal: {
//                     formatter: '{b}',
//                     position: 'bottom',
//                     show: false,
//                     color: "#fff",
//                     distance: 10,
//                 },
//             },
//             symbol: 'circle',
//             symbolSize: [20, 10],
//             itemStyle: {
//                 normal: {
//                     color: '#16ffff',
//                     shadowBlur: 10,
//                     shadowColor: '#16ffff',
//                 },
//                 opacity: 1
//             },
//             zlevel: 4,
//         },
//     ],
// };

export const getLiveMapConfig = (dataArr, toolTipDataArr) => {
    const symbolImg = "image://data:image/png;base64, ";
    const geoCoordMap = {
        '黑龙江': [127.9688, 45.368],
        '内蒙古': [110.3467, 41.4899],
        "吉林": [125.8154, 44.2584],
        '北京': [116.4551, 40.2539],
        "辽宁": [123.1238, 42.1216],
        "河北": [114.4995, 38.1006],
        "天津": [117.4219, 39.4189],
        "山西": [112.3352, 37.9413],
        "陕西": [109.1162, 34.2004],
        "甘肃": [103.5901, 36.3043],
        "宁夏": [106.3586, 38.1775],
        "青海": [98.4038, 36.8207],
        "新疆": [87.611053, 43.828171],
        "西藏": [91.117212, 29.646922],
        "四川": [103.9526, 30.7617],
        "重庆": [108.384366, 30.439702],
        "山东": [117.1582, 36.8701],
        "河南": [113.4668, 34.6234],
        "江苏": [118.8062, 31.9208],
        "安徽": [117.29, 32.0581],
        "湖北": [114.3896, 30.6628],
        "浙江": [119.5313, 29.8773],
        "福建": [119.4543, 25.9222],
        "江西": [116.0046, 28.6633],
        "湖南": [113.0823, 28.2568],
        "贵州": [106.6992, 26.7682],
        "云南": [102.9199, 25.4663],
        "广东": [113.12244, 23.009505],
        "广西": [108.479, 23.1152],
        "海南": [110.3893, 19.8516],
        "台湾": [120.702967, 24.123621],
        '上海': [121.4648, 31.2891],
        '香港': [114.328125, 22.33984375],
        '澳门': [113.5322265625, 22.17578125],
    };
    const mapName = 'china';
    let data = [];
    if (dataArr) data = dataArr
    let toolTipData = [];
    if (toolTipDataArr) toolTipData = toolTipDataArr.filter(item => geoCoordMap[item.name] != null);
    // const data = [
    //     { name: '北京', value: 5 },
    //     { name: '天津', value: 14 },
    //     { name: '河北', value: 157 },
    //     { name: '山西', value: 110 },
    //     { name: '内蒙古', value: 40 },
    //     { name: '辽宁', value: 40 },
    //     { name: '吉林', value: 40 },
    //     { name: '黑龙江', value: 60 },
    //     { name: '上海', value: 10 },
    //     { name: '江苏', value: 60 },
    //     { name: '浙江', value: 50 },
    //     { name: '安徽', value: 151 },
    //     { name: '福建', value: 60 },
    //     { name: '江西', value: 74 },
    //     { name: '山东', value: 200 },
    //     { name: '河南', value: 100 },
    //     { name: '湖北', value: 40 },
    //     { name: '湖南', value: 50 },
    //     { name: '重庆', value: 40 },
    //     { name: '四川', value: 120 },
    //     { name: '贵州', value: 135 },
    //     { name: '云南', value: 90 },
    //     { name: '西藏', value: 25 },
    //     { name: '陕西', value: 100 },
    //     { name: '甘肃', value: 60 },
    //     { name: '青海', value: 20 },
    //     { name: '宁夏', value: 110 },
    //     { name: '新疆', value: 32 },
    //     { name: '广东', value: 10 },
    //     { name: '广西', value: 100 },
    //     { name: '海南', value: 40 },
    // ];



    const convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
                res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value),
                });
            }
        }
        return res;
    };
    const lineData = function () {
        return toolTipData.map((item) => {
            if (geoCoordMap[item.name] != null) {
                return {
                    coords: [geoCoordMap[item.name], [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + 1.5]]
                }
            } else {
                return {
                    coords: []
                }
            }
        })
    }

    const scatterData = function () {
        return toolTipData.map((item) => {
            if (geoCoordMap[item.name]) return [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + 2, item]

        })
    }

    const layoutSize = '155%';
    const liveMapConfig = {
        grid: {
            left: '10%',
            right: '10%',
            bottom: '0%',
            top: '0%',
        },
        backgroundColor: "transparent",
        tooltip: {
            show: true, // 是否显示 tooltip
            trigger: 'item', // 触发类型，这里设置为 'item' 表示鼠标悬停在图形上时触发显示
            formatter: function (params) {
                if (params.componentSubType == 'map' && params.data) {
                    return `<div>${params.name} </div>
                    <div>用户人数：${params.value}</div> <div>占比：${params.data.proportion != null ? parseFloat(params.data.proportion * 100).toFixed(2) + '%' : '--'}</div>
                    `
                }
            }
        },
        geo: [
            {
                layoutCenter: ['50%', '50%'],//位置
                // layoutSize: '220%',//大小
                layoutSize: layoutSize,//大小
                show: true,
                map: mapName,
                roam: false,
                // zoom: 0.65,
                aspectScale: 1,
                label: {
                    normal: {
                        show: false,
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        areaColor: {
                            type: "linear",
                            x: 1200,
                            y: 0,
                            x2: 0,
                            y2: 0,
                            colorStops: [{
                                offset: 0,
                                color: "rgba(3,27,78,0.75)", // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: "rgba(58,149,253,0.75)", // 50% 处的颜色
                            },],
                            global: true, // 缺省为 false
                        },
                        borderColor: "#c0f3fb",
                        borderWidth: 1,
                        shadowColor: "#8cd3ef",
                        shadowOffsetY: 10,
                        shadowBlur: 120,
                    },
                    emphasis: {
                        areaColor: "rgba(0,254,233,0.6)",
                        // borderWidth: 0
                    }
                }
            }, {
                type: "map",
                map: mapName,
                zlevel: -1,
                aspectScale: 1,
                // zoom: 0.65,
                layoutCenter: ["50%", "51%"],
                layoutSize: layoutSize,
                roam: false,
                silent: true,
                itemStyle: {
                    normal: {
                        borderWidth: 1,
                        borderColor: "rgba(58,149,253,0.8)",
                        shadowColor: "rgba(172, 122, 255,0.5)",
                        shadowOffsetY: 5,
                        shadowBlur: 15,
                        areaColor: "rgba(5,21,35,0.1)",
                    },
                },
            }, {
                type: "map",
                map: mapName,
                zlevel: -2,
                aspectScale: 1,
                // zoom: 0.65,
                layoutCenter: ["50%", "52%"],
                layoutSize: layoutSize,
                roam: false,
                silent: true,
                itemStyle: {
                    normal: {
                        borderWidth: 1,
                        // borderColor: "rgba(57, 132, 188,0.4)",
                        borderColor: "rgba(58,149,253,0.6)",
                        shadowColor: "rgba(65, 214, 255,1)",
                        shadowOffsetY: 5,
                        shadowBlur: 15,
                        areaColor: "transpercent",
                    },
                },
            },
            {
                type: "map",
                map: mapName,
                zlevel: -3,
                aspectScale: 1,
                // zoom: 0.65,
                layoutCenter: ["50%", "53%"],
                // layoutSize: "220%",
                layoutSize: layoutSize,
                roam: false,
                silent: true,
                itemStyle: {
                    normal: {
                        borderWidth: 1,
                        // borderColor: "rgba(11, 43, 97,0.8)",
                        borderColor: "rgba(58,149,253,0.4)",
                        shadowColor: "rgba(58,149,253,1)",
                        shadowOffsetY: 15,
                        shadowBlur: 10,
                        areaColor: "transpercent",
                    },
                },
            },
            {
                type: "map",
                map: mapName,
                zlevel: -4,
                aspectScale: 1,
                // zoom: 0.65,
                layoutCenter: ["50%", "54%"],
                layoutSize: layoutSize,
                roam: false,
                silent: true,
                itemStyle: {
                    normal: {
                        borderWidth: 5,
                        // borderColor: "rgba(11, 43, 97,0.8)",
                        borderColor: "rgba(5,9,57,0.8)",
                        shadowColor: "rgba(29, 111, 165,0.8)",
                        shadowOffsetY: 15,
                        shadowBlur: 10,
                        areaColor: "rgba(5,21,35,0.1)",
                    },
                },
            },
        ],
        series: [
            {
                type: 'map',
                map: mapName,
                geoIndex: 0,
                aspectScale: 1, //长宽比
                zoom: 0.65,
                showLegendSymbol: true,
                roam: true,
                label: {
                    normal: {
                        show: true,
                        textStyle: {
                            color: "#fff",
                            fontSize: "120%"
                        },
                    },
                    emphasis: {
                        // show: false,
                    },
                },
                itemStyle: {
                    normal: {
                        areaColor: {
                            type: "linear",
                            x: 1200,
                            y: 0,
                            x2: 0,
                            y2: 0,
                            colorStops: [{
                                offset: 0,
                                color: "rgba(3,27,78,0.75)", // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: "rgba(58,149,253,0.75)", // 50% 处的颜色
                            },],
                            global: true, // 缺省为 false
                        },
                        borderColor: "#fff",
                        borderWidth: 0.2,
                    },
                },
                layoutCenter: ["50%", "50%"],
                layoutSize: layoutSize,
                animation: false,
                markPoint: {
                    symbol: "none"
                },
                data: data,
            },
            //柱状体的主干
            {
                type: 'lines',
                zlevel: 5,
                effect: {
                    show: false,
                    symbolSize: 5 // 图标大小
                },
                lineStyle: {
                    width: 6, // 尾迹线条宽度
                    color: 'rgba(249, 105, 13, .6)',
                    opacity: 1, // 尾迹线条透明度
                    curveness: 0 // 尾迹线条曲直度
                },
                label: {
                    show: 0,
                    position: 'end',
                    formatter: '245'
                },
                silent: true,
                data: lineData()
            },
            // 柱状体的顶部
            {
                type: 'scatter',
                coordinateSystem: 'geo',
                geoIndex: 0,
                zlevel: 5,
                label: {
                    normal: {
                        show: true,
                        formatter: function (params) {
                            var name = params.data[2].name
                            var value = params.data[2].value
                            var text = `{tline|${name}} : {fline|${value}}个`
                            return text;
                        },
                        color: '#fff',
                        rich: {
                            fline: {
                                // padding: [0, 25],
                                color: '#fff',
                                fontSize: 14,
                                fontWeight: 600
                            },
                            tline: {
                                // padding: [0, 27],
                                color: '#ABF8FF',
                                fontSize: 12,
                            },
                        }
                    },
                    emphasis: {
                        show: true
                    }
                },
                itemStyle: {
                    color: '#00FFF6',
                    opacity: 1
                },
                symbol: symbolImg,
                symbolSize: [110, 60],
                symbolOffset: [0, -20],
                z: 999,
                data: scatterData(),
            },
            {
                name: 'Top 5',
                type: 'effectScatter',
                coordinateSystem: 'geo',
                data: convertData(toolTipData),
                showEffectOn: 'render',
                itemStyle: {
                    normal: {
                        color: '#00FFFF',
                    }
                },
                rippleEffect: {
                    scale: 5,
                    brushType: 'stroke',
                },
                label: {
                    normal: {
                        formatter: '{b}',
                        position: 'bottom',
                        show: false,
                        color: "#fff",
                        distance: 10,
                    },
                },
                symbol: 'circle',
                symbolSize: [20, 10],
                itemStyle: {
                    normal: {
                        color: '#16ffff',
                        shadowBlur: 10,
                        shadowColor: '#16ffff',
                    },
                    opacity: 1
                },
                zlevel: 0,
            },
        ],
    }
    return liveMapConfig;
}