[Bug] Unable to manually set decal pattern in sunburst chart per data

retnag commented 1 year ago

Version

5.3.3

Link to Minimal Reproduction

https://echarts.apache.org/examples/en/editor.html?c=sunburst-monochrome&edit=1&code=MYewdgzgLgBAllApgWwIwwLwwN4CgYygA2IATgFwwDkA5qYomFQDT4wAmiwAhkeXgQLEylKqRoAjbgAoADMxjzFC2QDoArAEoWbAu24QAFgEFSpbgE8AGpQDaqFQF1WgjgZNnLATTsAmBerOujAQFsgSIEQAynAAXoiUDsGkIFDcUHDglACy6YaqAAoAkjAA9DAAbC6CoeGRovTAUDoEAL64rQDcuKCQsAgovpg4bMIU1ADEAGJTABwAwgDs6lQd3b3Q8EjIAMzDAoSRIpMzAEIALACcl6tdPeCb-mnDtmwHQoZwROz0YHbBBHerhgADdeABXBIwdTVYGET7fX7_OGuIEo0EQqFJdGuAbIKJQCxEKF41AA4GtWEotEosFESGUfzkuHABE_RjInGo5k4ukMmDYrnAvEEokk7a-Hlw9pCmCOKUwSkKmkstlImCvWWAhVwvlYnWCGVC-Vco1woLokWE4mUUnkpVwlUY-lY-Q81lfdl_DXKg16yhVA0exEcn1akbhgj-gVU2VWsW27Zk8MOrVO9HR5Na1Oy9O0zGJWNC-M2raDA1tIvovO6gsCiuKg0W4vbUWlvE7BU56l-utM2XBr2c3MNqN1rOys045tckvilCd01VwQ1-Ge9WatOj538wXhueJ8spptdnkz4Wt63ztD24Lng9lm-Vt7BaOXKmDjfkp3R87Lz-hpu1a9i6jLLril4Jo-kpLr6A5qoBDarq4mbgSiD52sesomjiU6uOeEEoG214ToaRZOgB3pAT2srRjsaEfOuiHhshgiZg23ZcqxY6gTG24YRKHEnqaZ7LgJC63vhVLicgMGKtUQLRosH4IVR37uqpw40UKqEGjJi64Whq50Qxa4hmpLHbrpkaPsRh6yRxpnajZ7FYcapkyXJ6KccCxl9qZlFaVxVnjo5SEhbxe5ajJpEidhHmQe2SanuiBGCPpkmCPeiUkWwqZAoFYa-Ty0aBuihXUY6IG7glRFXvZXkoj53K0f5QaaUVI4uW1NmeUJ8V6Tl9mxRSRnVVitX4vVj4Gd5ok8hl0rkSVdb0RpTEWTifmRV2Y3wRtQVbRFNX8UN0H9cau1wTpoVxSiaUEItFJ3tJZ2YY2jjdCAAAOGTgPsbAQIgpBwIgECUEC5jsHA4LgxqVCoOoACkLDULMsgo-ehLfVCVAQOCYASOCpDQC0NRkFAlAE5wABmcBgIg7BUig32GAYcBwzSNMgMAsOiNwYDAGDUBkKsrjdk83CUJLVJENwEiIHwEbAikaRIA03DQ7wYtkcExIgorcO2NldVQTSYyiBM7DW2TrgRKQnCkAA6nA7BQIYjLBEa7RdEAA

Steps to Reproduce

I used this example as a base: https://echarts.apache.org/examples/en/editor.html?c=sunburst-monochrome&edit=1

I added a decal configuration to one of the three itemStyle object, and changed its color to green

const item1 = {
color: 'green',
decal:{
color: 'rgba(0, 0, 0, 0.5)',
dashArrayX: [1, 0],
dashArrayY: [2, 5],
symbolSize: 1,
rotation: Math.PI / 6,
symbol: 'rect',
}
};

Current Behavior

The decal options in the itemStyle of the sunburst data is ignored, the color of said data items is successfully set to green, but the stripes are not shown.

Expected Behavior

I expected, to see a striped decal pattern in the green slices of the chart, similar to how you can set the decal pattern on pie chart slices on a per-data-item basis. See example

Environment

- OS: Windows
- Browser: Edge Version 100.0.1185.29 (64-Bit), Firefox Version 105.0.3 (64-Bit)
- Framework: React@17

Any additional comments?

Additional note: series-sunburst.data.itemStyle.decal seem to be ignored. If I set the decal globally, or via series-sunburst.itemStyle.decal, then it works (all slices get a decal pattern), but It should be possible to toggle the decal effect manually for only certain slices, not all of them. This seems to me, is a bug, as it works differently than for pie-charts for example, as I already mentioned (See example)

retnag commented 1 year ago

I read a bit of the code, trying to find differences in SunburstPiece (lib\chart\sunburst\SunburstPiece.js) and PiePiece (lib\chart\pie\PieView.js). I found that in the SunburstPiece on line 99 it uses node.getVisual('decal') to retrieve the decal information, there is no such call in PieView.js. I have compared the following values for the same sunburst chart:

echartsInstance._chartsViews[0].seriesModel.option.data[0].itemStyle.decal;
res = {
  color: "rgba(0, 0, 0, 0.5)",
  dashArrayX: (2)[(1, 0)],
  dashArrayY: (2)[(2, 5)],
  rotation: 0.5235987755982988,
  symbol: "rect",
  symbolSize: 1,
};

echartsInstance._chartsViews[0].seriesModel._viewRoot.getVisual("decal");
res = {
  backgroundColor: null,
  color: "rgba(0, 0, 0, 0.2)",
  dashArrayX: 5,
  dashArrayY: 5,
  dirty: false,
  maxTileHeight: 512,
  maxTileWidth: 512,
  rotation: 0,
  symbol: "none",
  symbolKeepAspect: true,
  symbolSize: 1,
  __ec_inner_2: {
    repeat: "repeat",
    image: canvas,
    svgElement: false,
    svgWidth: 10,
    svgHeight: 10,
    "...": null,
  },
};

Now, with the disclaimer, that I have no idea, what I'm doing ;), this seems wrong. The values don't match.

retnag commented 1 year ago

Also, please note, that in the example I posted (link): if you change only the chartType from type: 'sunburst' to type: 'pie', the piechart works as expected. The decal options of series-sunburst.data.itemStyle.decal are used, as expected, and the pattern also shows. This, again, leads me to believe this is not the intended behavior of the sunburst chart, as it is inconsistent with the pie-chart.

apache / echarts