87,907
社区成员
发帖
与我相关
我的任务
分享Echarts折线图（带时间轴）从.js文件获取数据，定时自动刷新问题的请教
我的Echart折线图（带时间轴）从datainstname.js、datalist.js、datatimeline.js和dataxline.js中获取数据，JavaScript代码如下：
四个文件内容分别如下：
datainstname.js文件
datalist.js文件
datatimeline.js文件
dataxline.js文件
请教问题：
1、间隔20秒刷新数据，最后“// 间隔20秒刷新数据”后面的代码该怎么改？
2、如何根据不同的数据长度显示不同的x轴？
由于x轴（myXline）对应的myData中的数据长度不同，比如：myData中的"昌平-1"可能最多只有24个数，而"通州-1"最多有1440个数，所以就要求时间轴切换到不同的MyData时x轴显示不同的长度。如果所有x轴都按1440个数来设置（myXline），那么只有24个数的折线图显示时就挤压到一起了。大概意思是：
var myXline = {
1: [["00:00","00:01","00:02","00:03","00:04","00:05","00:06","00:07","00:08","00:09","00:10","00:11","00:12","00:13","00:14","00:15","00:16","00:17","00:18","00:19","00:20","00:21","00:22","00:23"], //因为最多只有24个数，所以让它的x轴最大为24个
2: ["00:00","00:01","00:02",……,"23:59"],//因为最多有1440个数，所以让它的x轴最大为1440个
……
};
dataxline.js不同x轴的数据我可以自己产出（不知道上面的格式对不对？），怎么在JavaScript代码中让它们对应上？
<div id="DownMid" style="width:48.8%;height:30%;bottom:0.2%;left:25.5%;position:absolute;border-style:solid;border-width:1.5px;border-color:#404a59;background-size:100% 100%!important;"></div>
<script src="js/datainstname.js"></script>
<script src="js/datalist.js"></script>
<script src="js/datatimeline.js"></script>
<script src="js/dataxline.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 DownMidChart = echarts.init(document.getElementById('DownMid'));
// 指定图表的配置项和数据
function optiontitle(value) {
if (value > 9) {
return {
text: value,
x: 'left',
top: '0.5%',
}
} else return {
text: value,
x: 'left',
top: '0.5%',
}
}
option7 = {
baseOption: {
timeline: {
show: true,
bottom: 5,
top:5,
right:2,
//left:'80%',
axisType: 'category',
orient: 'vertical', //垂直时间轴
tooltip: {
trigger: 'axis'
},
autoPlay: true,
currentIndex: 6,
playInterval: 3000, //刷新频率
label: {
normal: {
show: false, //是否显示仪器名称标签
interval: 'auto',
formatter: function(value) {
return value
}
},
},
data: [],
},
title: {
textStyle: {
color: '#fff',
fontSize: '16'
},
},
grid: [{
show: false,
left: '5%',
top: '15%',
bottom: '15%',
containLabel: true,
}],
//显示保存按钮
toolbox: {
feature: {
saveAsImage: {} //保存为图片
}
},
dataZoom: [
{
show: true,
realtime: true,
bottom:'1%',
start: 0, //起始缩放位置
end: 100 //终止缩放位置
},
{
type: 'inside',
realtime: true,
start: 60,
end: 80
}
],
xAxis: [{
type: 'category',
name: '时间',
boundaryGap: true, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
data: myXline, //时间坐标--可以对应1： 2：……
axisLine: {
lineStyle: {
color: 'rgba(2,194,255,0.8)' //坐标轴线线的颜色
}
},
axisLabel: {
show: true,
textStyle: {
fontSize: 12,
},
},
splitLine: {
show: false
},
}],
yAxis: [{
type: 'value',
//boundaryGap: false,
scale: true, // y轴数据,根据数据的最大最小之进行计算
name: '数值',
//min: 50,
splitLine: {
show: true,
lineStyle: {
color: '#57617B' //分隔线颜色设置
}
},
axisLine: {
lineStyle: {
color: 'rgba(2,194,255,0.8)' //坐标轴线线的颜色
}
},
axisLabel: {
formatter: function(value) {
return value// + '0'
},
},
data: myData,
}],
series: [],
},
options: [],
};
for (var i = 0; i < myData.length; i++) {
option7.baseOption.timeline.data.push(myData[i]);
option7.options.push({
title: optiontitle(myData[i]),
series: [{
name: '总课时',
type: 'line',
barGap: 15,
barWidth: 15,
//后增加
smooth: true,
symbol: 'circle',
symbolSize: 5,
//showSymbol: false, //不显示坐标原点
label: {
normal: {
show: false,
},
emphasis: {
show: true,
position: 'left',
offset: [0, 0],
textStyle: {
color: '#fff',
fontSize: 14,
},
},
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgb(255, 70, 131)'
}, {
offset: 0.8,
color: 'rgb(255, 158, 68)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
//显示最大值、最小值
markPoint: {
itemStyle: {
normal: {
color: 'rgba(0,186,255,0.4)',
borderColor: 'rgba(0,186,255,0.4)',
borderWidth: 2
}
},
label: {
normal: {
fontSize: 9
}
},
data: [{
type: 'max',
name: '最大值'
},
{
type: 'min',
name: '最小值'
}
]
},
//显示均值线
markLine: {
lineStyle: {
normal: {
color: '#00baff'
}
},
label: {
normal: {
fontSize: 10
}
},
data: [{
type: 'average',
name: '平均值'
}]
},
itemStyle: {
normal: {
color: 'rgb(255, 70, 131)',
},
emphasis: {
color: 'red',
},
},
data: databeast[timeLineData[i]],
}]
});
}
// 间隔20秒刷新数据
DownMidChart.setOption(option7);
myEcharts.push(DownMidChart);
setInterval(function(){
loadScript('js/dataxline.js', function(){
DownMidChart.clear();
option7.baseOption.xAxis[0].data = myXline;
DownMidChart.setOption(option7);//,true
});
loadScript('js/datainstname.js', function(){
DownMidChart.clear();
option7.baseOption.yAxis[0].data = myData;
DownMidChart.setOption(option7);//,true
});
loadScript('js/datalist.js', function(){
DownMidChart.clear();
option7.options.series.data = databeast;
//option7.options.series[0].data = databeast;
//option7.options.push.series[0].data = databeast;
DownMidChart.setOption(option7);//,true
});
loadScript('js/datatimeline.js', function(){
DownMidChart.clear();
//option7.options.series[0].data.databeast = timeLineData;
option7.options.series[1].data = timeLineData;
DownMidChart.setOption(option7);//,true
});
}, 20000);
</script>
四个文件内容分别如下：
datainstname.js文件
var myData = ["昌平-1","通州-1","武清-1","丰台-1"","房山-1"];
datalist.js文件
var databeast = {
1: [2.506,2.473,2.439,2.426,2.45,2.558,2.615,2.584,2.507,2.45,2.37,2.315,2.257],
2: [26.7104,26.7097,26.7087,26.7081,26.7079,26.7078,26.7082,26.7086,26.7092],
3: [33.82,33.82,33.82,33.82,33.819,33.819,33.819,33.819,33.819,33.818,33.818,33.818,33.818,33.817,33.817,33.817],
4: [4.391,4.394,4.407,4.427,4.398,4.379,4.364,4.346,4.359,4.37],
5: [16.6242,16.6242,16.6242,16.6242,16.6243,16.6244,16.6244,16.6245,16.6247,16.6247,16.625,16.6251],
};
datatimeline.js文件
var timeLineData = [1,2,3,4,5];
dataxline.js文件
var myXline = ["00:00","00:01","00:02","00:03","00:04","00:05","00:06","00:07","00:08","00:09","00:10","00:11","00:12","00:13","00:14","00:15","00:16","00:17","00:18","00:19","00:20","00:21","00:22","00:23"];
请教问题：
1、间隔20秒刷新数据，最后“// 间隔20秒刷新数据”后面的代码该怎么改？
2、如何根据不同的数据长度显示不同的x轴？
由于x轴（myXline）对应的myData中的数据长度不同，比如：myData中的"昌平-1"可能最多只有24个数，而"通州-1"最多有1440个数，所以就要求时间轴切换到不同的MyData时x轴显示不同的长度。如果所有x轴都按1440个数来设置（myXline），那么只有24个数的折线图显示时就挤压到一起了。大概意思是：
var myXline = {
1: [["00:00","00:01","00:02","00:03","00:04","00:05","00:06","00:07","00:08","00:09","00:10","00:11","00:12","00:13","00:14","00:15","00:16","00:17","00:18","00:19","00:20","00:21","00:22","00:23"], //因为最多只有24个数，所以让它的x轴最大为24个
2: ["00:00","00:01","00:02",……,"23:59"],//因为最多有1440个数，所以让它的x轴最大为1440个
……
};
dataxline.js不同x轴的数据我可以自己产出（不知道上面的格式对不对？），怎么在JavaScript代码中让它们对应上？
...全文
请发表友善的回复…
发表回复
囧 2019-04-04
- 打赏
- 举报
<div id="DownMid" style="width:48.8%;height:30%;bottom:0.2%;left:25.5%;position:absolute;border-style:solid;border-width:1.5px;border-color:#404a59;background-size:100% 100%!important;"></div>
<script src="js/datainstname.js"></script>
<script src="js/datalist.js"></script>
<script src="js/datatimeline.js"></script>
<script src="js/dataxline.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 DownMidChart = echarts.init(document.getElementById('DownMid'));
var currentIndex = 0;
// 指定图表的配置项和数据
function optiontitle(value) {
if (value > 9) {
return {
text: value,
x: 'left',
top: '0.5%',
}
} else return {
text: value,
x: 'left',
top: '0.5%',
}
}
function getOption(){
var option = {
baseOption: {
timeline: {
show: true,
bottom: 5,
top: 5,
right: 2,
//left:'80%',
axisType: 'category',
orient: 'vertical',
//垂直时间轴
tooltip: {
trigger: 'axis'
},
autoPlay: true,
currentIndex: currentIndex,
playInterval: 3000,
//刷新频率
label: {
normal: {
show: false,
//是否显示仪器名称标签
interval: 'auto',
formatter: function(value) {
return value
}
},
},
data: [],
},
title: {
textStyle: {
color: '#fff',
fontSize: '16'
},
},
grid: [{
show: false,
left: '5%',
top: '15%',
bottom: '15%',
containLabel: true,
}],
//显示保存按钮
toolbox: {
feature: {
saveAsImage: {} //保存为图片
}
},
dataZoom: [{
show: true,
realtime: true,
bottom: '1%',
start: 0,
//起始缩放位置
end: 100 //终止缩放位置
},
{
type: 'inside',
realtime: true,
start: 60,
end: 80
}],
xAxis: [{
type: 'category',
name: '时间',
boundaryGap: true,
//坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
data: myXline[timeLineData[0]],
//时间坐标--可以对应1： 2：……
axisLine: {
lineStyle: {
color: 'rgba(2,194,255,0.8)' //坐标轴线线的颜色
}
},
axisLabel: {
show: true,
textStyle: {
fontSize: 12,
},
},
splitLine: {
show: false
},
}],
yAxis: [{
type: 'value',
//boundaryGap: false,
scale: true,
// y轴数据,根据数据的最大最小之进行计算
name: '数值',
//min: 50,
splitLine: {
show: true,
lineStyle: {
color: '#57617B' //分隔线颜色设置
}
},
axisLine: {
lineStyle: {
color: 'rgba(2,194,255,0.8)' //坐标轴线线的颜色
}
},
axisLabel: {
formatter: function(value) {
return value // + '0'
},
},
data: myData,
}],
series: [],
},
options: [],
};
for (var i = 0; i < myData.length; i++) {
option.baseOption.timeline.data.push(myData[i]);
option.options.push({
title: optiontitle(myData[i]),
series: [{
name: '总课时',
type: 'line',
barGap: 15,
barWidth: 15,
xAxisIndex: 0,
//后增加
smooth: true,
symbol: 'circle',
symbolSize: 5,
//showSymbol: false, //不显示坐标原点
label: {
normal: {
show: false,
},
emphasis: {
show: true,
position: 'left',
offset: [0, 0],
textStyle: {
color: '#fff',
fontSize: 14,
},
},
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgb(255, 70, 131)'
},
{
offset: 0.8,
color: 'rgb(255, 158, 68)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
//显示最大值、最小值
markPoint: {
itemStyle: {
normal: {
color: 'rgba(0,186,255,0.4)',
borderColor: 'rgba(0,186,255,0.4)',
borderWidth: 2
}
},
label: {
normal: {
fontSize: 9
}
},
data: [{
type: 'max',
name: '最大值'
},
{
type: 'min',
name: '最小值'
}]
},
//显示均值线
markLine: {
lineStyle: {
normal: {
color: '#00baff'
}
},
label: {
normal: {
fontSize: 10
}
},
data: [{
type: 'average',
name: '平均值'
}]
},
itemStyle: {
normal: {
color: 'rgb(255, 70, 131)',
},
emphasis: {
color: 'red',
},
},
data: databeast[timeLineData[i]],
}]
});
}
return option;
}
var option7 = getOption();
// 间隔20秒刷新数据
DownMidChart.setOption(option7);
DownMidChart.on("timelinechanged", function(o){
currentIndex = o.currentIndex;
DownMidChart.setOption({baseOption:{xAxis:[{data:myXline[currentIndex + 1]}]}});
});
myEcharts.push(DownMidChart);
setInterval(function() {
loadScriptArray(['js/dataxline.js', 'js/datainstname.js', 'js/datalist.js', 'js/datatimeline.js'], function(){
DownMidChart.setOption(getOption());
});
}, 10000);
</script>
var myXline = {
1: ["00:00","00:01","00:02","00:03","00:04","00:05","00:06","00:07","00:08","00:09","00:10","00:11","00:12","00:13","00:14","00:15","00:16","00:17","00:18","00:19","00:20","00:21","00:22","00:23"],
2: ["00:00","00:01","00:02","00:03","00:04","00:05","00:06","00:07","00:08","00:09","00:10","00:11","00:12","00:13","00:14","00:15","00:16","00:17","00:18","00:19","00:20","00:21","00:22","00:23","00:24","00:25"],
3: ["00:00","00:01","00:02","00:03","00:04","00:05","00:06","00:07","00:08","00:09","00:10","00:11","00:12","00:13","00:14","00:15","00:16","00:17","00:18","00:19","00:20","00:21","00:22","00:23"],
4: ["00:00","00:01","00:02","00:03","00:04","00:05","00:06","00:07","00:08","00:09","00:10","00:11","00:12","00:13","00:14","00:15","00:16","00:17","00:18","00:19","00:20","00:21","00:22","00:23"],
5: ["00:00","00:01","00:02","00:03","00:04","00:05","00:06","00:07","00:08","00:09","00:10","00:11","00:12","00:13","00:14","00:15","00:16","00:17","00:18","00:19","00:20","00:21","00:22","00:23"]
}
囧 2019-04-04
- 打赏
- 举报
放其中一个js文件里面
var mainFirstLabel = "北京分中心监控";
在html里
document.getElementById("mainFirst").innerHTML = mainFirstLabel;
ajunajun 2019-04-04
- 打赏
- 举报
大神，太崇拜啦，非常感谢！！！
再请教您个小问题：
<div id="mainFirst" style="width:99.6%;height:5%;top:0px;left:0.2%;position:absolute;background:url('./img/a.jpg') no-repeat center!important;background-size:100% 100%!important;color:white;font-size:30px;font-family:SimHei;text-align:center;">北京分中心监控</div>
上面的“北京分中心监控”几个字怎么从js文件中读取呀？
