Echarts地图从.js文件获取数据并定时自动刷新、修改Tooltip等的请教

[ajunajun]

我参考的实例是：https://gallery.echartsjs.com/editor.html?c=xBy65Bibpb
JavaScript代码如下：

    <div id="RightSecond" style="width:27%;height:37%;top:31.8%;right:0.2%;position:absolute;border-style:solid;border-width:1.5px;border-color:#404a59;background-size:100% 100%!important;"></div>
    <script src="js/chinam3data.js"></script>
    <script src="js/chinam3geo.js"></script>
    <script type="text/javascript">
    function loadScript(url, callback) {
        var script = document.createElement("script")
        script.type = "text/javascript";
        if (script.readyState) { //IE
            script.onreadystatechange = function() {
                if (script.readyState == "loaded" || script.readyState == "complete") {
                    script.onreadystatechange = null;
                    callback();
                }
            };
        } else { //Others
            script.onload = function() {
                callback();
            };
        }
        script.src = url;
        document.getElementsByTagName("head")[0].appendChild(script);
    }
            // 基于准备好的dom，初始化echarts实例
            var RightSecondChart = echarts.init(document.getElementById('RightSecond'));    
            // 指定图表的配置项和数据
var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
            res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
            });
        }
    }
    return res;
};
//按量级分颜色
option3 = {
    backgroundColor: '',
    title: {
        text: '创业项目分布地图',
        left: 'center',
        textStyle: {
            color: '#fff'
        }
    },
    tooltip : {
        trigger: 'item'
    },
    legend: {
        show: false,
        orient: 'vertical',
        y: 'bottom',
        x:'right',
        data:['项目数量'],
        textStyle: {
            color: '#fff'
        }
    },
    geo: {
        map: 'china',
        label: {
            emphasis: {
                show: false
            }
        },
        layoutCenter: ['50%', '50%'],
        layoutSize: "125%",
        roam: true,
        itemStyle: {
            normal: {
                color: 'rgba(37, 43, 61, .5)',
                //地图背景色 rgba(90,108, 128, 1)
                borderColor: 'white' //省市边界线'rgba(100,149,237,1)'
                //areaColor: '#323c48',
                //borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series : [
        {
            name: '',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: convertData(data),
            symbolSize: function (val) {
                return val[2] *2;
            },
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: false
                },
                emphasis: {
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: 'red'
                    //color: 'rgba(37, 43, 61, 1)',
                }
            }
        },
        {
            name: 'Top 5',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: convertData(data.sort(function (a, b) {
                return b.value - a.value;
            }).slice(0, 5)),
            symbolSize: function (val) {
                return val[2] * 2;
            },
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: 'red',
                    shadowBlur: 10,
                    shadowColor: '#333'
                }
            },
            zlevel: 1
        }
    ]
};
    // 间隔30秒刷新数据
    RightSecondChart.setOption(option3);
    myEcharts.push(RightSecondChart);
    setInterval(function() {
      loadScript('js/chinam3data.js', function() {
        RightSecondChart.clear();
        option3.series[0].data = convertData(data);
        option3.series[1].data = convertData(data.sort(function (a, b) {}).slice(0, 5));
        RightSecondChart.setOption(option3); //,true
      });
      loadScript('js/chinam3geo.js', function() {
        RightSecondChart.clear();
        

        RightSecondChart.setOption(option3); //,true
      });
    },
    30000);
</script>

chinam3data.js文件内容如下：

var data = [
     {name: '海门', value: 9},
     {name: '鄂尔多斯', value: 12},
     {name: '招远', value: 12},
     {name: '舟山', value: 12},
     {name: '齐齐哈尔', value: 14},
     {name: '盐城', value: 15},
];

chinam3geo.js文件内容如下：

var geoCoordMap = {
    '海门':[121.15,31.89],
    '鄂尔多斯':[109.781327,39.608266],
    '招远':[120.38,37.35],
    '舟山':[122.207216,29.985295],
    '齐齐哈尔':[123.97,47.33],
    '盐城':[120.13,33.38],
};

请教问题：
1、现在气泡提示的是“海门:31.89”后面的数值是“纬度”，我想要的是“海门 9”，后面是value值，中间是空格；
2、“// 间隔30秒刷新数据”后面的代码怎么改才能清除缓存并动态刷新数据？
3、标题"text: '创业项目分布地图',"从js文件读取

期待囧哥帮忙，非常感谢！！！

[囧]

