[GitHub] [echarts] echarts-bot[bot] commented on issue #18866: [Bug] 通过dispatch 自己实现 toolbox中的框选回退功能。

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

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

   @ximi66 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] Realize the frame selection fallback function in the toolbox through dispatch.
   
   **BODY**
   
   ### Version
   
   5.4.2
   
   ### Link to Minimal Reproduction
   
   wu
   
   ### Steps to Reproduce
   
   ```
   import React, { useState } from 'react';
   import ReactECharts from 'echarts-for-react'
   const data = [
     {
       name: '231424',
       value: 112312
     },
     {
       name: 'e',
       value: 112312
     },
     {
       name: 'r',
       value: 112312
     }, {
       name: 'sd',
       value: 112312
     }, {
       name: '534',
       value: 112312
     },
   
   
   
   ]
   
   function MyChart() {
     const [chartInstance, setChartInstance] = useState(null);
     const [history, setHistory] = useState([]);
   
     // Handle the fallback event
     function handleBack() {
       const last = history[history. length - 1];
       if (!last) return;
   // Why does this dispatchAction fail? ? ? ? ? ? ? ? ? ? ? ? ?
       chartInstance. dispatchAction({
         ...last,
         type: 'dataZoom',
         from: 'back'
       });
       setHistory(prev => prev. slice(0, -1));
     }
   
     // Handle the data range selection event
     function handleDataZoom(params) {
       // If it is a rollback event, no history is recorded
       if (params. from === 'back') return;
       setHistory(prev => [...prev, params]);
     }
   
     // Configure the options of ECharts
     const option = {
       xAxis: {
         type: 'category',
         data: data.map(item => item.name)
       },
       yAxis: {
         type: 'value'
       },
       toolbox: {
         feature: {
           dataZoom: {}
         },
        iconStyle: {
             opacity: 0
           }
       },
       series: [
         {
           type: 'line',
           data: data.map(item => item.value)
         }
       ]
     };
   
     // save the chart instance
     function handleChartReady(chart) {
       setChartInstance(chart);
   
       // Trigger data range selection event
       chart. dispatchAction({
         type: 'takeGlobalCursor',
         key: 'dataZoomSelect',
         dataZoomSelectActive: true, // allow zooming
       });
   
   
       // Monitor changes in the data range selector
       chart.on('datazoom', handleDataZoom);
     }
   
     return (
       <div>
         <ReactECharts
           option={option}
           style={{ height: '400px' }}
           onChartReady={handleChartReady}
         />
         <button onClick={handleBack}>Back</button>
         <div>History: {JSON.stringify(history)}</div>
       </div>
     );
   }
   
   export default MyChart;
   ```
   
   ### Current Behavior
   
   none
   
   ### Expected Behavior
   
   ![image](https://github.com/apache/echarts/assets/18644939/e81650bc-7dce-4b91-926c-de44bf704d61)
   
   This is our design draft
   
   ### Environment
   
   ```markdown
   - OS:
   -Browser:
   - 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