echart用以下方式，查看图表时，即使程序运行很久了,也看不到历史曲线。原因是从打开时才刷新页面，获取数据更新。
想到的方式是，打开趋势图时，将历史数据加载出来，再实时更新数据。但不知道怎样修改这个需求？
<div id="Apple" style="width:auto;height:400px;margin:2% auto;">
图标加载中...
</div>
<script>
var dom = document.getElementById("Apple");
var myChart3 = echarts.init(dom);
var app = {};
option = null;
var data3 = [];
var now = new Date();
//myChart.showLoading({
// text: '疯狂计算中',
// effect: 'whirling'
// });
option = {
title: {
text: '[Apple]'
},
visualMap: [{
top: 10,
right: 10,
show: false,
precision: 1,
seriesIndex: 0,
pieces: [{
gt: 1000, // 设置最小值
lte: 1500, // 设置最大值
color: '#33CC33'
}],
outOfRange: {
color: '#CC3300' // 设置超出部分的颜色
}
},
],
tooltip: {
trigger: 'axis',
formatter: function (params) {
params = params[0];
var date = new Date(params.name);
return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
},
axisPointer: {
animation: false
}
},
toolbox: {
show: true,
feature: {
//mark : {show: true},
//dataZoom : {show: true},
//magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
magicType: { show: true, type: ['line', 'bar'] },
dataView: { show: true },
//restore : {show: true},
saveAsImage: { show: true }
}
},
dataZoom: [{ // 内置于坐标系中，使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系
type: 'inside',
start: 0,
end: 100
}, {
start: 0,
end: 100, // handleIcon 手柄的 icon 形状，支持路径字符串
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
handleSize: '80%', // 控制手柄的尺寸，可以是像素大小，也可以是相对于 dataZoom 组件宽度的百分比，默认跟 dataZoom 宽度相同。
handleStyle: {
color: 'pink',
shadowBlur: 3, // shadowBlur图片阴影模糊值，shadowColor阴影的颜色
shadowColor: 'red',
shadowOffsetX: 2,
shadowOffsetY: 2
}
}],
xAxis: {
type: 'time',
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
splitLine: {
show: false
}
},
series: [{
name: '模拟数据',
type: 'line',
showSymbol: false,
hoverAnimation: false,
data: data3,
smooth: true, // 开启平滑处理。true的平滑程度相当于0.5
symbol: 'none', // 标记的图形。
sampling: 'average', // 取过滤点的平均值
itemStyle: {
normal: {
color: 'rgb(255, 70, 131)' // 图形的颜色。
}
},
areaStyle: { // 区域填充样式。
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgb(255, 158, 68)'
}, {
offset: 1,
color: 'rgb(255, 70, 131)'
}])
}
},
markLine: {
itemStyle: {
normal: {
borderWidth: 1,
lineStyle: {
type: "dash",
color: 'red',
width: 2
},
label: {
formatter: 'SP',
textStyle: {
fontSize: 16,
fontWeight: "bolder"
}
},
show: true,
color: '#4c5336'
}
},
data: [{
yAxis: 200
}]
}
}]
};
var AppleValue=0;
function GetAppleData() {
now = new Date(+now + 1000);
var selectItem = $("#ulList .nav-item").find(".active").text();
$.ajax({
url: "/Controls/GetAppleData/",
type: "GET",
//dataType: 'json',
success: function (res) {
AppleValue = res.data;
console.info(res);
},
error: function (err) {
console.log(err.responseText);
// alert(err.responseText);
}
});
return {
name: now.toString(),
value: [
now,
Math.round(AppleValue)
]
}
}
setInterval(function () {
//data.shift();
data3.push(GetAppleData());
var upRange = parseFloat($("#TrendUpRang").val());
var lowRange = parseFloat($("#TrendLowRang").val());
myChart3.setOption({
visualMap:{
top: 10,
right: 10,
show: false,
precision: 1,
seriesIndex: 0,
pieces: [{
gt: lowRange, // 设置最小值
lte: upRange, // 设置最大值
color: '#33CC33'
}],
outOfRange: {
color: '#CC3300' // 设置超出部分的颜色
}
},
series: [{
data: data3
}]
}, false);
}, 1000);
if (option && typeof option === "object") {
myChart3.setOption(option, false);
}
//window.addEventListener('resize', function () {
// myChart.resize();
//})
</script>
我很遗憾，你没有提供具体的问题描述。请提供一个具体的问题，我会尽力给出解决方案。