Echarts的geo地图从.js文件获取数据并定时自动刷新的请教

ajunajun 2019-04-06 08:28:30

请教Echarts的geo地图从.js文件获取数据并定时自动刷新的问题，javascript代码如下：



    <div id="LeftSecond" style="width:25%;height:35%;top:33.8%;position:absolute;left:0.2%;border-style:solid;border-width:1.5px;border-color:#404a59;background-size:100% 100%!important;"></div>

    <script src="js/worldm7.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 LeftSecondChart = echarts.init(document.getElementById('LeftSecond'));

option2 = {

    backgroundColor: '',

    title: {

        text: '全球xx疾病人数分布',

        subtext: '',

        left: 'left',

        top: 'top',

        textStyle: {

            color: '#fff',

            fontSize: '16'

        }

    },

    tooltip: {

        trigger: 'item',

        position: 'bottom',

        textStyle: {

           color: '#fff',

           fontStyle: 'normal',

           fontFamily: '微软雅黑',

           fontSize: 6,

        },

        formatter: function(params) {

            var value = (params.value + '').split('.');

            value = value[1].split(',')[1];

            return params.name;

        }

    },

    visualMap: {

        show: false,

        min: 0,

        max: 100, //调整直径大小

        inRange: {

            symbolSize: [1, 60]

        }

    },

    //该项设置无效

    grid:{

          x:3,

          y:3,

          x2:3,

          y2:1,

          borderWidth:1

         },

    geo: {

        name: 'Enroll distribution',

        type: 'map',

        map: 'world',

        //改变地图位置和大小

        layoutCenter:['50%','55%'], //'50%'位置居中

        layoutSize:320,//改变地图大小

        roam: true,

        label: {

            emphasis: {

                show: true

            }

        },

        itemStyle: {

            normal: {

                areaColor: 'rgba(37, 43, 61, .5)',//#6df8f0#0092e7#36648Brgba(50, 195, 255, 1)#1874CD

                borderColor: '#91e6ff'

            },

            emphasis: {

                areaColor: '#6df8f0'

            }

        }

    },

    series: [{

        type: 'scatter',

        coordinateSystem: 'geo',

        zoom: 5, 

        data: DATA.map(function(item) {

            return {

                name: item[0] + item[1] ,

                value: [

                    item[3],

                    item[2],

                    Math.sqrt(item[1]) * 10

                ],

                itemStyle: {

                    normal: {

                        color: "red"

                    }

                }

            };

        })

    }]

};

    // 间隔20秒获取.js数据。

    LeftSecondChart.setOption(option2);

    myEcharts.push(LeftSecondChart);

    setInterval(function(){

        loadScript('js/worldm7.js', function(){

            LeftSecondChart.clear();

            option2.series[0].data = DATA;

            LeftSecondChart.setOption(option2);

        });

    }, 20000);

</script>

worldm7.js的文件内容如下：



var DATA = [

    ["悉尼", 3, -33.860489, 151.163061],

    ["新加坡", 2, 26.258324, 105.961714],

    ["天津市", 1, 39.14393, 117.210813],

    ["Kingston", 2, 44.268447, -76.512442],

    ["上塞纳省", 1, 48.8399127, 2.100653],

    ["明尼苏达州 明尼阿波利斯", 1, 44.953389, -93.202599],

    ["纽约州 纽约", 1, 40.79617, -73.983747],

    ["田纳西州 Franklin", 1, 41.394644, -79.824889],

    ["瑞典 斯德哥尔摩", 1, 59.338882, 18.075865],

    ["英国 英格兰", 1, 53.005662, -1.158626]

]

请教问题:
1、“// 间隔20秒获取.js数据。”下面的代码怎么改才能做到间隔20秒读取一次worldm7.js文件实现刷新？
2、“text: '全球xx疾病人数分布',”怎么从.js文件里读，也做到每20秒刷新一次？

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

...全文

534 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

ajunajun 2019-04-08

打赏
举报

