echarts地图添加点击事件

Question

这是在echarts社区找的一个地图，但本人没有深入学习，需要在其中绑定点击事件。
问题描述：添加鼠标左键点击事件后点击指定的地区后进行跳转网页，跳转指定网页后鼠标右键后又能回退到当前网页。最好能有详细的步骤，因为本人暂时还未能深入学习，十分感谢。

(function(){
    window.addEventListener('DOMContentLoaded',function(){
        var myChart = echarts.init(document.querySelector('.chart'));
        var chinaGeoCoordMap = {
            '黑龙江': [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],
            "青海": [101.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]
        };
        var chinaDatas = [
            [{
                name: "北京市",
                value: 0
            }, {
                name: '黑龙江',
                value: 0
            }, { name: '上海市' }],
            [{
                name: '内蒙古',
                value: 0
            }], [{
                name: '吉林',
                value: 0
            }], [{
                name: '辽宁',
                value: 0
            }], [{
                name: '河北',
                value: 0
            }], [{
                name: '天津',
                value: 0
            }], [{
                name: '山西',
                value: 0
            }], [{
                name: '陕西',
                value: 0
            }], [{
                name: '甘肃',
                value: 0
            }], [{
                name: '新疆',
                value: 0
            }], [{
                name: '西藏',
                value: 0
            }], [{
                name: '台湾',
                value: 0
            }], [{
                name: '黑龙江',
                value: 0
            }], [{
                name: '云南',
                value: 0
            }], [{
                name: '宁夏',
                value: 0
            }], [{
                name: '青海',
                value: 0
            }], [{
                name: '四川',
                value: 0
            }], [{
                name: '重庆',
                value: 0
            }], [{
                name: '山东',
                value: 0
            }], [{
                name: '河南',
                value: 0
            }], [{
                name: '江苏',
                value: 0
            }], [{
                name: '安徽',
                value: 0
            }], [{
                name: '湖北',
                value: 0
            }], [{
                name: '浙江',
                value: 0
            }], [{
                name: '福建',
                value: 0
            }], [{
                name: '江西',
                value: 0
            }], [{
                name: '湖南',
                value: 0
            }], [{
                name: '贵州',
                value: 0
            }], [{
                name: '广西',
                value: 0
            }], [{
                name: '海南',
                value: 0
            }], [{
                name: '上海',
                value: 0
            }],
        ];

        var convertData = function (data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var dataItem = data[i];
                var fromCoord = chinaGeoCoordMap[dataItem[0].name];
                var toCoord = [[121.4648, 31.2891], [117.1582, 36.8701], [117.1582, 36.8701], [117.1582, 36.8701], [117.1582, 36.8701], [117.1582, 36.8701], [117.1582, 36.8701], [117.1582, 36.8701], [117.1582, 36.8701], [117.1582, 36.8701], [117.1582, 36.8701], [117.1582, 36.8701], [117.1582, 36.8701], [117.1582, 36.8701], [117.1582, 36.8701], [117.1582, 36.8701], [117.1582, 36.8701], [117.1582, 36.8701], [117.1582, 36.8701], [117.1582, 36.8701], [117.1582, 36.8701], [117.1582, 36.8701], [117.1582, 36.8701], [117.1582, 36.8701], [117.1582, 36.8701], [117.1582, 36.8701], [117.1582, 36.8701], [117.1582, 36.8701], [117.1582, 36.8701]];//被攻击点
                if (fromCoord && toCoord[i]) {
                    res.push([{
                        coord: toCoord[i],
                    }, {
                        coord: fromCoord,
                        value: dataItem[0].value,
                        // visualMap: false
                    }]);
                }
            }
            return res;
        };

        var series = [];
        [['山东', chinaDatas]].forEach(function (item, i) {
            console.log(item)
            series.push({
                type: 'map',
                mapType: 'china',
                aspectScale: 0.85,
                layoutCenter: ["50%", "50%"], //地图位置
                layoutSize: '100%',
                zoom: 1, //当前视角的缩放比例
                // roam: true, //是否开启平游或缩放
                scaleLimit: { //滚轮缩放的极限控制
                    min: 1,
                    max: 2
                },
                itemStyle: {
                    normal: {
                        areaColor: '#12235c',
                        borderColor: '#2ab8ff',
                        borderWidth: .5,
                        shadowColor: 'rgba(0,54,255, 0.4)',
                        shadowBlur: 100

                    },
                    emphasis: {
                        areaColor: '#02102b',
                        label: {
                            color: "#fff"
                        }

                    }
                }
            },
                // {
                //     type: 'lines',
                //     zlevel: 2,
                //     effect: {
                //         show: true,
                //         period: 3, //箭头指向速度，值越小速度越快
                //         trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
                //         symbol: 'arrow', //箭头图标
                //         symbolSize: 5, //图标大小
                //     },
                //     lineStyle: {
                //         normal: {
                //             color: '#00eaff',
                //             width: 1, //尾迹线条宽度
                //             opacity: .7, //尾迹线条透明度
                //             curveness: .3, //尾迹线条曲直度
                //         },
                //     },
                //     data: convertData(item[1])
                // },
                {
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    zlevel: 2,
                    rippleEffect: { //涟漪特效
                        period: 4, //动画时间，值越小速度越快
                        brushType: 'stroke', //波纹绘制方式 stroke, fill
                        scale: 4 //波纹圆环最大限制，值越大波纹越大
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'right', //显示位置
                            offset: [5, 0], //偏移设置
                            formatter: function (params) {//圆环显示文字
                                return params.data.name;
                            },
                            fontSize: 13
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    symbol: 'circle',
                    symbolSize: function (val) {
                        return 5 + val[2] * 5; //圆环大小
                    },
                    itemStyle: {
                        normal: {
                            show: true,
                            color: '#00eaff'
                        }
                    },
                    data: item[1].map(function (dataItem) {
                        return {
                            name: dataItem[0].name,
                            value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value]),
                            // visualMap: false
                        };
                    }),
                },
                //被攻击点
                // {
                //     type: 'scatter',
                //     coordinateSystem: 'geo',
                //     zlevel: 2,
                //     rippleEffect: {
                //         period: 4,
                //         brushType: 'stroke',
                //         scale: 4
                //     },
                //     label: {
                //         normal: {
                //             show: false,    //定位点名字
                //             position: 'right',
                //             // offset:[5, 0],
                //             color: '#0f0',
                //             formatter: '{b}',
                //             textStyle: {
                //                 color: "#0f0"
                //             }
                //         },
                //         emphasis: {
                //             // show: false,   //定位标记
                //             color: "#f60"
                //         }
                //     },
                //     symbol: 'pin',  //定位图标样式
                //     symbolSize: 50,
                //     data: [{
                //         name: item[0],
                //         value: chinaGeoCoordMap[item[0]].concat([10]),
                //     }],
                // }
            );
        });

        option = {
            geo: {
                map: 'china',
                aspectScale: 0.85,
                layoutCenter: ["50%", "50%"], //地图位置
                layoutSize: '100%',
                itemStyle: {
                    normal: {
                        shadowColor: '#276fce',
                        shadowOffsetX: 0,
                        shadowOffsetY: 15,
                        opacity: 0.5,
                    },
                    emphasis: {
                        areaColor: '#276fce',

                    }
                },
                regions: [{
                    name: '南海诸岛',
                    itemStyle: {
                        areaColor: 'rgba(0, 10, 52, 1)',

                        borderColor: 'rgba(0, 10, 52, 1)',
                        normal: {
                            opacity: 0,
                            label: {
                                show: false,
                                color: "#009cc9",
                            }
                        },


                    },
                    label: {
                        show: false,
                        color: '#FFFFFF',
                        fontSize: 12,
                    }
                }],

            },
            series: series
        };
        myChart.setOption(option);

        window.addEventListener('resize', function () {
            myChart.resize();
        });
    })
})();

