Echarts 地图tooltip效果自定义 点击气泡移除

echarts yekong 247℃

客户要求Echarts 地图 tooltip可以自定义内容,添加table显示,添加自定义字段 ,添加自定义小气泡数字,点击气泡后,气泡移除 html大屏演示地址

Echarts 地图tooltip效果自定义

        var name = ""
        var time = null
        var mapdatalist = [
            {
                name: '线路故障',
                data: [
                    {//线路故障
                        name: '线路故障',
                        id: 1,
                        value: [116.543174, 38.353691, 250]
                    },
                    {//线路故障
                        name: '线路故障',
                        id: 2,
                        value: [117.168683, 38.502034, 250]
                    }
                ]
            },
            {
                name: '用户报修',
                data: [
                    {//线路故障
                        name: '用户报修',
                        id: 3,
                        value: [117.196279, 37.945074, 250]
                    },
                    {//线路故障
                        name: '用户报修',
                        id: 4,
                        value: [116.837531, 38.061538, 250]
                    }
                ]
            }, {
                name: '重载',
                data: [
                    {//线路故障
                        name: '重载',
                        id: 5,
                        value: [117.099693, 38.295717, 250]
                    },
                    {//线路故障
                        name: '重载',
                        id: 6,
                        value: [116.448888, 38.203225, 250]
                    }
                ]
            }, {
                name: '过载',
                data: [
                    {//线路故障
                        name: '过载',
                        id: 7,
                        value: [116.214323, 38.623014, 250]
                    },
                    {//线路故障
                        name: '过载',
                        id: 8,
                        value: [116.133835, 38.673512, 250]
                    }
                ]
            }, {
                name: '低电压',
                data: [
                    {//线路故障
                        name: '低电压',
                        id: 9,
                        value: [116.320107, 37.970567, 250]
                    },
                    {//线路故障
                        name: '低电压',
                        id: 10,
                        value: [117.090494, 38.489383, 250]
                    }
                ]
            }, {
                name: '停上电',
                data: [
                    {//线路故障
                        name: '停上电',
                        id: 11,
                        value: [116.752444, 38.927258, 250]
                    },
                    {//线路故障
                        name: '停上电',
                        id: 12,
                        value: [117.371053, 38.056083, 250]
                    }
                ]
            }, {
                name: '电采暖用户',
                data: [
                    {//线路故障
                        name: '电采暖用户',
                        id: 13,
                        value: [116.812235, 38.738384, 250]
                    },
                    {//线路故障
                        name: '电采暖用户',
                        id: 14,
                        value: [117.52743, 38.574286, 250]
                    }
                ]
            },
        ]
        function getecharts5() {
            var chartDom = document.getElementById('echarts5');
            var myChart = echarts.init(chartDom);
            var uploadedDataURL = "data/130900.json";
            var nameMap = '沧州市';
            var colors = [
                '#CF4212',
                '#4398F1',
                '#DF9800',
                '#FE9999',
                '#3EFF66',
                '#3399FF',
                '#66FFFF'
            ]
            window.dataList = [
                {
                    name: '任丘市',
                    value: 396,
                    value1: 10,
                    value2: 10,
                    value3: 10,
                    value4: 10,
                    value5: 10,
                    value6: 10,
                    value7: 10,
                    value8: 10,
                    value9: 10,
                    list: [
                        {
                            order: 1,
                            zhudian: '驻点一',
                            name: '张三',
                            fanwei: 5
                        }, {
                            order: 1,
                            zhudian: '驻点二',
                            name: '李四',
                            fanwei: 5
                        },]
                },
                {
                    name: '青县', value: 66,
                    value1: 10,
                    value2: 10,
                    value3: 10,
                    value4: 10,
                    value5: 10,
                    value6: 10,
                    value7: 10,
                    value8: 10,
                    value9: 10,
                    list: [{
                        order: 1,
                        zhudian: '驻点一',
                        name: '张三',
                        fanwei: 5
                    }, {
                        order: 1,
                        zhudian: '驻点二',
                        name: '李四',
                        fanwei: 5
                    },]
                },
                {
                    name: '河间市', value: 222,
                    value1: 10,
                    value2: 10,
                    value3: 10,
                    value4: 10,
                    value5: 10,
                    value6: 10,
                    value7: 10,
                    value8: 10,
                    value9: 10,
                    list: [{
                        order: 1,
                        zhudian: '驻点一',
                        name: '张三',
                        fanwei: 5
                    }, {
                        order: 1,
                        zhudian: '驻点二',
                        name: '李四',
                        fanwei: 5
                    },]
                },
                {
                    name: '肃宁县', value: 688,
                    value1: 10,
                    value2: 10,
                    value3: 10,
                    value4: 10,
                    value5: 10,
                    value6: 10,
                    value7: 10,
                    value8: 10,
                    value9: 10,
                    list: [{
                        order: 1,
                        zhudian: '驻点一',
                        name: '张三',
                        fanwei: 5
                    }, {
                        order: 1,
                        zhudian: '驻点二',
                        name: '李四',
                        fanwei: 5
                    },]
                },
                {
                    name: '黄骅市', value: 75,
                    value1: 10,
                    value2: 10,
                    value3: 10,
                    value4: 10,
                    value5: 10,
                    value6: 10,
                    value7: 10,
                    value8: 10,
                    value9: 10,
                    list: [{
                        order: 1,
                        zhudian: '驻点一',
                        name: '张三',
                        fanwei: 5
                    }, {
                        order: 1,
                        zhudian: '驻点一',
                        name: '张三',
                        fanwei: 5
                    },]
                },
                {
                    name: '新华区', value: 121,
                    value1: 10,
                    value2: 10,
                    value3: 10,
                    value4: 10,
                    value5: 10,
                    value6: 10,
                    value7: 10,
                    value8: 10,
                    value9: 10,
                    list: [{
                        order: 1,
                        zhudian: '驻点一',
                        name: '张三',
                        fanwei: 5
                    }, {
                        order: 1,
                        zhudian: '驻点二',
                        name: '李四',
                        fanwei: 5
                    },]
                },
                {
                    name: '献县', value: 91,
                    value1: 10,
                    value2: 10,
                    value3: 10,
                    value4: 10,
                    value5: 10,
                    value6: 10,
                    value7: 10,
                    value8: 10,
                    value9: 10,
                    list: [{
                        order: 1,
                        zhudian: '驻点一',
                        name: '张三',
                        fanwei: 5
                    }, {
                        order: 1,
                        zhudian: '驻点二',
                        name: '李四',
                        fanwei: 5
                    },]
                },
                {
                    name: '沧县', value: 91,
                    value1: 10,
                    value2: 10,
                    value3: 10,
                    value4: 10,
                    value5: 10,
                    value6: 10,
                    value7: 10,
                    value8: 10,
                    value9: 10,
                    list: [{
                        order: 1,
                        zhudian: '驻点一',
                        name: '张三',
                        fanwei: 5
                    }, {
                        order: 1,
                        zhudian: '驻点二',
                        name: '李四',
                        fanwei: 5
                    },]
                },
                {
                    name: '泊头市', value: 479,
                    value1: 10,
                    value2: 10,
                    value3: 10,
                    value4: 10,
                    value5: 10,
                    value6: 10,
                    value7: 10,
                    value8: 10,
                    value9: 10,
                    list: [{
                        order: 1,
                        zhudian: '驻点一',
                        name: '张三',
                        fanwei: 5
                    }, {
                        order: 1,
                        zhudian: '驻点二',
                        name: '李四',
                        fanwei: 5
                    },]
                },
                {
                    name: '孟村回族自治县', value: 34,
                    value1: 10,
                    value2: 10,
                    value3: 10,
                    value4: 10,
                    value5: 10,
                    value6: 10,
                    value7: 10,
                    value8: 10,
                    value9: 10,
                    list: [{
                        order: 1,
                        zhudian: '驻点一',
                        name: '张三',
                        fanwei: 5
                    }, {
                        order: 1,
                        zhudian: '驻点二',
                        name: '李四',
                        fanwei: 5
                    },]
                },
                {
                    name: '海兴县', value: 631,
                    value1: 10,
                    value2: 10,
                    value3: 10,
                    value4: 10,
                    value5: 10,
                    value6: 10,
                    value7: 10,
                    value8: 10,
                    value9: 10,
                    list: [{
                        order: 1,
                        zhudian: '驻点一',
                        name: '张三',
                        fanwei: 5
                    }, {
                        order: 1,
                        zhudian: '驻点二',
                        name: '李四',
                        fanwei: 5
                    },]
                },
                {
                    name: '运河区', value: 631,
                    value1: 10,
                    value2: 10,
                    value3: 10,
                    value4: 10,
                    value5: 10,
                    value6: 10,
                    value7: 10,
                    value8: 10,
                    value9: 10,
                    list: [{
                        order: 1,
                        zhudian: '驻点一',
                        name: '张三',
                        fanwei: 5
                    }, {
                        order: 1,
                        zhudian: '驻点二',
                        name: '李四',
                        fanwei: 5
                    },]
                },
                {
                    name: '南皮县', value: 1203,
                    value1: 10,
                    value2: 10,
                    value3: 10,
                    value4: 10,
                    value5: 10,
                    value6: 10,
                    value7: 10,
                    value8: 10,
                    value9: 10,
                    list: [{
                        order: 1,
                        zhudian: '驻点一',
                        name: '张三',
                        fanwei: 5
                    }, {
                        order: 1,
                        zhudian: '驻点二',
                        name: '李四',
                        fanwei: 5
                    },]
                },
                {
                    name: '盐山县',
                    value: 988,
                    value1: 10,
                    value2: 10,
                    value3: 10,
                    value4: 10,
                    value5: 10,
                    value6: 10,
                    value7: 10,
                    value8: 10,
                    value9: 10,
                    list: [{
                        order: 1,
                        zhudian: '驻点一',
                        name: '张三',
                        fanwei: 5
                    }, {
                        order: 1,
                        zhudian: '驻点二',
                        name: '李四',
                        fanwei: 5
                    },]
                },
                {
                    name: '吴桥县', value: 693,
                    value1: 10,
                    value2: 10,
                    value3: 10,
                    value4: 10,
                    value5: 10,
                    value6: 10,
                    value7: 10,
                    value8: 10,
                    value9: 10,
                    list: [{
                        order: 1,
                        zhudian: '驻点一',
                        name: '张三',
                        fanwei: 5
                    }, {
                        order: 1,
                        zhudian: '驻点二',
                        name: '李四',
                        fanwei: 5
                    },]
                },
                {
                    name: '东光县', value: 693,
                    value1: 10,
                    value2: 10,
                    value3: 10,
                    value4: 10,
                    value5: 10,
                    value6: 10,
                    value7: 10,
                    value8: 10,
                    value9: 10,
                    list: [{
                        order: 1,
                        zhudian: '驻点一',
                        name: '张三',
                        fanwei: 5
                    }, {
                        order: 1,
                        zhudian: '驻点二',
                        name: '李四',
                        fanwei: 5
                    },]
                },
            ];
            var geoCoordMap = {};
            $.get(uploadedDataURL, function (gdMap) {
                echarts.registerMap(nameMap, gdMap);
                /*获取地图数据*/
                myChart.showLoading();
                var mapFeatures = echarts.getMap(nameMap).geoJson.features;
                myChart.hideLoading();
                mapFeatures.forEach(function (v) {
                    // 地区名称
                    var name = v.properties.name;
                    // 地区经纬度
                    geoCoordMap[name] = v.properties.center;
                });
                var convertData = function (data) {
                    console.log(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;
                };
                var serverdata = [
                    { // 地图块的相关信息
                        type: 'map',
                        map: nameMap,
                        zoom: 1.2,
                        label: {
                            show: true,
                            normal: {
                                show: true,
                                textStyle: {
                                    fontSize: 12,
                                    fontWeight: 400,
                                    color: 'rgb(0,0,0) '
                                }
                            }
                        },
                        // zlevel: 1,
                        data: window.dataList
                    }
                ]
                mapdatalist.forEach((type, index) => {
                    console.log(type)
                    console.log(index)
                    var datamap = {
                        type: 'scatter',
                        tooltip: {
                            show: false
                        },
                        name: type.name,
                        coordinateSystem: 'geo',
                        symbol: 'pin',
                        symbolSize: [40, 40],
                        label: {
                            normal: {
                                show: true,
                                textStyle: {
                                    color: '#000',
                                    fontSize: 10,
                                    fontWeight: 600
                                },
                                formatter(value) {
                                    return value.data.value[2]
                                }
                            }
                        },
                        hoverAnimation: true,
                        itemStyle: {
                            normal: {
                                color: colors[index]
                            }
                        },
                        zlevel: 6,
                        data: type.data
                    }
                    serverdata.push(datamap)
                });
                var optionMap = {
                    tooltip: {
                        trigger: 'item',
                        show: true,
                        enterable: true,
                        textStyle: {
                            fontSize: 14,
                            color: '#000'
                        },
                        backgroundColor: 'rgba(255,255,255,0.8)',
                        formatter: function (params, ticket, callback) {
                            console.log(params)
                            var list = params.data.list
                            var data = ''
                            list.forEach((type, index) => {
                                var data2 = '<tr>\n' +
                                    '<td>' + (index + 1) + '</td>\n' +
                                    '<td>' + type.zhudian + '</td>\n' +
                                    '<td>' + type.name + '</td>\n' +
                                    '<td>' + type.fanwei + '</td>\n' +
                                    '</tr>\n'
                                data = data + data2
                            });
                            return '<p style="font-weight: bold;text-align: center">' + params.data.name + '</p>' +
                                '<br />煤改电用户数:' + '<span style="color: rgba(1, 99, 190, 1);">' + params.data.value1 + '户 </span>' +
                                '台区数量:' + '<span style="color: rgba(255, 79, 71, 1);">' + params.data.value2 + '台 </span>' +
                                '线路数量:' + '<span style="color: rgba(1, 99, 190, 1);">' + params.data.value3 + '条 </span>' +
                                '<br />电采暖用户:' + '<span style="color: rgba(1, 99, 190, 1);">' + params.data.value4 + '户 </span>' +
                                '电采暖台区数量:' + '<span style="color: rgba(1, 99, 190, 1);">' + params.data.value5 + '台 </span>' +
                                '<br />电采暖线路数量:' + '<span style="color: rgba(1, 99, 190, 1);">' + params.data.value6 + '条 </span>' +
                                '网格:' + '<span style="color: rgba(1, 99, 190, 1);">' + params.data.value7 + '个 </span>' +
                                '供电所:' + '<span style="color: rgba(1, 99, 190, 1);">' + params.data.value8 + '个 </span>' +
                                '<br />应急发电机:' + '<span style="color: rgba(1, 99, 190, 1);">' + params.data.value9 + '台 </span>' + '<table style="width: 300px" class="newpoptable">\n' +
                                '                        <tr>\n' +
                                '                            <td>序号</td>\n' +
                                '                            <td>驻点名称</td>\n' +
                                '                            <td>责任人</td>\n' +
                                '                            <td>范围</td>\n' +
                                '                        </tr>\n' + data +
                                '                    </table>'
                        }
                    },
                    // legend: {
                    //     orient: 'vertical',
                    //     y: 'bottom',
                    //     x: '85%',
                    //     textStyle: {
                    //         color: '#fff'
                    //     }
                    // },
                    visualMap: [{
                        min: 0,
                        max: 1000,
                        show: true,
                        //   text: ['High', 'Low'],
                        realtime: true,
                        calculable: true,
                        seriesIndex: [0],
                        inRange: {
                            color: ['#0677F0', '#2D8EF5', '#4198F3', '#499BF1', '#529AE6', '#69A6E5']
                        }
                    }],
                    geo: {
                        map: nameMap,
                        show: false,
                        roam: true,
                        label: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: false
                            }
                        }
                    },
                    series: serverdata
                };
                myChart.clear()
                myChart.resize()
                myChart.setOption(optionMap, true);
                myChart.on('click', function (params) {
                    console.log(params)
                    if (params.seriesType) {
                        showwin()
                        mapdatalist.forEach((type, index) => {
                            type.data.forEach((type1, index2) => {
                                if (params.data.id == type1.id) {
                                    type.data.splice(index2, 1)
                                }
                            });
                        });
                    }
                    getecharts5()
                });
                time = window.setInterval(() => {
                    if (name) {
                        myChart.dispatchAction({
                            type: 'highlight', // 高亮指定的数据图形。通过seriesName或者seriesIndex指定系列。如果要再指定某个数据可以再指定dataIndex或者name。
                            seriesIndex: 0,
                            name: name
                        })
                        name = ""
                    } else {
                        myChart.dispatchAction({
                            type: 'downplay', // 取消高亮指定的数据图形
                            seriesIndex: 0
                        })
                        name = '黄骅市'
                    }
                }, 1000)
            });
        }
喜欢 (3)