echars动态实现散点图并自定义信息提示框 

第一步.获取当前城市的json文件

相关的js文件大家应该都有，这里就不写了

var i=""; var s="https://geo.datav.aliyun.com/areas_v2/bound/"+i+"_full.json"//这个i是我从后台获取的当前地图的编号，获取json的地址为http://datav.aliyun.com/tools/atlas/#&lat=30.0077&lng=106.287&zoom=3.5，

 
讯享网

只需要修改code编号就可以获取不同地区的地图json

第二步.自定义散点地址，和提示信息的值，当然，你也可以从后台获取，只要设置成相应的格式就可以实现动态地图

讯享网 var data= [ { name: '介休市', coord: [111.,37.024147], value: '78',value2: '32' }, { name: '太谷区', coord: [112.,37.], value: '92',value2: '33' }, { name: '寿阳站', coord: [113.,37.], value: '55',value2: '24' }, { name: '平遥古城', coord: [112.,37.], value: '33',value2: '20' }, ]//这里具体的值可以一直添加，在数组后面继续写value3，value4，就可以了，当然你也可以自定义字段名称，坐标的话你可从百度 

坐标拾取器获取https://api.map.baidu.com/lbsapi/getpoint/index.html，地址也贴给大家

第三步.初始化地图

 $.get(s, function (chinaJson) { echarts.registerMap('city', chinaJson); // 给数据命名，本人理解 var chart1 = echarts.init(document.getElementById('main8')); chart1.setOption({ title: { text: '中国 山西省 '+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: { //自定义提示框信息 trigger: 'item', formatter:function(params){ 

讯享网                            console.log(params)//这里可以看一下打印出来的数据格式，然后赋值到下面
                            let  text=params.name+"<br>出水温度："+params.value+"<br>回水温度："+params.data.value2//这里其实就是一段html代码，div，背景颜色，字体大小都可以设置，设置方法和css一样
                            return text

                        }
                    },
                    series: [{
                        name: 'city',
                        type: 'map',
                        mapType: 'city',
                        markPoint: { //图表标注。
                            label: {
                                normal: {
                                    show: false,
                                },
                                emphasis: {
                                    show: false,
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: 'red'
                                }
                            },
                            data:data//自定义散点图，这里把定义好的或者后台传过来的数组放这里就好了
                        },
                        roam:true,
                        selectedMode: false,//single 表示单选;multiple表示多选 默认flase不选
                        label: {
                            normal: {
                                textStyle: { fontSize: 12,
                                    fontWeight: 'bold',
                                    color: '#0090FF' }
                            }
                        },
                        itemStyle: {
                            normal: {
                                borderWidth:3,
                                areaColor:'#0C2452',
                                label: {
                                    show: true,//默认是否显示省份名称
                                },
                                areaStyle: {
                                    color: '#0655B7',//默认的地图板块颜色
                                },
                                borderWidth:3,
                                borderColor:'#0655B7',
                            },
                            emphasis: {
                                borderColor: '#2378f7',  // 图形的描边颜色 #2378f7
                                borderWidth: '1',
                                areaColor: '#233F53', // 阴影色 #233F53
                                label: {
                                    show: false,
                                    textStyle: {
                                        color: '#fff',
                                        fontSize: 14,
                                    }
                                },


                            },

                        },


                        //此为加载的数据
                    }]

                });
               

            });

到这里就做完了

第四步.上一下成果图