• In fact, the official website has written, the side explains the importance of looking at the document.

Before you start, let’s look at an autoscroll of echarts obtained by search

  • This is what we found before, and you can see that the logic of the move is like thisThe article links 
    // Change the statrValue and endValue by refreshing the timer
setInterval(function () {
    // Scroll backward one at a time until the last one starts from the beginning.
    if (option.dataZoom[0].endValue == KSMC.length ) {
        option.dataZoom[0].endValue = 6; 
        option.dataZoom[0].startValue = 0;
    }
    else {
        option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
        option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
    }
    myChart.setOption(option);
}, 2000);

Copy the code

Take a look at the official documentation

  • Direct address of document

  • As you can see above, the document provides a way to move the element. The principle is the same: move the element through the timer, so here is the code

    // Start value of timer
let index = 0

/ / timer
let timer = setInterval(() = > {
  // Get the maximum cursor used to reset the initial value of the timer
  let lendLength = option.xAxis.data.length
 
  // dataZoom
  this.mainLeftCarBox.dispatchAction({
    type: 'dataZoom'.startValue: index, // The starting position
    endValue: 6 + index // The end position
  });

  index++; // The subscript increases

  // Reset the subscript
  if(index > lendLength) { index = 0}},2000);

// Clear the timer before the vue method page is destroyed
this.$once('hook:beforeDestroy'.() = > { clearInterval(timer)})
Copy the code

  • Then we create a tooltip with a move method that looks like this

    // Start value of timer
let index = 0

/ / timer
let timer = setInterval(() = > {
  // Get the maximum cursor used to reset the initial value of the timer
  let lendLength = option.xAxis.data.length
  
  // tooltip
  this.mainLeftCarBox.dispatchAction({
    type: 'showTip'.seriesIndex: 0.dataIndex: index,
    position: [10.20]});// dataZoom
  this.mainLeftCarBox.dispatchAction({
    type: 'dataZoom'.startValue: index, // The starting position
    endValue: 6 + index // The end position
  });

  index++; // The subscript increases

  // Reset the subscript
  if(index > lendLength) { index = 0}},2000);

// Clear the timer before the vue method page is destroyed
this.$once('hook:beforeDestroy'.() = > { clearInterval(timer)})
Copy the code

    A lot of times we can’t tell right from wrong, we always think that the information we receive is correct