Echarts读取js文件清除缓存并自动刷新某个图表的请教

[ajunajun]

用Echarts写了一个界面，里面有10几个图表，都是通过读取.js文件进行数据显示的，因为有的图表想让20秒刷新一次，有的想1分钟刷新一次，所以还不能定时刷新整个页面。
我是小白，从网上找了一些数据定时自动刷新的代码，有的是通过ajax获取json文件，有的写到我代码里不管用，还请各位大神帮帮忙！！！
页面代码如下：

    <div id="AlarmSum" style="width:9%;height:9%;top:5%;left:32%;position:absolute;border-color:#404a59;background-size:100% 100%!important;"></div>
    <script src="js/alarmsum.js"></script>
    <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var AlarmSumChart = echarts.init(document.getElementById('AlarmSum'));    
            option12 = {
                series: [{
                    type: 'pie',
                    cursor: 'default',
                    radius: ['65%', '78%'],
                    center: ['50%', '50%'],
                    color: function(a) {
                           console.log(a.value);
                           if (a.value >0)
                               return "red";
                           else
                               return "#00CCFF";
                    },
                    label: {
                        show: true,
                        position: 'center',
                        formatter: [
                            '{x|{c}}',
                            '{x|{b}}'
                       ].join('\n'),
                        rich: {
                            x: {
                                fontSize: 12,
                                fontFamily: '微软雅黑',
                                fontWeight: 'bolder',
                                padding: 1.5,
                            },
                        }
                    },
                    data: series_data,
                }],
                animation: false,
            };
            // 使用刚指定的配置项和数据显示图表。
            AlarmSumChart.setOption(option12);
            myEcharts.push(AlarmSumChart);
        </script>

alarmsum.js文件内容如下：

var series_data = [{value: 0,name: '告警条数'}];

请教问题：
定时（比如每间隔20s）自动刷新该图表，刷新前清除缓存。
我用其他语言修改.js文件中的数据，之前没学过JavaScript，还望大神麻烦在上面的代码中修改，或者告诉加在哪行，非常感谢！！！

[ajunajun]

引用 5 楼 囧 的回复:

用你现在的div标签
如果有多个js数据文件，注意变量名series_data要修改

老哥，麻烦您给写一下呗，我实在是0基础，得查好长时间也不一定能搞定

[囧]

<div id="AlarmSum" style="width:9%;height:9%;top:5%;left:32%;position:absolute;border-color:#404a59;background-size:100% 100%!important;"></div>
<script src="js/alarmsum.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 AlarmSumChart = echarts.init(document.getElementById('AlarmSum'));    
	option12 = {
		series: [{
			type: 'pie',
			cursor: 'default',
			radius: ['65%', '78%'],
			center: ['50%', '50%'],
			color: function(a) {
				   console.log(a.value);
				   if (a.value >0)
					   return "red";
				   else
					   return "#00CCFF";
			},
			label: {
				show: true,
				position: 'center',
				formatter: [
					'{x|{c}}',
					'{x|{b}}'
			   ].join('\n'),
				rich: {
					x: {
						fontSize: 12,
						fontFamily: '微软雅黑',
						fontWeight: 'bolder',
						padding: 1.5,
					},
				}
			},
			data: series_data,
		}],
		animation: false,
	};
	// 使用刚指定的配置项和数据显示图表。
	AlarmSumChart.setOption(option12);
	myEcharts.push(AlarmSumChart);
	setInterval(function(){
		loadScript('js/alarmsum.js', function(){
			AlarmSumChart.clear();
			option12.series[0].data = series_data;
			AlarmSumChart.setOption(option12);
		});
	}, 20000);
</script>

[ajunajun]

万分感谢！！！我试一下

[ajunajun]

成功啦！非常非常感谢！！！我以为要像vb一样在div里写一个调用function的call呢

[ajunajun]

引用 7 楼 囧 的回复:

<div id="AlarmSum" style="width:9%;height:9%;top:5%;left:32%;position:absolute;border-color:#404a59;background-size:100% 100%!important;"></div>
<script src="js/alarmsum.js"></script>
<script type="text/javascript">
……
</script>

但怎么不是老成功？刷新几次就不再刷新了？和360浏览器有关系？

[囧]

按下F12看有没报错

[ajunajun]

有，和这个好像没关系，改了也不行，搜狗浏览器就没问题

[ajunajun]

引用 5 楼 囧 的回复:

用你现在的div标签
如果有多个js数据文件，注意变量名series_data要修改

老哥，不好意思，还想辛苦您一下，还有两种情况：
1、一个图表要读一个networkinstmoni.js文件里的三组数据：

var Subject = ["北京","上海","天津","重庆","河南","河北","山西","山东","贵州"];
var InstSum = ["1","10","3","3","3","1","1","1","1"];
var AbnoSum = ["5","5","5","2","0","0","0","5","5"];

我把这段代码改成了下面这样，看着每间隔20秒在刷新，但出不来已经修改的数据，该怎么修改？

    // 使用刚指定的配置项和数据显示图表。
    LeftFirstChart.setOption(option0);
    myEcharts.push(LeftFirstChart);
    setInterval(function(){
        loadScript('js/networkinstmoni.js', function(){
            LeftFirstChart.clear();
            option0:{
            //option0.series[0].data = Subject;
            series[0].data = Subject;
            series[1].data = InstSum;
            series[2].data = AbnoSum;
            };
            LeftFirstChart.setOption(option0);
        });
    }, 20000);

2、一个图表读多个.js文件（每个.js文件里有一组数据），该怎么修改？

[lizardchen]

不错，谢谢楼主

[꧁꫞丹少꫞꧂]

不错 正是我需要的东西

[囧]

1. LeftFirstChart.clear(); option0.series[0].data = Subject; option0.series[1].data = InstSum; option0.series[2].data = AbnoSum; 2. 合并到1个js文件里

[ajunajun]

引用 14 楼 囧 的回复:

1.
LeftFirstChart.clear();
option0.series[0].data = Subject;
option0.series[1].data = InstSum;
option0.series[2].data = AbnoSum;

2.
合并到1个js文件里

1.我昨天是改成了这个样子，但是刷新的时候图表都没了，手动刷新整个页面才能出来，所以后来自己瞎改成了这样：

            option0:{
            //option0.series[0].data = Subject;
            series[0].data = Subject;
            series[1].data = InstSum;
            series[2].data = AbnoSum;
            };

这样的话图表不会消失，但数据更新不了。

2.不合并到一个js文件里能做到吗？

[ajunajun]

1.我找到原因了，数据对应的不对，其中Subject对应的是xAxis的数据
option0.xAxis[0].data = Subject;
option0.series[0].data = InstSum;
option0.series[1].data = AbnoSum;

2.第二个问题好解决吗？

[lifeifei223]

haohaohaohao

[lzlj86]

有点看不懂

[yh2512000]

这个有点难度啊

[laixiaofen]

在线学习一下

[囧]

不合并就多调用几次loadScript

setInterval(function(){
	loadScript('js/data1.js', function(){
		chartXX.clear();
		optionx.series[0].data = data1;
		chartXX.setOption(option0);
	});
	loadScript('js/data2.js', function(){
		chartXX.clear();
		optionx.series[1].data = data2;
		chartXX.setOption(option0);
	});
}, 20000);

[足球中国]

https://blog.csdn.net/zanfeng/article/details/88969365

[xxw000127]

我也有此疑问，学习了