<div id="RightSecond" style="width:27%;height:37%;top:31.8%;right:0.2%;position:absolute;border-style:solid;border-width:1.5px;border-color:#404a59;background-size:100% 100%!important;">
</div>
<script src="js/chinam3data.js"></script>
<script src="js/chinam3geo.js"></script>
<script type="text/javascript">
    function loadScript(url, callback) {
        var script = document.createElement("script")
        script.type = "text/javascript";
        if (script.readyState) { //IE
            script.onreadystatechange = function() {
                if (script.readyState == "loaded" || script.readyState == "complete") {
                    script.onreadystatechange = null;
                    callback();
                }
            };
        } else { //Others
            script.onload = function() {
                callback();
            };
        }
        script.src = url;
        document.getElementsByTagName("head")[0].appendChild(script);
    }
	function loadScriptArray(array, callback){
		for(var i = 0; i < array.length; i++){
			(function(i){
				loadScript(array[i], function(){
					array[i] = '';
					if(array.join('') == ''){
						callback();
					}
				});
			})(i);
		};
	}
    // 基于准备好的dom，初始化echarts实例
    var RightSecondChart = echarts.init(document.getElementById('RightSecond'));
    // 指定图表的配置项和数据
    var convertData = function(data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
                res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value)
                });
            }
        }
        return res;
    };
    //按量级分颜色
	function getOption(title, data){
		var option3 = {
			backgroundColor: '',
			title: {
				text: title,
				left: 'center',
				textStyle: {
					color: '#fff'
				}
			},
			tooltip: {
				trigger: 'item'
			},
			legend: {
				show: false,
				orient: 'vertical',
				y: 'bottom',
				x: 'right',
				data: ['项目数量'],
				textStyle: {
					color: '#fff'
				}
			},
			geo: {
				map: 'china',
				label: {
					emphasis: {
						show: false
					}
				},
				layoutCenter: ['50%', '50%'],
				layoutSize: "125%",
				roam: true,
				itemStyle: {
					normal: {
						color: 'rgba(37, 43, 61, .5)',
						//地图背景色 rgba(90,108, 128, 1)
						borderColor: 'white' //省市边界线'rgba(100,149,237,1)'
						//areaColor: '#323c48',
						//borderColor: '#111'
					},
					emphasis: {
						areaColor: '#2a333d'
					}
				}
			},
			series: [{
				name: '',
				type: 'scatter',
				coordinateSystem: 'geo',
				data: convertData(data),
				symbolSize: function(val) {
					return val[2] * 2;
				},
				label: {
					normal: {
						formatter: '{b}',
						position: 'right',
						show: false
					},
					emphasis: {
						show: true
					}
				},
				itemStyle: {
					normal: {
						color: 'red'
						//color: 'rgba(37, 43, 61, 1)',
					}
				}
			},
			{
				name: 'Top 5',
				type: 'effectScatter',
				coordinateSystem: 'geo',
				data: convertData(data.sort(function(a, b) {
					return b.value - a.value;
				}).slice(0, 5)),
				symbolSize: function(val) {
					return val[2] * 2;
				},
				showEffectOn: 'render',
				rippleEffect: {
					brushType: 'stroke'
				},
				hoverAnimation: true,
				label: {
					normal: {
						formatter: '{b}',
						position: 'right',
						show: true
					}
				},
				itemStyle: {
					normal: {
						color: 'red',
						shadowBlur: 10,
						shadowColor: '#333'
					}
				},
				zlevel: 1,
				tooltip:{
					formatter: function(params){
						console.log(params);
						return params.name + ' ' + params.data.value[2];
					}
				}
			}]
		};
		return option3;
	}
    // 间隔30秒刷新数据
	var option3 = getOption(chartTitle, data);
    RightSecondChart.setOption(option3);
    myEcharts.push(RightSecondChart);
    setInterval(function() {
        loadScriptArray(['js/chinam3data.js', 'js/chinam3geo.js'], function() {
            RightSecondChart.clear();
            option3 = getOption(chartTitle, data);
            RightSecondChart.setOption(option3); //,true
        });
    }, 10000);
</script>

var data = [
     {name: '海门', value: 9},
     {name: '鄂尔多斯', value: 12},
     {name: '招远', value: 12},
     {name: '舟山', value: 12},
     {name: '齐齐哈尔', value: 14},
     {name: '盐城', value: 15},
];
var chartTitle = '创业项目分布地图';

[ajunajun]

引用 1 楼 囧 的回复:

……
var chartTitle = '创业项目分布地图';

只有top5显示value值，其它的显示的还是纬度值？改了一下没搞定

[囧]

<div id="RightSecond" style="width:27%;height:37%;top:31.8%;right:0.2%;position:absolute;border-style:solid;border-width:1.5px;border-color:#404a59;background-size:100% 100%!important;">
</div>
<script src="js/chinam3data.js"></script>
<script src="js/chinam3geo.js"></script>
<script type="text/javascript">
    function loadScript(url, callback) {
        var script = document.createElement("script")
        script.type = "text/javascript";
        if (script.readyState) { //IE
            script.onreadystatechange = function() {
                if (script.readyState == "loaded" || script.readyState == "complete") {
                    script.onreadystatechange = null;
                    callback();
                }
            };
        } else { //Others
            script.onload = function() {
                callback();
            };
        }
        script.src = url;
        document.getElementsByTagName("head")[0].appendChild(script);
    }
	function loadScriptArray(array, callback){
		for(var i = 0; i < array.length; i++){
			(function(i){
				loadScript(array[i], function(){
					array[i] = '';
					if(array.join('') == ''){
						callback();
					}
				});
			})(i);
		};
	}
    // 基于准备好的dom，初始化echarts实例
    var RightSecondChart = echarts.init(document.getElementById('RightSecond'));
    // 指定图表的配置项和数据
    var convertData = function(data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
                res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value)
                });
            }
        }
        return res;
    };
    //按量级分颜色
	function getOption(title, data){
		var option3 = {
			backgroundColor: '',
			title: {
				text: title,
				left: 'center',
				textStyle: {
					color: '#fff'
				}
			},
			tooltip: {
				trigger: 'item'
			},
			legend: {
				show: false,
				orient: 'vertical',
				y: 'bottom',
				x: 'right',
				data: ['项目数量'],
				textStyle: {
					color: '#fff'
				}
			},
			geo: {
				map: 'china',
				label: {
					emphasis: {
						show: false
					}
				},
				layoutCenter: ['50%', '50%'],
				layoutSize: "125%",
				roam: true,
				itemStyle: {
					normal: {
						color: 'rgba(37, 43, 61, .5)',
						//地图背景色 rgba(90,108, 128, 1)
						borderColor: 'white' //省市边界线'rgba(100,149,237,1)'
						//areaColor: '#323c48',
						//borderColor: '#111'
					},
					emphasis: {
						areaColor: '#2a333d'
					}
				}
			},
			series: [{
				name: '',
				type: 'scatter',
				coordinateSystem: 'geo',
				data: convertData(data),
				symbolSize: function(val) {
					return val[2] * 2;
				},
				label: {
					normal: {
						formatter: '{b}',
						position: 'right',
						show: false
					},
					emphasis: {
						show: true
					}
				},
				itemStyle: {
					normal: {
						color: 'red'
						//color: 'rgba(37, 43, 61, 1)',
					}
				},
				tooltip:{
					formatter: function(params){
						return params.name + ' ' + params.data.value[2];
					}
				}
			},
			{
				name: 'Top 5',
				type: 'effectScatter',
				coordinateSystem: 'geo',
				data: convertData(data.sort(function(a, b) {
					return b.value - a.value;
				}).slice(0, 5)),
				symbolSize: function(val) {
					return val[2] * 2;
				},
				showEffectOn: 'render',
				rippleEffect: {
					brushType: 'stroke'
				},
				hoverAnimation: true,
				label: {
					normal: {
						formatter: '{b}',
						position: 'right',
						show: true
					}
				},
				itemStyle: {
					normal: {
						color: 'red',
						shadowBlur: 10,
						shadowColor: '#333'
					}
				},
				zlevel: 1,
				tooltip:{
					formatter: function(params){
						return params.name + ' ' + params.data.value[2];
					}
				}
			}]
		};
		return option3;
	}
    // 间隔30秒刷新数据
	var option3 = getOption(chartTitle, data);
    RightSecondChart.setOption(option3);
    myEcharts.push(RightSecondChart);
    setInterval(function() {
        loadScriptArray(['js/chinam3data.js', 'js/chinam3geo.js'], function() {
            RightSecondChart.clear();
            option3 = getOption(chartTitle, data);
            RightSecondChart.setOption(option3); //,true
        });
    },30000);
</script>

[ajunajun]

我的大神，太崇拜了，非常感谢您解决了目前我所有的问题，您辛苦啦！！！