JSFiddle - React, Tailwind, and code Playground

HTML

<div id="chart-container" style="width: 600px;height: 300px"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.2/echarts.min.js" integrity="sha512-VdqgeoWrVJcsDXFlQEKqE5MyhaIgB9yXUVaiUa8DR2J4Lr1uWcFm+ZH/YnzV5WqgKf4GPyHQ64vVLgzqGIchyw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

JavaScript

var dom = document.getElementById('chart-container');
var myChart = echarts.init(dom, null, {
    renderer: 'canvas',
    useDirtyRect: false
});

var option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {type: 'cross'}
    },
    grid: {
        containLabel: true
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: 'Email',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210]
        }
    ]
};

if (option && typeof option === 'object') {
    myChart.setOption(option);

    setTimeout(() => {
        myChart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: 1
        })

        setTimeout(() => {
            myChart.dispatchAction({
                type: 'hideTip'
            });
            myChart.dispatchAction({
              type: 'showTip',
                seriesIndex: 0,
                dataIndex: -1
            });
        }, 2000)
    }, 2000)
}
    
window.addEventListener('resize', myChart.resize);