echarts地图添加点击事件

Question

现在是要点击地图的某一个省份，为查看添加点击事件

给地图添加了点击事件，但如何给查看添加 ？

        
serverChartMap.on('click', function (params) {
    console.log(params);
});

Answer 1

已解决；
可以在 tooltip 中设置button 块添加点击事件；

Vue.component('server_qgfwzs', {
    data() {
            return {
                provinceCode: '',
                list: [],
            }
        },
        mounted() {
            this.mychart = echarts.init(document.getElementById('server_map'));
            let _this = this;
            var option = {
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        return (
                            '中国 ' + '<button class="more" style="color: red;" type="button" onclick="' +
                            _this.goToDetail(params.name) +
                            '">查 看></button>' + '<br>' +
                            params.name + '&nbsp' + params.value

                        );
                    },
                    enterable: true,
                    alwaysShowContent: true,
                    position: function (point) {
                        return [point[0] + 5, point[1] + 5];
                    }
                },

                // 视觉映射组件
                visualMap: {
                    type: 'piecewise', // 类型为分段型。
                    splitNumber: '4', // 段数
                    align: 'right',
                    pieces: [
                        { min: 0, max: 25, label: '<25分', color: '#71C1FF', align: 'bottom' },
                        { min: 25, max: 50, label: '<50分', color: '#38A0FF', align: 'bottom' },
                        { min: 50, max: 75, label: '<75分', color: '#1180EC', align: 'bottom' },
                        { min: 75, label: '<100分', color: '#0153B7', align: 'bottom' },
                    ],
                    itemWidth: '15%',
                    itemHeight: '10',
                    orient: 'vertical', // 水平（'horizontal'）或者竖直（'vertical'）
                    bottom: '10',
                    left: '10',
                    selectedMode: 'multiple', // 'multiple'（多选）,'single'（单选）
                    inRange: {
                        color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
                        symbolSize: [30, 100]
                    }
                },
            };
            this.mychart.setOption(option);
        },
        methods: {
            // 首页地图
            serverMapDetail() {
                // 随机赋值
                var anyVal = function () {
                    return Math.round(Math.random() * 100);
                }
                var server_data_list = [
                    { name: '北京', value: anyVal() }, { name: '天津', value: anyVal() },
                    { name: '上海', value: anyVal() }, { name: '重庆', value: anyVal() },
                    { name: '河北', value: anyVal() }, { name: '河南', value: anyVal() },
                    { name: '云南', value: anyVal() }, { name: '黑龙江', value: anyVal() },
                    { name: '湖南', value: anyVal() }, { name: '山东', value: anyVal() },
                    { name: '新疆', value: anyVal() }, { name: '浙江', value: anyVal() },
                    { name: '江西', value: anyVal() }, { name: '湖北', value: anyVal() },
                    { name: '广西', value: anyVal() }, { name: '甘肃', value: anyVal() },
                    { name: '山西', value: anyVal() }, { name: '内蒙古', value: anyVal() },
                    { name: '辽宁', value: anyVal() }, { name: '青海', value: anyVal() },
                    { name: '安徽', value: anyVal() }, { name: '江苏', value: anyVal() },
                    { name: '陕西', value: anyVal() }, { name: '吉林', value: anyVal() },
                    { name: '福建', value: anyVal() }, { name: '贵州', value: anyVal() },
                    { name: '广东', value: anyVal() }, { name: '西藏', value: anyVal() },
                    { name: '四川', value: anyVal() }, { name: '宁夏', value: anyVal() },
                    { name: '海南', value: anyVal() }, { name: '澳门', value: anyVal() },
                    { name: '台湾', value: anyVal() }, { name: "南海诸岛", value: anyVal() }
                ]
                // 指定图表的配置项和数据
                this.mychart.setOption({
                    series: [{
                        name: '中国 查看>',
                        type: 'map',
                        map: 'china',
                        geoIndex: 0,
                        data: server_data_list
                    }],
                })
            },
            // 跳转省份下钻
            goToDetail(provinceCode) {
                // this.provinceCode = provinceCode;
                document.getElementById('server_map').addEventListener('click', () => {
                    let el = ev.target;
                    if (el.tagName.toLowerCase() === 'button' && el.className === 'more') {
                        console.log(provinceCode)
                        // Emp.execute(`gotoProvince('')`)
                    }
                })

            },
        },
        watch: {
            list(val) {
                if(val){
                    this.serverMapDetail()
                }
            }
        },
        template: `
            <!-- 地图部分 -->
            <div id="server_map" class="content-charts" ></div>

            `
 })