slindersAmsterdam opened a new issue, #18201:
URL: https://github.com/apache/echarts/issues/18201
### Version
52.2
### Link to Minimal Reproduction
_No response_
### Steps to Reproduce
The drilldown function doesnt work with encode. When 'data' gets activated,
it does work.
---
var container = document.getElementById('main');
var chart = echarts.init(container);
const RV = [['met', 52],['zonder', 14]];
const RA = [['met', 6], ['zonder', 10]];
const GL = [['met', 6], ['zonder', 1]];
const vri = [ ['RV', 5, 'A'], ['RA', 2, 'B'], ['GL', 40, 'C'] ];
chart.setOption({
tooltip: {trigger: 'item'},
dataset: [
{
dimensions: ['status', 'waarde', 'groupId'],
source: vri
}
],
series: [
{
label: {show: false},
emphasis: {label: {show: true,fontSize: 40, fontWeight: 'bold'}
},
type: 'pie',
radius: ['35%', '65%'],
center: ['50%', '55%'],
id: "vri",
//----- itemgroupID doesn't seem to work in encode, drilldownfunction does
not work
encode: {
itemName: 'status',
value: 'waarde',
tooltip: ['status', 'waarde','groupId'],
itemGroupID: 'groupId',
},
//----- groupID directly in data does work, drilldownfunction is active
// data: [
// { value: 5, groupId: 'A', name: 'RV' },
// {value: 2, groupId: 'B', name: 'RA'},
// {value: 40, groupId: 'C', name: 'GL'}]
},]}
);
const drilldownData = [
{ dataGroupId: 'A', data: RV},
{ dataGroupId: 'B', data: RA},
{ dataGroupId: 'C', data:GL}
];
mychart.on("click", function (event) {
console.log(event)
if (event.data) {
var subData = drilldownData.find(function (data) {
return data.dataGroupId === event.data.groupId;
});
if (!subData) {
return;
}
myChart.setOption({
series: {
type: "pie",
radius: ['35%', '65%'],
center: ['50%', '55%'],
id: "test",
dataGroupId: subData.dataGroupId,
data: subData.data.map(function (item) {
return {
value: item[1],
groupId: item[0],
name: item[0],
};
}),
universalTransition: {
enabled: true,
divideShape: "clone",
},
},
graphic: [
{
type: "text", left: 50, top: 20,
style: {text: "terug",fontSize: 18},
onclick: function () {myChart.setOption(option, true);
},
},
],
});}
});
// return option
### Current Behavior
The drilldown function for this pie works when groupid is included directly
in data:
data: [
{value: 5, groupId: 'A', name: 'RV' },
{value: 2, groupId: 'B', name: 'RA'},
{value: 40, groupId: 'C', name: 'GL'}]
It doesnt seem to work when dataset is used (instead of data) and groupId is
included in encode:
encode: {
itemName: 'status',
value: 'waarde',
tooltip: ['status', 'waarde','groupId'],
itemGroupID: 'groupId',
},
### Expected Behavior
The drilldown function should work based on a dataset.
### Environment
```markdown
- OS:
- Browser:
- Framework:
```
### Any additional comments?
I copied the code to codepen but I get an error:
'ReferenceError: mychart is not defined'
https://codepen.io/slindersAmsterdam/pen/yLqpbLX
--
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]
