[GitHub] [echarts] tyn1998 commented on issue #16152: [Feature] Multi-level drill-down

[GitBox]

tyn1998 commented on issue #16152:
URL: https://github.com/apache/echarts/issues/16152#issuecomment-1136906330

   Hi @dirslashls , you can paste this snippet into the [online 
editor](https://echarts.apache.org/examples/en/editor.html?c=bar-drilldown) and 
have a run:
   
   ```javascript
   // level 1
   const data_1 = {
     dataGroupId: '1', // In root level, this field dosen't matter
     data: [
       ['1_1', 5, '1_1'], // x, y, groupId
       ['1_2', 2, '1_2']
     ]
   };
   
   // level 2
   const data_1_1 = {
     dataGroupId: '1_1',
     data: [
       ['1_1_1', 2, '1_1_1'],
       ['1_1_2', 2, '1_1_2'],
       ['1_1_3', 3, '1_1_3']
     ]
   };
   
   const data_1_2 = {
     dataGroupId: '1_2',
     data: [
       ['1_2_1', 6, '1_2_1'],
       ['1_2_2', 7, '1_2_2']
     ]
   };
   
   // level 3
   const data_1_1_1 = {
     dataGroupId: '1_1_1',
     data: [
       ['1_1_1_A', 5],
       ['1_1_1_B', 6],
       ['1_1_1_C', 7],
       ['1_1_1_D', 8]
     ]
   };
   
   const data_1_1_2 = {
     dataGroupId: '1_1_2',
     data: [
       ['1_1_2_A', 2],
       ['1_1_2_B', 9]
     ]
   };
   
   const data_1_1_3 = {
     dataGroupId: '1_1_3',
     data: [
       ['1_1_3_A', 1],
       ['1_1_3_B', 2],
       ['1_1_3_C', 8]
     ]
   };
   
   const data_1_2_1 = {
     dataGroupId: '1_2_1',
     data: [
       ['1_2_1_A', 9],
       ['1_2_1_B', 2],
       ['1_2_1_C', 1]
     ]
   };
   
   const data_1_2_2 = {
     dataGroupId: '1_2_2',
     data: [
       ['1_2_2_A', 7],
       ['1_2_2_B', 7]
     ]
   };
   
   const allDataGroups = [
     data_1,
     data_1_1,
     data_1_2,
     data_1_1_1,
     data_1_1_2,
     data_1_1_3,
     data_1_2_1,
     data_1_2_2
   ];
   
   const allOptions = {};
   
   allDataGroups.forEach((dataGroup, index) => {
     const { dataGroupId, data } = dataGroup;
     const option = {
       xAxis: {
         type: 'category'
       },
       yAxis: {},
       dataGroupId: dataGroupId,
       animationDurationUpdate: 500,
       series: {
         type: 'bar',
         // id: "sales",
         encode: {
           x: 0,
           y: 1,
           itemGroupId: 2
         },
         data: data,
         universalTransition: {
           enabled: true,
           divideShape: 'clone'
         }
       },
       graphic: [
         {
           type: 'text',
           left: 50,
           top: 20,
           style: {
             text: 'Back',
             fontSize: 18
           },
           onclick: function () {
             goBack();
           }
         }
       ]
     };
     allOptions[dataGroupId] = option;
   });
   
   // A stack to remember previous dataGroups
   const dataGroupIdStack = [];
   
   const goForward = (dataGroupId) => {
     // push current dataGroupId into stack.
     const currentDataGroupId = myChart.getOption().dataGroupId;
     dataGroupIdStack.push(currentDataGroupId);
   
     myChart.setOption(allOptions[dataGroupId]);
   };
   
   const goBack = () => {
     if (dataGroupIdStack.length === 0) {
       console.log('Already in root dataGroup!');
     } else {
       console.log('back to previous level');
       console.log(dataGroupIdStack);
       myChart.setOption(allOptions[dataGroupIdStack.pop()]);
     }
   };
   
   // use root dataGroup option when init.
   option = allOptions['1'];
   
   myChart.on('click', 'series.bar', function (params) {
     if (params.data[2]) {
       const dataGroupId = params.data[2];
       goForward(dataGroupId);
     }
   });
   
   ```
   
   ![2022-05-25 15 41 
15](https://user-images.githubusercontent.com/32434520/170208910-93a5cc3b-54a4-44dd-b1b3-7379b3f41041.gif)
   
   I will explain this code in another comment.


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

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