Echart line chart displays the last point and vertical dotted line by default

First on the renderings ：

Code ：

import {
     useEffect, useState } from 'react';
import * as echarts from 'echarts';

export default function Line(props) {
    
  const xdatas = props.xdata || [];
  const ydatas = props.ydata || [];
  const idx = props.idx;
  useEffect(() => {
    
    const container = document.getElementById('lineContainer' + idx);
    //  Based on the prepared dom, initialization echarts example 
    var myChart = echarts.init(container);
    let option = {
    
      tooltip: {
    
        trigger: 'axis',
      },
      toolbox: {
    
        show: false,
        feature: {
    
          saveAsImage: {
    }, //  Display and provide the button to download the report image 
        },
      },
      xAxis: {
    
        type: 'category',
        boundaryGap: false,
        show: true,
        axisTick: {
     show: false }, // x Axis scale hidden 
        data: xdatas,
      },
      yAxis: {
    
        type: 'value',
        boundaryGap: [0, '30%'],
        show: true,
      },
      grid: {
     //  Move the position of the chart in the canvas 
        left: '17%',
      },
      series: [
        {
    
          type: 'line',
          data: ydatas,
          smooth: 0.5,
          // symbol: 'none', // none  Do not show data points   The default is false Exhibition 
          lineStyle: {
    
            color: '#5470C6',
            width: 5,
          },
          itemStyle: {
    
            normal: {
    
              color: '#3d86f3',
              lineStyle: {
    
                color: '#3d86f3',
                width: 3,
              },
            },
          },
          markLine: {
    
            //  Lock the last element to show the vertical dotted line 
            symbol: ['none', 'none'],
            label: {
     show: false },
            data: [{
     xAxis: ydatas.length - 1 }],
          },
          // markLine: {
    
          // symbol: ['none', 'none'],
          // // label: { show: false },
          // data: [{ xAxis: ydatas[ydatas.length - 1], yAxis: 100 }, { xAxis: ydatas[ydatas.length - 1], yAxis: 100 }]
          // },
          markPoint: {
    
            //  Tagged data , It can be the maximum value, the minimum value or the custom coordinates 
            // data: [
            // {
    
            // yAxis: ydatas, // y The axis is the data axis , Then mark the data y Axis coordinates are the currently displayed data ,this.trenddata[1] Is all the data displayed , He's an array , Get the last data in the form of array subscript 
            // },
            // ],
            data: [
              {
    
                yAxis: ydatas[ydatas.length - 1], // y The axis is the data axis , Then mark the data y Axis coordinates are the currently displayed data ,this.trenddata[1] Is all the data displayed , He's an array , Get the last data in the form of array subscript 
                x: '90%',
                // x: '90%', //  Mark data x Position of the shaft , Because it is the last point , So this position is fixed , The position of the last point in the icon can be expressed as a percentage 
              },
            ],
            symbol: 'circle', //  Marking graphics 
            symbolSize: 4, //  Mark the size of the graphic 
            //  Style of dimension points 
            itemStyle: {
    
              color: '#FF4747', //  Mark some colors 
            },
          },

          areaStyle: {
    
            // Area fill pattern 
            normal: {
    
              // Linear gradient , front 4 The parameters are x0,y0,x2,y2( Range 0~1); Equivalent to the percentage in the graphics bounding box . If the last parameter is ‘true’, Then the four values are absolute pixel positions .
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
    
                    offset: 0,
                    color: 'rgba(196, 215, 255, 1)',
                  },
                  {
    
                    offset: 1,
                    color: 'rgba(246, 249, 255, 1)',
                  },
                ],
                false,
              ),
              // shadowColor: "rgba(109, 126, 0, 0.5)", // Shadow color 
              shadowBlur: () => {
    
                var windth = window.innerWidth;
                let fontSize = windth / 1920;
                return fontSize * 20;
              }, //shadowBlur Set the blur size of the graphics shadow . coordination shadowColor,shadowOffsetX/Y,  Set the shadow effect of the drawing .
            },
          },
        },
      ],
    };

    //  Use the configuration item and data display chart just specified .
    myChart.setOption(option, true);
  }, []);

  return (
    <div
      id={
    `lineContainer${
      idx}`}
      style={
    {
     width: '100%', height: 200, marginTop: -50 }}
    ></div>
  );
}