[GitHub] [echarts] mayunyi opened a new issue, #18824: [Bug] The line chart linkage prompt part of the line chart is not displayed

[via GitHub]

mayunyi opened a new issue, #18824:
URL: https://github.com/apache/echarts/issues/18824

   ### 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
   
   
![image](https://github.com/apache/echarts/assets/26814094/b6bbdfa6-7046-4e47-8435-6c0cdd9eef8d)
   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?
   
   
![image](https://github.com/apache/echarts/assets/26814094/666e4251-db32-44af-9373-ebb550d29029)
   Dynamically add a line chart through the parameters on the left for linkage


-- 
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.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