Echarts地图

echats地图使用

<template>
    <div id='mapId' :style="{width:'100%',height:'100%'}">div>
template>

设置option：

this.charts = this.$echarts.init(document.getElementById('mapId'),'macarons')
// 初始化

// 参数配置
this.charts.setOption({
                    title : {
                        text: '用户地域分布',
                        show: false,
                        textStyle:{
                            fontSize: 18,
                            fontWeight: 600,
                            color:'#333'
                        }
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: (params)=> {
                            return this.time + '
' +
                            params.data.name + '客户数: ' + params.data.value + '
' + 
                            '占比: ' + params.data.rate
                        }
                    },
                    dataRange: {
                        min: 0,
                        max: 300,
                        x: '50',
                        y: '260',
                        text:['高','低'],          
                        calculable : true,
                        inRange: {
                            color: ['#e0ffff', '#58aaeb'],
                            symbolSize: [100, 100]
                        }
                    },
                    geo: {
                        map: "china",
                        scaleLimit: {
                            min: 1,
                            max: 2
                        },
                        zoom: 1,
                        label: {
                            normal: {
                                show:true,
                                fontSize: "14",
                                color: "rgba(0,0,0,0.7)"
                            }
                        }
                    },
                    series: [
                    {
                        name: "用户地域分布",
                        type: "map",
                        geoIndex: 0,
                        data: this.mapData
                    }
                    ],
                }) 

                // 省份点击事件
                this.charts.on('click', (params)=> {
                    this.$emit('mapClick', params.name)
                })

地图点击事件触发请求多次（坑）

原因： 点击事件需要清除 否则会累加

解决代码：

 	this.charts.off('click')   // 点击事件前先清除事件
    this.charts.on('click', (params)=> {
         this.$emit('mapClick', params.name)
    })