[I] [Bug]Not possible to customize triggerOn component on multiple axisPointers that are on the same axis [echarts]

[via GitHub]

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

   ### Version
   
   5.6.0
   
   ### Link to Minimal Reproduction
   
   
https://codesandbox.io/p/sandbox/multiple-x-axes-forked-l3vnrw?file=%2Findex.js
   
   ### Steps to Reproduce
   
   Create 2 axisPointers on the same xAxis for different xAxis indexes.
   Try to make one axisPointer fixed on certain value and the other follow the 
mouse.
   
   Expected result:
   First axisPointer should remain on the fixed value, the second axisPointer 
should follow the mouse.
   
   Actual result:
   Both axisPointers either stay fixed or follow the mouse. Not possible to 
have different behaviour.
   
   ### Current Behavior
   
   Please, see the sample code bellow. It is not possible to configure 2 
axisPointers on the same xAxis (for different xAxis indexes) to make one fixed 
at certain value and the other follow the mouse.
   "triggerOn" component on xAxis.axisPointer does not work or have no effect.
   Whenever "triggerOn" value is changed on upper level either on tooltip or on 
global axisPointer it affects both axisPointers.
   
   
   ```
   var dom = document.getElementById("chart-container");
   var myChart = echarts.init(dom, null, {
     renderer: "canvas",
     useDirtyRect: false,
   });
   var app = {};
   
   var option;
   
   const colors = ["#5470C6", "#EE6666"];
   option = {
     color: colors,
     tooltip: {
       trigger: "axis",
       triggerOn: "none",
       show: false,
     },
     // axisPointer: {
     //   triggerOn: "mousemove",
     // },
     legend: {},
     grid: {
       top: 70,
       bottom: 50,
     },
     xAxis: [
       {
         type: "category",
         axisTick: {
           alignWithLabel: true,
         },
         axisLine: {
           onZero: false,
           lineStyle: {
             color: colors[1],
           },
         },
         axisPointer: {
           value: "2016-9",
           snap: false,
           animation: false,
           lineStyle: {
             type: "solid",
             color: "#7f56d9",
             width: 2,
           },
         },
   
         // prettier-ignore
         data: ['2016-1', '2016-2', '2016-3', '2016-4', '2016-5', '2016-6', 
'2016-7', '2016-8', '2016-9', '2016-10', '2016-11', '2016-12'],
       },
       {
         type: "category",
         axisTick: {
           alignWithLabel: true,
         },
         axisLine: {
           onZero: false,
           lineStyle: {
             color: colors[0],
           },
         },
         axisPointer: {
           value: "2016-3",
           snap: false,
           animation: false,
           triggerOn: "mousemove",
           lineStyle: {
             type: "solid",
             color: "#7f56d9",
             width: 2,
           },
         },
         // prettier-ignore
         data: ['2015-1', '2015-2', '2015-3', '2015-4', '2015-5', '2015-6', 
'2015-7', '2015-8', '2015-9', '2015-10', '2015-11', '2015-12'],
       },
     ],
     yAxis: [
       {
         type: "value",
       },
     ],
     series: [
       {
         name: "Precipitation(2015)",
         type: "line",
         xAxisIndex: 1,
         smooth: true,
         emphasis: {
           focus: "series",
         },
         data: [
           2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3,
         ],
       },
       {
         name: "Precipitation(2016)",
         type: "line",
         smooth: true,
         emphasis: {
           focus: "series",
         },
         data: [
           3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7,
         ],
       },
     ],
   };
   
   if (option && typeof option === "object") {
     myChart.setOption(option);
   }
   
   myChart.getZr().on("mousemove", function (event) {
     var pointInPixel = [event.offsetX, event.offsetY];
     var pointInGrid = myChart.convertFromPixel({ xAxisIndex: 1 }, 
pointInPixel);
   
     if (pointInGrid) {
       myChart.dispatchAction({
         type: "updateAxisPointer",
         xAxisIndex: 1, // Move only the second axisPointer
         value: pointInGrid[0],
       });
     }
   });
   
   
   window.addEventListener("resize", myChart.resize);
   
   ```
   
   ### Expected Behavior
   
   First axisPointer should remain on the fixed value, the second axisPointer 
should follow the mouse.
   
   ### Environment
   
   ```markdown
   - OS:
   - Browser:
   - Framework:
   ```
   
   ### Any additional comments?
   
   _No response_


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