echarts-bot[bot] commented on issue #18824: URL: https://github.com/apache/echarts/issues/18824#issuecomment-1612398414
@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. 🤗 <details><summary><b>TRANSLATED</b></summary><br> **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 ( <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 ```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 </details> -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org For queries about this service, please contact Infrastructure at: us...@infra.apache.org --------------------------------------------------------------------- To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org For additional commands, e-mail: commits-h...@echarts.apache.org
