echarts地图下钻打点案例

<div id="china3" :style="{height:'700px',width:'100%',background:'#0b0518'}"></div>

import echarts from 'echarts'
import '../../../static/js/china.js' // 引入中国地图数据
import {provinceJson,cityArr} from './mapjson.js'//相关省市json
export default {
    name: 'chinaMapList',
    title: '营业点中国地图分布',
    components: {},
    data() {
        return {
            chinaJson: null,
            cityArr: cityArr,
            option: null,
            data: [],
            province: '',
            provinceJson:provinceJson
        }
    },
    methods: {
        chinaJsonLoad() {
            this.$get('/static/json/china.json').then(res => {
                this.chinaJson = JSON.parse(JSON.stringify(res.data))
                setTimeout(()=>{
                    this.loadChina3()
                },100)
            })
        },
        //展示中国地图
        showChina() {
            this.province = ''
            this.getMapRefionDataLoad()//调用对应数量
        },
        //展示城市
        showCity(zhName, pyName) {
            this.$get('/static/json/province/' + pyName + '.json').then(res => {
                this.chinaJson = res.data
                this.getMapCityDataLoad(zhName)//调用数量
            })
        },
        //全部加载
        getMapRefionDataLoad() {
            this.$get(this.GLOBAL.API_GET_MAP_TABLE2).then(res => {
                res.data.data.forEach(item => {
                  item['name'] = item['省份']
                  item['amountAll'] = item['总体销售额']
                  item['value'] = item['渠道数量']
                  item['selfAmount'] = item['自有产品销售额']
                })
                this.data = res.data.data
                this.chinaJsonLoad()
            })
        },
        //城市加载
        getMapCityDataLoad(zhName) {
          console.log('市')
            this.province = zhName
            if (zhName == "北京市" || zhName == "天津市" || zhName == "重庆市" || zhName == "上海市") {
                let params = {
                    province: zhName,
                    city: zhName
                }
                let url = this.GLOBAL.API_GET_MAP_COUNTY
                this.$get(url, params).then(res => {
                    res.data.data.forEach(item => {
                        item['name'] = item['区县']
                        item['amountAll'] = item['总体销售额']
                        item['value'] = item['渠道数量']
                        item['selfAmount'] = item['自有产品销售额']
                    })
                    this.data = res.data.data                  
                    this.loadChina3(zhName)
                })
            } else {
                let params = {
                    province: zhName
                }
                let url = this.GLOBAL.API_GET_MAP_CITY
                this.$get(url, params).then(res => {
                    res.data.data.forEach(item => {
                        item['name'] = item['城市']
                        item['amountAll'] = item['总体销售额']
                        item['value'] = item['渠道数量']
                        item['selfAmount'] = item['自有产品销售额']
                    })
                    this.data = res.data.data              
                    this.loadChina3(zhName)
                })
            }
        },
        //营业点分布echarts地图
        loadChina3(cityNameValue='china') {
          console.log(cityNameValue)
            var myChart = echarts.init(document.getElementById('china3'));
            echarts.registerMap(cityNameValue||'china', this.chinaJson)// 注册地图   
            let _this=this;
          
            var convertData = function (data) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var geoCoord = _this.provinceJson[data[i].name];
                    if (geoCoord) {
                        res.push({
                            name: data[i].name,
                            value: geoCoord.concat(data[i].value),
                            value1: data[i].value,
                            amountAll:data[i].amountAll,
                            selfAmount:data[i].selfAmount
                        });
                    }
                }
                return res;
            };
            let option = null;    
            option = {
                backgroundColor: '#0b0518',//地图背景色
                title: {
                    text: '营业点分布图',
                    left: '40%',
                    top: 'top',
                    textStyle: {
                        color: '#fff'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function (a) {
                        return `${a['name']}</br>渠道数量: ${a['data'] && a['data'].value1&&a['data'].value1.toString().replace(/\B(?=(?:\d{3})+\b)/g, ',') || 0} 个</br>总体销售额: ${a['data'] && a['data'].amountAll&&a['data'].amountAll.toString().replace(/\B(?=(?:\d{3})+\b)/g, ',') || 0} 万元 </br>自有产品销售额: ${a['data'] && a['data'].selfAmount&& a['data'].selfAmount.toString().replace(/\B(?=(?:\d{3})+\b)/g, ',') || 0} 万元`
                    }
                },
                geo: {
                    map: cityNameValue||'china',
                    roam: true, //是否开启平游或缩放
                    label: {
                        normal: {//是否展示省市区文字展示
                            show: false
                            // show: true
                        },
                        emphasis: {
                            show: false
                        },           
                    },
                    itemStyle: {
                        normal: {
                            areaColor: '#363c47',
                            borderColor: '#454950'
                        },
                        emphasis: {
                            areaColor: '#363c47',
                        }
                    }
                },
                series: [
                    {
                        type: 'effectScatter',
                        mapType: cityNameValue ||'china',
                        coordinateSystem: 'geo', 
                        data: convertData(this.data),
                        symbolSize: function (val) {
                            if(val[2]<400){
                                return 4
                            }else{
                                return val[2] / 150;
                            }
                        },
                        encode: {
                            value: 2
                        },
                        label: {
                            formatter: '{b}',
                            position: 'right',
                            show: false
                        },
                        itemStyle: {
                            color: '#0271d0'
                        },
                        emphasis: {
                            label: {
                                show: false
                            }
                        }
                    }
                ]
            };
            myChart.clear()
            myChart.setOption(option, true);
            myChart.off('click')
            myChart.on('click', (param) => {
                var cityName = param.name;// 城市中文名
                // 查找是否有对应城市，有则加载城市
                for (var i = 0, len = this.cityArr[0].length; i < len; i++) {
                    if (cityName == this.cityArr[0][i]) {
                        this.showCity(this.cityArr[0][i], this.cityArr[1][i]);
                        return;
                    }
                }
                //没有找到，返回中国地图
                this.showChina()
            });
            var myZoom
            myChart.on('georoam',function(params){
              console.log(params)
            })
        }
    },
    mounted() {
        this.getMapRefionDataLoad()
    },
    activated() {
        this.getMapRefionDataLoad()
    }
}