echars Dynamically implement the scatter chart and customize the information prompt box  

First step . Get the of the current city json file

dependent js Everyone should have the documents , I won't do that here

var i="";
var  s="https://geo.datav.aliyun.com/areas_v2/bound/"+i+"_full.json"// This i Is the number of the current map I got from the background , obtain json The address for http://datav.aliyun.com/tools/atlas/#&lat=30.316551722910077&lng=106.68898666525287&zoom=3.5,

It just needs to be modified code You can get maps of different regions by numbering json

The second step . Custom scatter address , And the value of the prompt , Of course , You can also get it from the background , As long as the corresponding format is set, the dynamic map can be realized

    var data= [
           { name: ' Jiexiu City ', coord: [111.925687,37.024147], value: '78',value2: '32' },
           { name: ' Taigu District ', coord: [112.595903,37.439316], value: '92',value2: '33' },
           { name: ' Shouyang railway station ', coord: [113.194911,37.894017], value: '55',value2: '24' },
           { name: ' Pingyao Ancient City ', coord: [112.158312,37.167077], value: '33',value2: '20' },
]// The specific values here can be added all the time , Continue writing after the array value3,value4, That's all right. , Of course, you can also customize the field name , Coordinates, you can from Baidu 

Coordinate picker acquisition https://api.map.baidu.com/lbsapi/getpoint/index.html, Post the address to everyone

The third step . Initialize map

            $.get(s, function (chinaJson) {
                echarts.registerMap('city', chinaJson); //  Name data , I understand 
                var  chart1 = echarts.init(document.getElementById('main8'));
                chart1.setOption({
                    title: {
                        text: ' China   Shanxi Province  '+city,
                        left: 'center',
                        textStyle: {
                            color: 'white',
                            fontStyle: 'normal',
                            fontWeight: 'bold',
                            fontSize: 32,
                            lineHeight: 80,
                            textBorderColor: 'green',
                            textBorderWidth: 1,
                            textShadowColor: 'green',
                            textShadowBlur: 10,
                            textShadowOffsetX: 2,
                            textShadowOffsetY: 2
                        }
                    },
                    tooltip: {        // Custom prompt box information 
                        trigger: 'item',
                        formatter:function(params){

                            console.log(params)// Here you can take a look at the printed data format , Then assign it to the following 
                            let  text=params.name+"<br> Outlet water temperature ："+params.value+"<br> Return water temperature ："+params.data.value2// This is actually a paragraph html Code ,div, The background color , Font size can be set , Setting method and css equally 
                            return text

                        }
                    },
                    series: [{
                        name: 'city',
                        type: 'map',
                        mapType: 'city',
                        markPoint: { // Chart labels .
                            label: {
                                normal: {
                                    show: false,
                                },
                                emphasis: {
                                    show: false,
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: 'red'
                                }
                            },
                            data:data// Custom scatter , Here, just put the defined array or the array passed from the background here 
                        },
                        roam:true,
                        selectedMode: false,//single  According to the radio ;multiple Multiple choice   Default flase No election 
                        label: {
                            normal: {
                                textStyle: { fontSize: 12,
                                    fontWeight: 'bold',
                                    color: '#0090FF' }
                            }
                        },
                        itemStyle: {
                            normal: {
                                borderWidth:3,
                                areaColor:'#0C2452',
                                label: {
                                    show: true,// Whether to display the province name by default 
                                },
                                areaStyle: {
                                    color: '#0655B7',// Default map plate color 
                                },
                                borderWidth:3,
                                borderColor:'#0655B7',
                            },
                            emphasis: {
                                borderColor: '#2378f7',  //  The stroke color of the figure  #2378f7
                                borderWidth: '1',
                                areaColor: '#233F53', //  Shadow color  #233F53
                                label: {
                                    show: false,
                                    textStyle: {
                                        color: '#fff',
                                        fontSize: 14,
                                    }
                                },


                            },

                        },


                        // This is the loaded data 
                    }]

                });
               

            });

It's done here

Step four . Let's go over the result map