Pie chart with radial gradient

Applying a radial gradient to a pie chart does not adhere to sector size/rotation, for example:

option = {
  "color": [
    "rgb(65, 140, 240)",
    "rgb(252, 180, 65)",
    "rgb(224, 64, 10)",
    "rgb(5, 100, 146)",
  ],
  "dataset": [
    {
      "source": [
        {
          "name": "A",
          "value": 25,
        },
        {
          "name": "B",
          "value": 25,
        },
        {
          "name": "C",
          "value": 25
        },
        {
          "name": "D",
          "value": "25"
        }
      ],
    }
  ],
  "series": [
    {
      "type": "pie",
      "startAngle": 0,
      "itemStyle": {
          color: function (args) {
            var c = option.color[args.dataIndex],
                c2 = c.replace(')', ',.8)'),
                c3 = c.replace(')', ',.9)')
            return {
              globalCoord:false,
              type: 'radial',
              x: 0, // calculate x
              y: 0, // calculate y
              r: .9,
              colorStops: [
                { offset: .75, color: c3 },
                { offset: .95, color: c2 },
                { offset: 1, color: c }
              ]
            }
          }            
      },
    }
  ]
}

Produces this:

While I want to have this:

Is there something builtin to help calculate x,y of the radial gradient for each sector ?

[pissang]

It’s better to use global coordinates to declare the radial gradient in your scene.

The globalCoord in documentation is wrong. Sorry about this. Please use global instead.

option = {
  "color": [
    "rgb(65, 140, 240)",
    "rgb(252, 180, 65)",
    "rgb(224, 64, 10)",
    "rgb(5, 100, 146)",
  ],
  "dataset": [
    {
      "source": [
        {
          "name": "A",
          "value": 25,
        },
        {
          "name": "B",
          "value": 25,
        },
        {
          "name": "C",
          "value": 25
        },
        {
          "name": "D",
          "value": "25"
        }
      ],
    }
  ],
  "series": [
    {
      "type": "pie",
      "startAngle": 0,
      data: [
        {
          "name": "A",
          "value": 25,
        },
        {
          "name": "B",
          "value": 25,
        },
        {
          "name": "C",
          "value": 25
        },
        {
          "name": "D",
          "value": "25"
        }
      ],
      "itemStyle": {
          color: function (args) {
            var c = option.color[args.dataIndex],
                c2 = c.replace(')', ',.8)'),
                c3 = c.replace(')', ',.9)')
                
            return {
              // Use global coordinates
              global: true,
              type: 'radial',
              x: myChart.getWidth() / 2, // calculate x
              y: myChart.getHeight() / 2, // calculate y
              r: 200,
              colorStops: [
                { offset: .75, color: c3 },
                { offset: .95, color: c2 },
                { offset: 1, color: c }
              ]
            }
          }            
      },
    }
  ]
}

[mnasrimedamine211]

Thank you so much for your help t

Le jeu. 8 déc. 2022 à 11:06 AM, Berke Alp Çalışkan @.***> a écrit :

Hmm… right after this issue, I tried different r values and I came up with this solution:

let width = $chartDom.width() let height = $chartDom.height() for (let i = 0; i < data.length; i++) { data[i].itemStyle = { color: { type: ‘radial’, x: width / 2, y: height / 2, r: (data[i].progress * 1.56) + (width * 0.05), colorStops: [ {offset:0.99, color: data[i].itemStyle.color.colorStops[0].color }, {offset:1, color: ‘#939393’} ], global: true } }

                    for (let c of data[i].children) {
                        c.itemStyle = {
                            color: {
                                type: 'radial',
                                x: width / 2,
                                y: height / 2,
                                r: (c.progress * 1.05) + (width * 0.2),
                                colorStops: [
                                    {offset:0.99, color: data[i].itemStyle.color.colorStops[0].color},
                                    {offset:1, color: '#939393'}
                                ],
                                global: true
                            }
                        }
                    }
                }

And the result is so good. [image: image] https://user-images.githubusercontent.com/20144149/206419021-07a09952-e545-4928-926d-d2eae55d78be.png

— Reply to this email directly, view it on GitHub https://github.com/apache/echarts/issues/9700#issuecomment-1342423748, or unsubscribe https://github.com/notifications/unsubscribe-auth/ARNDS5TT3CLIQPP4VREL52DWMGXLNANCNFSM4GORWD6Q . You are receiving this because you commented.Message ID: @.***>