[GitHub] [echarts] echarts-bot[bot] commented on issue #18736: [Bug] xAxis设置max字段后，导致animationEasingUpdate更新动画失效

["echarts-bot[bot] (via GitHub)" <gi...@apache.org>]

echarts-bot[bot] commented on issue #18736:
URL: https://github.com/apache/echarts/issues/18736#issuecomment-1583886085

   @minghangben 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>
   
   **TITLE**
   
   [Bug] After xAxis sets the max field, the animationEasingUpdate update animation fails
   
   **BODY**
   
   ### Version
   
   5.4.2
   
   ### Link to Minimal Reproduction
   
   https://echarts.apache.org/examples/zh/editor.html?c=dynamic-data2
   
   ### Steps to Reproduce
   
   Use this configuration item in the official editor, line 110 xAxis: { max: newData.value[0]+1000 }, use this line of code, the polyline update animation animationEasingUpdate: 'linear' is invalid, if you comment out xAxis: { max : newData.value[0]+1000 }, polyline update animation is normal
   
   ``
   function randomData(i = 0) {
     // now = new Date(+now + oneDay);
     value = Math. random() * 99;
     return {
       name: now.toString(),
       value: [Date.now() - i * 1000, Math.round(value)]
     };
   }
   let data = [];
   let now = new Date();
   // let oneDay = 24 * 3600 * 1000;
   let value = Math. random() * 99;
   for (var i = 0; i < 10; i++) {
     data.unshift(randomData(i));
   }
   console. log(data);
   option = {
     xAxis: {
       type: 'time',
       boundaryGap: false,
       min: 'dataMin',
       splitLine: {
         show: false
       }
     },
     yAxis: {
       type: 'value',
       min: 'dataMin',
       max: 'dataMax',
       boundaryGap: [0, '100%'],
       splitLine: {
         show: false
       }
     },
     dataZoom: [
       {
         type: 'inside', //slider means there is a slider, inside means built-in
         show: true,
         // minSpan: 10,
         minSpan: 10,
         maxSpan: 90,
         start: 90,
         end: 100
         // filterMode: 'filter',
       }
     ],
     series: [
       {
         id: 'data',
         type: 'line',
         clip: false,
         symbol: 'none',
         data: data,
         cursor: 'default',
         emphasis: {
           disabled: true
         },
       },
       {
         id: 'point',
         // Set the ripple effect animation
         type: 'effectScatter',
         // There are three types: cartesian2d (two-dimensional rectangular coordinate system) polar (polar coordinate system) geo (geographical coordinate system), this requirement uses cartesian2d
         coordinateSystem: 'cartesian2d',
         // single blinking point
         data: [{ value: [], symbolSize: 10 }], //2d coordinate system--[x axis, y axis, mark size]
         // When to display special effects: 'render' - display special effects after drawing is completed 'emphasis' - display special effects when highlighting (hover)
         showEffectOn: 'render',
         // Ripple effect configuration
         rippleEffect: {
           //Ripple effect related configuration.
           period: 3, //The animation time.
           scale: 3, //The maximum scale of the ripple in the animation.
           brushType: 'stroke' //The drawing method of ripples, 'stroke' and 'fill' are optional.
         },
         // hoverAnimation: true,
         itemStyle: {
           color: '#000',
           shadowBlur: 10,
           shadowColor: '#333'
         },
         tooltip: { show: false },
         cursor: 'default',
         zlevel: 1,
         // label: {
         // show: true,
         // formatter: (params: any) => dateFormat(params. value[0], 'HH:mm:ss'),
         // position: 'right',
         // },
       }
     ],
     animationDurationUpdate: 1000,
     animationEasingUpdate: 'linear'
   };
   setInterval(function () {
     const newData = randomData();
     data. push(newData);
     myChart.setOption({
       series: [
         {
           id: 'data',
           data: data,
         },
         {
           id: 'point',
           // last dot to shine
           data: [{ value: [newData.value[0], newData.value[1]] }]
         }
       ],
       xAxis: { max: newData. value[0]+1000 },
     });
   }, 1000);
   ``
   
   ### Current Behavior
   
   Use this configuration item in the official editor, line 110 xAxis: { max: newData.value[0]+1000 }, use this line of code, the polyline update animation animationEasingUpdate: 'linear' is invalid, if you comment out xAxis: { max : newData.value[0]+1000 }, polyline update animation is normal
   
   ### Expected Behavior
   
   xAxis: { max: newData.value[0]+1000 } and animationEasingUpdate: 'linear' take effect at the same time
   
   ### Environment
   
   ```markdown
   - OS: mac
   - Browser: chrome
   - Framework:
   ```
   
   
   ### Any additional comments?
   
   _No response_
   </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-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org