[GitHub] [echarts] Clebal opened a new issue, #16948: [Bug] Weird tooltip behavior using xAxis value and custom rect render

[GitBox]

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

   ### Version
   
   5.3.2
   
   ### Link to Minimal Reproduction
   
   https://echarts.apache.org/examples/en/editor.html
   
   ### Steps to Reproduce
   
   Use the following code in a echarts playground:
   
   ```
   const formattedData = [
     [959651, 1148757.5, 115],
     [1148757.5, 1337864, 1602],
     [1337864, 1526970.5, 5119],
     [1526970.5, 1716077, 4203],
     [1716077, 1905183.5, 882],
     [1905183.5, 2094290, 45]
   ];
   
   function tooltipFormatter(params) {
     console.log(params)
     if (Array.isArray(params)) {
       params = params[0];
     }
   
     const [left, right, value] = params.data;
     const title = `${left} - ${right}`;
     const item = `<div style="margin-left: 8px; display: inline">
           ${value}
           </div>`;
     return `${title} <div style="margin-top: 
4px">${params.marker}${item}</div>`;
   }
   
   option = {
     grid: {
       left: '5%',
       right: '5%',
       top: 16,
       bottom: 8,
       containLabel: true
     },
     tooltip: {
       show: true,
       trigger: 'axis',
       padding: [4, 8],
       borderWidth: 0,
       textStyle: {
         fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
         fontWeight: 400,
         fontSize: 12,
         lineHeight: 16,
         letterSpacing: '0.03333em',
         color: '#fff'
       },
       position: function (point, params, dom, rect, size) {
         const position = { top: 0 };
   
         if (size.contentSize[0] < size.viewSize[0] - point[0]) {
           position.left = point[0];
         } else {
           position.right = size.viewSize[0] - point[0];
         }
         return position;
       },
       formatter: tooltipFormatter,
       backgroundColor: 'rgba(44, 48, 50, 0.9)'
     },
     xAxis: {
       min: 959651,
       max: 2094290,
       /*axisPointer: {
         show: true,
         lineStyle: {
           color: 'rgba(44, 48, 50, 0.4)'
         },
         label: {
           show: false
         }
       },*/
       axisLine: {
         show: false
       },
       splitLine: {
         show: true,
         lineStyle: {
           color: 'rgba(44, 48, 50, 0.05)'
         }
       },
       axisTick: {
         show: false
       },
       axisLabel: {
         showMinLabel: true,
         showMaxLabel: true,
         fontFamily: '"Open Sans", sans-serif',
         fontWeight: 400,
         fontSize: 10,
         lineHeight: 1.6,
         letterSpacing: '0.150em',
         fontSmoothing: 'antialiased',
         hideOverlap: true,
         padding: [4, 4, 0, 4],
         color: 'rgba(44, 48, 50, 0.6)'
       }
     },
     yAxis: {
       type: 'value',
       axisLine: {
         show: false
       },
       splitLine: {
         show: true,
         lineStyle: {
           color: 'rgba(44, 48, 50, 0.05)'
         }
       },
       axisTick: {
         show: false
       },
       axisLabel: {
         margin: 0,
         verticalAlign: 'bottom',
         padding: [0, 0, 10, 0],
         show: true,
         showMaxLabel: true,
         showMinLabel: false,
         inside: true,
         fontFamily: '"Open Sans", sans-serif',
         fontWeight: 400,
         fontSize: 10,
         lineHeight: 1.6,
         letterSpacing: '0.150em',
         fontSmoothing: 'antialiased'
       }
     },
     series: [
       {
         type: 'custom',
         dimensions: ['from', 'to', 'profit'],
         encode: {
           x: [0, 1],
           y: 2,
           tooltip: [0, 1, 2]
         },
         renderItem: function (params, api) {
           const isLast = params.dataIndex === formattedData.length - 1;
           var yValue = api.value(2);
           var start = api.coord([api.value(0), yValue]);
           var size = api.size([api.value(1) - api.value(0), yValue]);
           var style = api.style();
           return {
             type: 'rect',
             shape: {
               x: start[0],
               y: start[1],
               width: size[0] - (isLast ? 0 : 1),
               height: size[1]
             },
             style,
             // emphasisDisabled: true,
             emphasis: {
               focus: 'self',
               style: {
                 fill: 'rgb(53, 164, 114)'
               }
             }
           };
         },
         color: ['#47db99'],
         data: formattedData
       }
     ]
   };
   
   ```
   
   ### Current Behavior
   
   
https://user-images.githubusercontent.com/9151432/165463807-59d58ff9-d2a7-4fb1-8214-6894e7808b37.mov
   
   As you see in the video:
   
   - When using the trigger axis (which I want, because I don't want to have to 
hover the item to show the tooltip), the tooltip of the following bar appears 
after passing half of the current bar and the axisPointer stays in the left of 
it.
   - When I mouseover a bar but this 🔝  problem happens, both bars appears 
emphasised.
   
   ### Expected Behavior
   
   - I expect that the tooltip changes only when the mouse is hovering/above 
another item, not in the half, also I expect that the axisPointer appears in 
the middle of the bar.
   - The same for emphasis, only in the bar that is being shown in the tooltip.
   
   ### Environment
   
   ```markdown
   - OS: macOS Monterey
   - Browser: Chrome 100
   ```
   
   
   ### Any additional comments?
   
   I'm sorry if this is not a bug, but I don't fully understand what's going 
on. Thanks in advance.


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