dirslashls commented on issue #16152: URL: https://github.com/apache/echarts/issues/16152#issuecomment-983725274
Hello please use the following code which is a slight modification of the bar chart animation at https://echarts.apache.org/examples/en/editor.html?c=bar-drilldown. That one has 2 levels and I am trying to create 3 levels. In the below code, I have an option indicating commenting "groupId" shows the universal transition from level 1 to 2. But drilling level 2 to 3 will not be possible as I won't know the level 3 grouping from level 2 data. To support multi-level drill-down I think there needs to be two group ids. One about the group a data item belongs to w.r.t the parent and one about the group the child data elements belong to. ```js option = { xAxis: { data: ['Animals', 'Fruits', 'Cars'] }, yAxis: {}, dataGroupId: '', animationDurationUpdate: 500, series: { type: 'bar', id: 'sales', data: [ { value: 5, groupId: 'animals' }, { value: 2, groupId: 'fruits' }, { value: 4, groupId: 'cars' } ], universalTransition: { enabled: true, divideShape: 'clone' } } }; const drilldownData = [ { dataGroupId: 'animals', data: [ ['Cats', 4,'household'], ['Dogs', 2,'household'], ['Cows', 1,'farm'], ['Sheep', 2,'farm'], ['Pigs', 1,'farm'] ] }, { dataGroupId: 'fruits', data: [ ['Apples', 4,'sweet'], ['Oranges', 2,'sour'] ] }, { dataGroupId: 'cars', data: [ ['Toyota', 4,'japanese'], ['Opel', 2,'german'], ['Volkswagen', 2,'german'] ] } ]; const drilldownData2 = [ { dataGroupId: 'household', data: [['Canine',2],['Feline',1]] }, ] let level = 0; myChart.on('click', function (event) { level = (level+1)%3; console.debug(level); if (event.data) { var subData = (level === 1 ? drilldownData : drilldownData2).find(function (data) { return data.dataGroupId === event.data.groupId; }); if (!subData) { return; } myChart.setOption({ xAxis: { data: subData.data.map(function (item) { return item[0]; }) }, series: { type: 'bar', id: 'sales', dataGroupId: subData.dataGroupId, data: subData.data.map(function (item) { return { value: item[1] , groupId: item[2] /* comment groupId and the universal transition works but not 2nd level drill */ }; }), universalTransition: { enabled: true, divideShape: 'clone' } }, graphic: [ { type: 'text', left: 50, top: 20, style: { text: 'Back', fontSize: 18 }, onclick: function () { level = -1; myChart.setOption(option); } } ] }); } }); ``` -- 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: [email protected] For queries about this service, please contact Infrastructure at: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
