The timer set in echarts cannot be cleared
In dynamic graphs, timers are often needed to dynamically render data.
My requirement is: when there are too many x-axis categories, it will automatically scroll. At this time, you need to use a timer to dynamically control the endValue value in dataZoom.
= setInterval(() => {
// Scroll back one at a time, and the last one starts from scratch. // ()
if ([0].endValue >= [0].) {
[0].endValue = ;
[0].startValue = 0;
} else {
[0].endValue = [0].endValue + ;
[0].startValue = [0].startValue + ;
}
(option);
}, 1000);Then I encountered a bug and found that I could not remove this timer. Now let me talk about the solution.
The reasons for this bug are:
Because I want to assign the data returned by the backend to the data of the series in the column chart, the method I initially used was to listen for the returned value with watch and then assign it to data. The purpose of this is to be able to render the figure. If the value is assigned directly, the figure will not take effect.
The key is this watch listening, because I keep listening, which causes the timer to be generated, which makes it impossible to clear the timer with clearInterval, because even if you clear it, a new timer will be generated immediately.
After analyzing the problem, we will use the different method to assign values, and then I will use it.
In .then, use this.$nextTick to call the function that generates echarts graphs, that is,
getData(){
this.$(data).then((res) => {
// ("Equipment OEE"); // ();
if () {
=
this.$nextTick(()=>{
()
})
}
})
}
barChart(){
let myChart = that.$(
("productivity")
); //If so, get the DOM node with an existing echarts instance. if (myChart == null) {
// If it does not exist, initialize it. myChart = that.$(("productivity"));
}
var option={
//I skip other configurations and don't write them dataZoom: [
{
type: "inside", //Drag and drop slider to scroll xAxisIndex: 0, //Control the first x-axis startValue: 0,
endValue: ,//This value is how many columns I dynamically set to display show: true,
},
],
series:{
name: "Green Light",
type: "bar",
stack: "total",
barMaxWidth: 50,
data: ,//Bonuse chart data returned by the backend itemStyle: {
normal: { color: "#14ee14" },
},
}
}
// Use the configuration items and data you just specified to display the chart. = setInterval(() => {
// Scroll back one at a time, and the last one starts from scratch. if ([0].endValue >= ) {
[0].endValue = ;
[0].startValue = 0;
} else {
[0].endValue = [0].endValue + 1;
[0].startValue = [0].startValue + 1;
}
(option);
}, 1000);
} After using this method, the timer will not be generated all the time. You can clear it by simply using clearInterval().
The overall idea is just this, but it is actually very simple to solve. It is just a dynamic assignment method. The key is to analyze the correct causes of the problem.
Detailed processing of vue3 timing + echarts
1. If you stay on the current page for a long time, it will fill up the memory and cause the chart to stutter and eventually lead to crash.
2. After the full memory is processed, it will still crash if the page is switched without clicking back.
3. If there are multiple charts that want to be associated
4. When encapsulating a component, use type mismatch processing
5. The problem that the chart will shift after adaptation after the browser window is changed
6. If the data in the polyline window is too large, the problem of ups and downs will not be obvious.
// Query button click eventconst search = () => {
if () { // If it is time, cancel the automatic refresh clearInterval()
getAllList()
= 'Open automatic refresh'
} else {
getAllList()
= 'Operation Refresh Turn off'
}
}
// Listen to data and count timewatch(
() => ,
(newVal) => {
if (!) {
clearInterval()
timeOut()
}
}
)
//How to accumulate timingconst timeOut = () => {
= setInterval(() => {
getAllList()
}, 1000 * 20)
}
//Clear the timer effectonUnmounted(() => {
clearInterval()
})
// It is necessary to stop automatically refreshing when switching to other pages, and turn on when switching back('visibilitychange', () => {
if (
! &&
().length > 0
)
{
return
}
if () {
// Clear the timed task clearInterval()
= null
} else {
// Turn on timing tasks getAllList()
}
})
//The data value is large and the fluctuation is not obvious.yAxis: {
min: function (value:any) { // Take the minimum value downward to round it as the minimum scale return 0
},
// Set the maximum value of the y-axis max: function (value:any) { // Take the maximum value upward to round it as the maximum scale return ( + (( / 4)))
},
}
series：[
markPoint: {
data: [
{ type: 'max', name: 'Max' },
{ type: 'min', name: 'Min' }
]
},
]
//The component comes in for the first time or destroys the chartonMounted(() => {
nextTick(() => {
let myChart = (()!)
if (myChart) {
()
}
if (myChart === undefined) {
myChart = (() as HTMLElement)
= 'group1'
()
('group1')
('resize', () => { setTimeout(() => { myChart?.resize() }, 300) }) // Adaptive screen }
})
})
onBeforeUnmount(() => {
const myChart = (()!)
if (myChart) {
()
}
})Summarize
The above is personal experience. I hope you can give you a reference and I hope you can support me more.