[Bug] The line chart linkage prompt part of the line chart is not displayed

[mayunyi]

Version

5.2.2

Link to Minimal Reproduction

https://codepen.io/mayunyi/pen/bGQqmye?editors=1010

Steps to Reproduce

import * as echarts from 'echarts'
import {useEffect, useMemo, useRef} from 'react'
import {FullscreenOutlined} from "@ant-design/icons";
import {Col, Row} from "antd";

const LineChart = ( { chartData=[], height}) => {
    //拿到DOM容器
    const chartRef = useRef();

    const goSinglePage = () => {

    }

    // 每当props改变的时候就会实时重新渲染
    useEffect(()=>{
        const chartInit = []
        const chartContainers = document.querySelectorAll('.chart');
        chartContainers.forEach((container, index) => {
            const chart = echarts.init(container);
            const option = {
                legend: {
                    left: 'top',
                    itemStyle: {
                        opacity: 0
                    },
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    data: chartData[index].XData
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: chartData[index].title,
                        data: chartData[index].yData,
                        type: 'line',
                        symbol: 'none',
                        smooth: true,
                        sampling:"lttb"
                    },
                ],
                grid: {
                    left: 20,
                    right: 20,
                    containLabel: true,
                    top: 60, // 调整图表的高度，腾出空间放置 dataZoom
                    bottom: 20
                },
                dataZoom: [{
                    type: 'slider',
                    start: 0,
                    end: 1,
                    xAxisIndex: [0],
                    top: '70%',
                    height: 20,
                    show: false
                }]
            }
            chart.setOption(option);
            chartInit.push(chart)
        });

        // 创建滑块组件
        const sliderContainer = document.getElementById('sliderContainer');
        const sliderChart = echarts.init(sliderContainer);

        const sliderOption = {
            xAxis: {
                type: 'category',
                data: chartData.length > 0 ? chartData[0].XData: []
            },
            yAxis: {
                type: 'value'
            },
            grid: {
                left: 10,
                right: 10,
                containLabel: false,
                top: 60, // 调整图表的高度，腾出空间放置 dataZoom
                bottom: 20
            },
            dataZoom: [{
                type: 'slider',
                start: 0,
                end: 1,
                xAxisIndex: [0],
                // top: '70%',
                height: 20
            }]
        };
        sliderChart.setOption(sliderOption);
        chartInit.push(sliderChart)
        echarts.connect(chartInit)
    }, [chartData]);

    // dom对象的样式
    const domStyle = useMemo(() => {
        return {
            height: height ? `${height}px` : '100%',
        }
    }, [height])

    return (
        <div className={'rdl-line-charts'}>
            <Row>
                {
                    chartData.map((_, index) => {
                        return(
                            <Col xs={24} sm={24} md={12} lg={12} xl={8} key={index}>
                                <div style={domStyle} className={'line-chat'}>
                                    <div className={'chart'} id={'chart'+index} style={{ width: '100%', height: '100%'}} />
                                    <div className={'line-chat-icons'}>
                                        <FullscreenOutlined
                                            style={{ fontSize: '24px', cursor: 'pointer' }}
                                            onClick={goSinglePage}
                                        />
                                    </div>
                                </div>
                            </Col>
                        )
                    })
                }
            </Row>

            <div className="slider-container" id="sliderContainer" style={{visibility: chartData.length === 0 && 'hidden'}}/>
        </div>
    )
};
export default LineChart;

Current Behavior

The tooltip in the multi-table linkage part is not displayed

Expected Behavior

Multi-table linkage tooltip display

Environment

- OS:window11
- Browser:chrome 114.0.5735.199
- Framework:react 17

Any additional comments?

Dynamically add a line chart through the parameters on the left for linkage

[echarts-bot[bot]]

@mayunyi It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗

TRANSLATED

**BODY** ### Version 5.2.2 ### Link to Minimal Reproduction https://codepen.io/mayunyi/pen/bGQqmye?editors=1010 ### Steps to Reproduce ``` import * as echarts from 'echarts' import {useEffect, useMemo, useRef} from 'react' import {FullscreenOutlined} from "@ant-design/icons"; import {Col, Row} from "antd"; const LineChart = ( { chartData=[], height}) => { //Get the DOM container const chartRef = useRef(); const goSinglePage = () => { } // Re-render in realtime whenever props change useEffect(()=>{ const chartInit = [] const chartContainers = document. querySelectorAll('.chart'); chartContainers.forEach((container, index) => { const chart = echarts.init(container); const option = { legend: { left: 'top', itemStyle: { opacity: 0 }, }, tooltip: { trigger: 'axis' }, xAxis: { type: 'category', data: chartData[index].XData }, yAxis: { type: 'value' }, series: [ { name: chartData[index].title, data: chartData[index].yData, type: 'line', symbol: 'none', smooth: true, sampling: "lttb" }, ], grid: { left: 20, right: 20, containLabel: true, top: 60, // Adjust the height of the chart to make room for dataZoom bottom: 20 }, dataZoom: [{ type: 'slider', start: 0, end: 1, xAxisIndex: [0], top: '70%', height: 20, show: false }] } chart. setOption(option); chartInit. push(chart) }); // create slider component const sliderContainer = document. getElementById('sliderContainer'); const sliderChart = echarts.init(sliderContainer); const sliderOption = { xAxis: { type: 'category', data: chartData.length > 0 ? chartData[0].XData: [] }, yAxis: { type: 'value' }, grid: { left: 10, right: 10, containLabel: false, top: 60, // Adjust the height of the chart to make room for dataZoom bottom: 20 }, dataZoom: [{ type: 'slider', start: 0, end: 1, xAxisIndex: [0], // top: '70%', height: 20 }] }; sliderChart. setOption(sliderOption); chartInit. push(sliderChart) echarts. connect(chartInit) }, [chartData]); // style of dom object const domStyle = useMemo(() => { return { height: height ? `${height}px` : '100%', } }, [height]) return (

{ chartData. map((_, index) => { return(

) }) }

) }; export default LineChart; ``` ### Current Behavior  The tooltip in the multi-table linkage part is not displayed ### Expected Behavior Multi-table linkage tooltip display ### Environment ```markdown -OS:window11 - Browser: chrome 114.0.5735.199 - Framework: react 17 ``` ### Any additional comments?  Dynamically add a line chart through the parameters on the left for linkage