Answer 1

基于Monster 组和GPT的调写：
1.在 chinaDatas 数组中添加链接信息。修改chinaDatas数组，添加 "url" 属性，对应该地区要跳转到的网页链接。例如，如果想跳转到百度的首页，可以这样设置：

{
name: "北京市",
value: 0,
url: "https://www.baidu.com"
}

2.在初始化图表时，设置地图系列的 tooltip 属性。在调用 echarts.init() 方法时，可以传入一个配置对象，其中设置 series 中的 tooltip 属性。tooltip 的 formatter 属性可以设置提示框的显示内容，例如：

var myChart = echarts.init(document.querySelector('.chart'));
myChart.setOption({
tooltip: {
formatter: function(params) {
if (params.data && params.data.url) {
return '<a href="' + params.data.url + '">' + params.name + '</a>';
} else {
return params.name;
}
}
},
series: [{
...
}]
});

上述代码中，如果当前地区的数据中有 url 属性，就会将提示框的显示内容设置为链接，否则显示地区名称。
3.绑定点击事件。在上述代码中添加点击事件监听器，监听地图的点击事件，如果当前点击的地区有链接，则在新窗口打开该链接。例如：

myChart.on('click', function(params) {
if (params.data && params.data.url) {
window.open(params.data.url);
}
});

上述代码中，如果当前点击的地区的数据中有 url 属性，则在新窗口打开该链接。
4.设置回退功能。点击链接打开新窗口后，需要能够回到当前网页。可以在打开链接时设置一个临时的 cookie，用于记录当前页面的 URL。当点击新打开的窗口中的返回按钮时，可以从 cookie 中读取记录的 URL，并跳转到该 URL。例如：

myChart.on('click', function(params) {
if (params.data && params.data.url) {
document.cookie = 'referrer=' + window.location.href;
window.open(params.data.url);
}
});

在当前页面中添加一个监听器，监听 cookie 的变化，当 cookie 中的 referrer 值改变时，表示用户从其他页面返回了当前页面，此时可以调用 history.go(-1) 方法进行回退。例如：

window.addEventListener('load', function() {
var referrer = getCookie('referrer');
if (referrer) {
document.cookie = 'referrer=;expires=Thu, 01 Jan 1970 00:00:01 GMT';
history.replaceState(null, '', referrer);
}
});

上述代码中，getCookie() 函数用于从 cookie 中获取指定的值，history.replaceState() 方法用于更新浏览器的历史记录，将当前页面的 URL 修改为从 cookie 中读取的 referrer 值。