使用echarts实时刷新会刷新已经隐藏的线条刷新出来
在这里设置了曲线的显示和隐藏
option: {
title: {
text: " ",
subtext: " ",
x: "center",
y: "top",
},
tooltip: {
trigger: "axis",
axisPointer: {
animation: false,
},
},
// color: ['#63B8FF', '#3B3B3B', '#43CD80', '#EEB422', '#8968CD', '#789262'],
color: ["#63B8FF", "#3B3B3B", "#43CD80", "#EEB422", "#8968CD"],
legend: {
// data: ['GNSS1', 'GNSS2', 'DCLS', 'xPPS', 'x10M', 'E1'],
data: ["GNSS1", "GNSS2", "DCLS", "xPPS", "x10M"],
orient: "horizontal",
x: "center", //可设定图例在左、右、居中
y: "bottom", //可设定图例在上、下、居中
selected: {
'GNSS1': true,
'GNSS2': true,
'DCLS': true,
'xPPS': true,
'x10M': true,
'E1': true
},
},
toolbox: {
show: false,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: true },
restore: { show: true },
saveAsImage: { show: true },
},
},
grid: {
left: "3%",
right: "4%",
bottom: "10%", // 这几个属性可以控制图表上下左右的空白尺寸,可以自己试试。
containLabel: true,
},
xAxis: {
show: true,
type: "category",
splitLine: {
show: true,
},
boundaryGap: false,
axisLine: {
onZero: false,
},
axisLabel: {
rotate: 45,
},
data: this.xdata,
},
yAxis: {
// max: 'dataMax',
// min: 'dataMin',
show: true,
scale: true,
type: "value",
boundaryGap: ["20%", "20%"],
minInterval: 1,
splitLine: {
show: true,
},
},
series: [
{
name: "GNSS1",
type: "line",
showSymbol: true,
smooth: true,
hoverAnimation: false,
connectNulls: false,
data: this.jet_lag1,
},
{
name: "GNSS2",
type: "line",
showSymbol: true,
smooth: true,
hoverAnimation: false,
connectNulls: false,
data: this.jet_lag2,
},
{
name: "DCLS",
type: "line",
showSymbol: true,
smooth: true,
hoverAnimation: false,
connectNulls: false,
data: this.jet_lag3,
},
{
name: "xPPS",
type: "line",
showSymbol: true,
smooth: true,
hoverAnimation: false,
connectNulls: false,
data: this.jet_lag4,
},
{
name: "x10M",
type: "line",
showSymbol: true,
smooth: true,
hoverAnimation: false,
connectNulls: false,
data: this.jet_lag5,
},
],
},
在动态添加数据是重绘了图表,曲线的显示隐藏也重绘了
this.option.xAxis.data = this.date;
this.option.series[0].data = this.jet_lag1;
this.option.series[1].data = this.jet_lag2;
this.option.series[2].data = this.jet_lag3;
this.option.series[3].data = this.jet_lag4;
this.option.series[4].data = this.jet_lag5;
this.myChart.setOption(this.option);
我尝试理解了一下你的问题:点击echart的 legend中的某一个,将其隐藏,当数据更新时,图表显示的是所有曲线图。如果是我理解的的话,那么你已经找到问题的解决办法了呀,
selected: {
'GNSS1': true,
'GNSS2': true,
'DCLS': true,
'xPPS': true,
'x10M': true,
'E1': true
},
你都知道在这里设置显示,那为什么,在更新数据的时候,不去控制它,让它展示成你想要的呢?(给echart添加点击事件,获取legend中点击那个值,在重新渲染的时候,根据获取的值,设置需要隐藏或者显示的legend)
需求 重绘时保存legend的状态?那你要用点击legend事件去保存到option再重绘
了解下这个函数
myChart.on('legendselectchanged', function (params) {
myChart.setOption({
legend:{selected:{[params.name]: true}}
})
});
重绘的时候,没必要全部option丢进去,只需要series部分就好了,它会自己去合并你的配置的
this.myChart.setOption({
series: [this.jet_lag1, this.jet_lag2, this.jet_lag3, this.jet_lag4]
});