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.316551722910077&lng=106.68898666525287&zoom=3.5，

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

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

    var data= [{ name: '介休市', coord: [111.925687,37.024147], value: '78',value2: '32' },{ name: '太谷区', coord: [112.595903,37.439316], value: '92',value2: '33' },{ name: '寿阳站', coord: [113.194911,37.894017], value: '55',value2: '24' },{ name: '平遥古城', coord: [112.158312,37.167077], 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',  // 图形的描边颜色 #2378f7borderWidth: '1',areaColor: '#233F53', // 阴影色 #233F53label: {show: false,textStyle: {color: '#fff',fontSize: 14,}},},},//此为加载的数据}]});});

到这里就做完了

第四步.上一下成果图