87,917
社区成员
发帖
与我相关
我的任务
分享Echarts动态获取js文件与定时清除缓存刷新请教
用Echats geo做了个地图，数据是从两个.js文件读取的
stalist.js文件内容如下：
var geoCoordMap = {
"北京中心":[116.38,39.9],
"昌平":[116.22,40.24],
"沙河":[116.28,40.1],
"通州":[116.8,39.816],
"武清":[116.91,39.4],
"丰台":[116.14,39.9],
"十三陵":[116.2167,40.2498],
"顺义":[116.5,40.3],
"大兴":[116.3,39.6],
"房山":[116.1,39.8],
};
stavalue.js文件内容如下：
var BJData = [
[{name: '昌平',value: 0,statusnow: '正常'}, {name: '北京中心'}],
[{name: '沙河',value: 0,statusnow: '正常'}, {name: '北京中心'}],
[{name: '通州',value: 0,statusnow: '正常'}, {name: '北京中心'}],
[{name: '武清',value: 30,statusnow: '故障'}, {name: '北京中心'}],
[{name: '丰台',value: 0,statusnow: '正常'}, {name: '北京中心'}],
[{name: '十三陵',value: 0,statusnow: '正常'}, {name: '北京中心'}],
[{name: '顺义',value: 0,statusnow: '正常'}, {name: '北京中心'}],
[{name: '大兴',value: 0,statusnow: '正常'}, {name: '北京中心'}],
[{name: '房山',value: 30,statusnow: '故障'}, {name: '北京中心'}],
];
请教问题：
1.间隔20秒刷新数据，最后“// 间隔20秒刷新数据”后面的代码该怎么改？
2.如果要换成其它省份的地图<script src="js/beijing.js"></script>和“map: '北京',”这两句能从文件中读取吗？
我是小白，还希望大神写出代码，要不都不知道在哪改
囧哥帮忙解决了其它图表的问题，非常感谢！记得csdn能私信联系可怎么也找不到了
<div id="MidMap" style="width:48.5%;height:63.8%;top:5%;left:25.5%;position:absolute;border-color:#404a59;background-size:100% 100%!important;"></div>
<script src="js/beijing.js"></script>
<script src="js/stalist.js"></script>
<script src="js/stavalue.js"></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var MidMapChart = echarts.init(document.getElementById('MidMap'));
// 指定图表的配置项和数据
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);
}
var convertData = function(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
var fromCoord = geoCoordMap[dataItem[0].name];
var fromstaturs = geoCoordMap[dataItem[0].statusnow];
var toCoord = geoCoordMap[dataItem[1].name];
if (fromCoord && toCoord) {
res.push([{
coord: fromCoord,
value: dataItem[0].value,
}, {
coord: toCoord,
}]);
}
}
return res;
};
var color = ['#a6c84c', '#ffa022', '#46bee9'];
var series = [];
[
['北京中心', BJData]
].forEach(function(item, i) {
series.push(
{
type: 'lines',
zlevel: 2,
effect: {
show: true,
period: 3, //箭头指向速度，值越小速度越快
trailLength: 0.2, //特效尾迹长度[0,1]值越大，尾迹越长重
symbol: 'arrow', //箭头图标
symbolSize: 4, //图标大小
},
lineStyle: {
normal: {
width: 1, //尾迹线条宽度
opacity: 0.03, //尾迹线条透明度
curveness: .3 //尾迹线条曲直度
}
},
data: convertData(item[1])
}, {
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: { //涟漪特效
period: 4, //动画时间，值越小速度越快
brushType: 'stroke', //波纹绘制方式 stroke, fill
scale: 8 //波纹圆环最大限制，值越大波纹越大
},
label: {
normal: {
show: true,
position: 'right', //显示位置
offset: [-25, -20], //偏移设置--台站
formatter: '{b}' //圆环显示文字
},
emphasis: {
show: true
}
},
symbol: 'circle',
symbolSize: function(val) {
return 4 + val[2] / 1000; //圆环大小
},
itemStyle: {
normal: {
show: false,
color: '#f00'
}
},
data: item[1].map(function(dataItem) {
return {
name: dataItem[0].name,
statusnow: dataItem[0].statusnow,
value: geoCoordMap[dataItem[0].name].concat([dataItem[0].value])
//增加内容
};
}),
},
//被攻击点
{
type: 'scatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
period: 4,
brushType: 'stroke',
scale: 4
},
label: {
normal: {
show: true,
position: 'right',
//offset:[5, 0],
color: 'blue',//#00ffff
formatter: '{b}',
//offset:[0,-25],//文字的相对偏移（左、下）
textStyle: {
color: "#00ffff"
}
},
emphasis: {
show: true
}
},
symbol: 'pin',
symbolSize: 40, //标志点大小
itemStyle: {
normal: {
show: true,
color: 'green',//#9966cc blue
//borderColor: 'rgba(0,186,255,0.4)',
//borderWidth: 2
}
},
//根据数据显示pin的颜色
data: [{
name: item[0],
value: geoCoordMap[item[0]].concat([0]), //concat([0]为绿色
//增加内容
statusnow: item[2]
}],
}
);
});
option4 = {
backgroundColor: '',
title: {
text: '布局与结果',
subtext: '',
left: 'center',
textStyle: {
color: '#fff',
//top:'0.05%',
fontSize: 18
},
// 分别设置四个方向的内边距
padding: [5, 10, 10, 10] //上、右、下、左
},
tooltip: {
trigger: 'item',
position: 'right',
//position: 'top',
backgroundColor: 'rgba(12, 204, 104, 0.8)',
borderColor: '#FFFFCC',
showDelay: 0,
hideDelay: 0,
enterable: true,
transitionDuration: 0,
extraCssText: 'z-index:100',
formatter: function(params, ticket, callback) {
//根据业务自己拓展要显示的内容
var res = "";
var name = params.name;
var value = params.value[params.seriesIndex + 1];
var statusnow = BJData[params.dataIndex][0].statusnow;
res = "<span style='color:#fff'>" + name + "</span><br/>状态：" + statusnow;
return res;
},
},
visualMap: { //图例值控制
min: 0,
max: 30,
calculable: true,
splitNumber: 3,
color: ['red','yellow','#00EE00'],//颜色从高到低依次渐变#76EE00
textStyle: {
color: '#fff'
}
},
geo: {
map: '北京',
label: {
emphasis: {
show: true //显示城市名
}
},
roam: true, //是否允许缩放
layoutCenter: ['50%', '50%'], //地图位置
layoutSize: "105%",
itemStyle: {
normal: {
color: 'rgba(37, 43, 61, .5)', //地图背景色 rgba(90,108, 128, 1)
borderColor: 'white' //省市边界线'rgba(100,149,237,1)'
},
emphasis: {
color: 'rgba(90,108, 128, 1)' //悬浮背景rgba(37, 43, 61, .5)
}
}
},
series: series
};
var counts = option4.series[0].data.length; //获取所有闪动圆环数量
var dataIndex = 0;
//让圆环的提示框自动触发轮播显示
function autoHoverTip() {
for (var i = 0; i < counts; i++) {
(function(i) {
ts = setTimeout(function() {
MidMapChart.dispatchAction({
type: 'showTip',
seriesIndex: 1,
dataIndex: i
});
}, 5000 * i);
})(i);
}
}
setTimeout(function() {
autoHoverTip();
tv = setInterval(autoHoverTip, counts * 3000);
}, 500);
// 间隔20秒刷新数据
MidMapChart.setOption(option4);
myEcharts.push(MidMapChart);
setInterval(function(){
loadScript('js/stalist.js', function(){
MidMapChart.clear();
option4.series[0].data = geoCoordMap;
MidMapChart.setOption(option4);//,true
});
loadScript('js/stavalue.js', function(){
MidMapChart.clear();
option4.series[1].data = BJData;
MidMapChart.setOption(option4);//,true
});
}, 20000);
</script>
stalist.js文件内容如下：
var geoCoordMap = {
"北京中心":[116.38,39.9],
"昌平":[116.22,40.24],
"沙河":[116.28,40.1],
"通州":[116.8,39.816],
"武清":[116.91,39.4],
"丰台":[116.14,39.9],
"十三陵":[116.2167,40.2498],
"顺义":[116.5,40.3],
"大兴":[116.3,39.6],
"房山":[116.1,39.8],
};
stavalue.js文件内容如下：
var BJData = [
[{name: '昌平',value: 0,statusnow: '正常'}, {name: '北京中心'}],
[{name: '沙河',value: 0,statusnow: '正常'}, {name: '北京中心'}],
[{name: '通州',value: 0,statusnow: '正常'}, {name: '北京中心'}],
[{name: '武清',value: 30,statusnow: '故障'}, {name: '北京中心'}],
[{name: '丰台',value: 0,statusnow: '正常'}, {name: '北京中心'}],
[{name: '十三陵',value: 0,statusnow: '正常'}, {name: '北京中心'}],
[{name: '顺义',value: 0,statusnow: '正常'}, {name: '北京中心'}],
[{name: '大兴',value: 0,statusnow: '正常'}, {name: '北京中心'}],
[{name: '房山',value: 30,statusnow: '故障'}, {name: '北京中心'}],
];
请教问题：
1.间隔20秒刷新数据，最后“// 间隔20秒刷新数据”后面的代码该怎么改？
2.如果要换成其它省份的地图<script src="js/beijing.js"></script>和“map: '北京',”这两句能从文件中读取吗？
我是小白，还希望大神写出代码，要不都不知道在哪改
囧哥帮忙解决了其它图表的问题，非常感谢！记得csdn能私信联系可怎么也找不到了
...全文
请发表友善的回复…
发表回复
ajunajun 2019-04-03
- 打赏
- 举报
哇。。。我的大神，终于又见到您了，昨天自己瞎折腾了一晚上也搞不定，看到说csdn取消了私信联系的功能，又解决了一个我的一个大问题，万分感谢！！！
还有一个问题，我再发个帖子，非常期待您的答复！！！
还有一个问题，我再发个帖子，非常期待您的答复！！！
My_Bells 2019-04-03
- 打赏
- 举报
https://gallery.echartsjs.com/editor.html?c=x1mqC3N8Ty&v=2
看下这个，动态切换地图，在别人上面做的，你看看就好
囧 2019-04-03
- 打赏
- 举报
只要刷新存数据的文件就可以
<div id="MidMap" style="width:48.5%;height:63.8%;top:5%;left:25.5%;position:absolute;border-color:#404a59;background-size:100% 100%!important;"></div>
<script src="js/stalist.js"></script>
<script src="js/stavalue.js"></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var MidMapChart = echarts.init(document.getElementById('MidMap'));
// 指定图表的配置项和数据
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 getSeries(){
var series = [];
[[mapData.title, BJData]].forEach(function(item, i) {
series.push({
type: 'lines',
zlevel: 2,
effect: {
show: true,
period: 3,
//箭头指向速度，值越小速度越快
trailLength: 0.2,
//特效尾迹长度[0,1]值越大，尾迹越长重
symbol: 'arrow',
//箭头图标
symbolSize: 4,
//图标大小
},
lineStyle: {
normal: {
width: 1,
//尾迹线条宽度
opacity: 0.03,
//尾迹线条透明度
curveness: .3 //尾迹线条曲直度
}
},
data: convertData(item[1])
},
{
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: { //涟漪特效
period: 4,
//动画时间，值越小速度越快
brushType: 'stroke',
//波纹绘制方式 stroke, fill
scale: 8 //波纹圆环最大限制，值越大波纹越大
},
label: {
normal: {
show: true,
position: 'right',
//显示位置
offset: [ - 25, -20],
//偏移设置--台站
formatter: '{b}' //圆环显示文字
},
emphasis: {
show: true
}
},
symbol: 'circle',
symbolSize: function(val) {
return 4 + val[2] / 1000; //圆环大小
},
itemStyle: {
normal: {
show: false,
color: '#f00'
}
},
data: item[1].map(function(dataItem) {
return {
name: dataItem[0].name,
statusnow: dataItem[0].statusnow,
value: geoCoordMap[dataItem[0].name].concat([dataItem[0].value])
//增加内容
};
}),
},
//被攻击点
{
type: 'scatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
period: 4,
brushType: 'stroke',
scale: 4
},
label: {
normal: {
show: true,
position: 'right',
//offset:[5, 0],
color: 'blue',
//#00ffff
formatter: '{b}',
//offset:[0,-25],//文字的相对偏移（左、下）
textStyle: {
color: "#00ffff"
}
},
emphasis: {
show: true
}
},
symbol: 'pin',
symbolSize: 40,
//标志点大小
itemStyle: {
normal: {
show: true,
color: 'green',
//#9966cc blue
//borderColor: 'rgba(0,186,255,0.4)',
//borderWidth: 2
}
},
//根据数据显示pin的颜色
data: [{
name: item[0],
value: geoCoordMap[item[0]].concat([0]),
//concat([0]为绿色
//增加内容
statusnow: item[2]
}],
});
});
return series;
}
var convertData = function(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
var fromCoord = geoCoordMap[dataItem[0].name];
var fromstaturs = geoCoordMap[dataItem[0].statusnow];
var toCoord = geoCoordMap[dataItem[1].name];
if (fromCoord && toCoord) {
res.push([{
coord: fromCoord,
value: dataItem[0].value,
},
{
coord: toCoord,
}]);
}
}
return res;
};
//让圆环的提示框自动触发轮播显示
function autoHoverTip() {
for (var i = 0; i < counts; i++) {
(function(i) {
ts = setTimeout(function() {
MidMapChart.dispatchAction({
type: 'showTip',
seriesIndex: 1,
dataIndex: i
});
}, 5000 * i);
})(i);
}
}
var color = ['#a6c84c', '#ffa022', '#46bee9'];
var dataIndex = 0, counts = 0;
loadScript(mapData.mapFile, function(){
var option4 = {
backgroundColor: '',
title: {
text: '布局与结果',
subtext: '',
left: 'center',
textStyle: {
color: '#fff',
//top:'0.05%',
fontSize: 18
},
// 分别设置四个方向的内边距
padding: [5, 10, 10, 10] //上、右、下、左
},
tooltip: {
trigger: 'item',
position: 'right',
//position: 'top',
backgroundColor: 'rgba(12, 204, 104, 0.8)',
borderColor: '#FFFFCC',
showDelay: 0,
hideDelay: 0,
enterable: true,
transitionDuration: 0,
extraCssText: 'z-index:100',
formatter: function(params, ticket, callback) {
//根据业务自己拓展要显示的内容
var res = "";
var name = params.name;
var value = params.value[params.seriesIndex + 1];
var statusnow = BJData[params.dataIndex][0].statusnow;
res = "<span style='color:#fff'>" + name + "</span><br/>状态：" + statusnow;
return res;
},
},
visualMap: { //图例值控制
min: 0,
max: 30,
calculable: true,
splitNumber: 3,
color: ['red', 'yellow', '#00EE00'],
//颜色从高到低依次渐变#76EE00
textStyle: {
color: '#fff'
}
},
geo: {
map: mapData.mapName,
label: {
emphasis: {
show: true //显示城市名
}
},
roam: true,
//是否允许缩放
layoutCenter: ['50%', '50%'],
//地图位置
layoutSize: "105%",
itemStyle: {
normal: {
color: 'rgba(37, 43, 61, .5)',
//地图背景色 rgba(90,108, 128, 1)
borderColor: 'white' //省市边界线'rgba(100,149,237,1)'
},
emphasis: {
color: 'rgba(90,108, 128, 1)' //悬浮背景rgba(37, 43, 61, .5)
}
}
},
series: getSeries()
};
counts = option4.series[0].data.length; //获取所有闪动圆环数量
setTimeout(function() {
autoHoverTip();
tv = setInterval(autoHoverTip, counts * 3000);
}, 500);
// 间隔20秒刷新数据
MidMapChart.setOption(option4);
myEcharts.push(MidMapChart);
setInterval(function() {
loadScript('js/stavalue.js', function() {
//MidMapChart.clear();
option4.series = getSeries();
MidMapChart.setOption(option4); //,true
});
},
20000);
});
</script>
var geoCoordMap = {
"北京中心":[116.38,39.9],
"昌平":[116.22,40.24],
"沙河":[116.28,40.1],
"通州":[116.8,39.816],
"武清":[116.91,39.4],
"丰台":[116.14,39.9],
"十三陵":[116.2167,40.2498],
"顺义":[116.5,40.3],
"大兴":[116.3,39.6],
"房山":[116.1,39.8],
};
var mapData = {
title: '北京中心',
mapFile: 'js/beijing.js',
mapName: '北京'
};