哦。。。的确是，“function getOption(title, data){”和另一个图表的重名了，改过来就好了

囧 2019-04-08

打赏
举报

一个页面上有多个图表吗，option和chart变量是否同名了

ajunajun 2019-04-08

打赏
举报

引用 1 楼囧的回复:

[code=html]
……
你这个处理外来都差不多，把option放到函数里合成，刷新后再调用一次函数
如果DATA不用处理，就可以用option.series[0].data = DATA这样赋值

怎么过会刷新后跑到其他图表上了？
我把这两处的option改为option2也不行
（1）
function getOption(title, data){
var option = {
（2）
return option;
}
// 间隔20秒获取.js数据。

ajunajun 2019-04-08

打赏
举报

感谢囧哥！！！

主要是JavaScript代码完全不懂，用vb的思路在这瞎改，复杂点的改一天也成功不了，一次次请教您实在不好意思。。。

囧 2019-04-08

打赏
举报


<div id="LeftSecond" style="width:25%;height:35%;top:33.8%;position:absolute;left:0.2%;border-style:solid;border-width:1.5px;border-color:#404a59;background-size:100% 100%!important;">
</div>
<script src="js/worldm7.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 LeftSecondChart = echarts.init(document.getElementById('LeftSecond'));
	function getOption(title, data){
		var option = {
			backgroundColor: '',
			title: {
				text: title,
				subtext: '',
				left: 'left',
				top: 'top',
				textStyle: {
					color: '#fff',
					fontSize: '16'
				}
			},
			tooltip: {
				trigger: 'item',
				position: 'bottom',
				textStyle: {
					color: '#fff',
					fontStyle: 'normal',
					fontFamily: '微软雅黑',
					fontSize: 6,
				},
				formatter: function(params) {
					var value = (params.value + '').split('.');
					value = value[1].split(',')[1];
					return params.name;
				}
			},
			visualMap: {
				show: false,
				min: 0,
				max: 100,
				//调整直径大小
				inRange: {
					symbolSize: [1, 60]
				}
			},
			//该项设置无效
			grid: {
				x: 3,
				y: 3,
				x2: 3,
				y2: 1,
				borderWidth: 1
			},
			geo: {
				name: 'Enroll distribution',
				type: 'map',
				map: 'world',
				//改变地图位置和大小
				layoutCenter: ['50%', '55%'],
				//'50%'位置居中
				layoutSize: 320,
				//改变地图大小
				roam: true,
				label: {
					emphasis: {
						show: true
					}
				},
				itemStyle: {
					normal: {
						areaColor: 'rgba(37, 43, 61, .5)',
						//#6df8f0#0092e7#36648Brgba(50, 195, 255, 1)#1874CD
						borderColor: '#91e6ff'
					},
					emphasis: {
						areaColor: '#6df8f0'
					}
				}
			},
			series: [{
				type: 'scatter',
				coordinateSystem: 'geo',
				zoom: 5,
				data: data.map(function(item) {
					return {
						name: item[0] + item[1],
						value: [
						item[3], item[2], Math.sqrt(item[1]) * 10],
						itemStyle: {
							normal: {
								color: "red"
							}
						}
					};
				})
			}]
		};
		return option;
	}
    // 间隔20秒获取.js数据。
	var option2 = getOption(chartTitle, DATA);
    LeftSecondChart.setOption(option2);
    myEcharts.push(LeftSecondChart);
    setInterval(function() {
        loadScript('js/worldm7.js',
        function() {
            LeftSecondChart.clear();
            option2 = getOption(chartTitle, DATA);
            LeftSecondChart.setOption(option2);
        });
    }, 20000);
</script>


var DATA = [
    ["悉尼", 3, -33.860489, 151.163061],
    ["新加坡", 2, 26.258324, 105.961714],
    ["天津市", 1, 39.14393, 117.210813],
    ["Kingston", 2, 44.268447, -76.512442],
    ["上塞纳省", 1, 48.8399127, 2.100653],
    ["明尼苏达州 明尼阿波利斯", 1, 44.953389, -93.202599],
    ["纽约州 纽约", 1, 40.79617, -73.983747],
    ["田纳西州 Franklin", 1, 41.394644, -79.824889],
    ["瑞典 斯德哥尔摩", 1, 59.338882, 18.075865],
    ["英国 英格兰", 1, 53.005662, -1.158626]
];
var chartTitle = '全球xx疾病人数分布';

你这个处理外来都差不多，把option放到函数里合成，刷新后再调用一次函数如果DATA不用处理，就可以用option.series[0].data = DATA这样赋值

ajunajun 2019-04-08