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

   Hi @dirslashls, below is the snippet. You can run it in [online 
editor](https://echarts.apache.org/examples/en/editor.html?c=bar-drilldown) to 
have a try:
   
   ```javascript
   // level 1 (root)
   const data_1 = {
     dataGroupId: '1',
     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
   ];
   
   // Generate 1+1 options for each data
   const allOptionsWithItemGroupId = {};
   const allOptionsWithoutItemGroupId = {};
   
   allDataGroups.forEach((dataGroup, index) => {
     const { dataGroupId, data } = dataGroup;
     const optionWithItemGroupId = {
       xAxis: {
         type: 'category'
       },
       yAxis: {},
       // dataGroupId: dataGroupId,
       animationDurationUpdate: 500,
       series: {
         type: 'bar',
         // id: "sales",
         dataGroupId: dataGroupId,
         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();
           }
         }
       ]
     };
     const optionWithoutItemGroupId = {
       xAxis: {
         type: 'category'
       },
       yAxis: {},
       // dataGroupId: dataGroupId,
       animationDurationUpdate: 500,
       series: {
         type: 'bar',
         // id: "sales",
         dataGroupId: dataGroupId,
         encode: {
           x: 0,
           y: 1
           // itemGroupId: 2,
         },
         data: data.map((item, index) => {
           return item.slice(0, 2);  // This is what "without itemGroupId" means
         }),
         universalTransition: {
           enabled: true,
           divideShape: 'clone'
         }
       },
       graphic: [
         {
           type: 'text',
           left: 50,
           top: 20,
           style: {
             text: 'Back',
             fontSize: 18
           },
           onclick: function () {
             goBack();
           }
         }
       ]
     };
     allOptionsWithItemGroupId[dataGroupId] = optionWithItemGroupId;
     allOptionsWithoutItemGroupId[dataGroupId] = optionWithoutItemGroupId;
   });
   
   // A stack to remember previous dataGroupsId
   const dataGroupIdStack = [];
   
   const goForward = (dataGroupId) => {
     dataGroupIdStack.push(myChart.getOption().series[0].dataGroupId); // push 
current dataGroupId into stack.
     myChart.setOption(allOptionsWithoutItemGroupId[dataGroupId], false);
     myChart.setOption(allOptionsWithItemGroupId[dataGroupId], false);  // 
setOption twice? Yeah, it is dirty.
   };
   
   const goBack = () => {
     if (dataGroupIdStack.length === 0) {
       console.log('Already in root dataGroup!');
     } else {
       console.log('Go back to previous level');
       myChart.setOption(
         
allOptionsWithoutItemGroupId[myChart.getOption().series[0].dataGroupId],
         false
       );
       myChart.setOption(allOptionsWithItemGroupId[dataGroupIdStack.pop()], 
true); // Note: the parameter notMerge is set true
     }
   };
   
   option = allOptionsWithItemGroupId['1'];  // The initial option is the root 
data option
   
   myChart.on('click', 'series.bar', (params) => {
     if (params.data[2]) {  // If current params is not belong to the 
"childest" data, then it has data[2]
       const dataGroupId = params.data[2];
       goForward(dataGroupId);
     }
   });
   ```


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