我想在Vega-Lite中创建一个饼图。我已经创建了一个，但我希望它的半径能够响应显示网页的屏幕大小。

我考虑过创建一个JavaScript函数，该函数根据屏幕宽度动态地重新生成具有可变半径的基于宽度的图形，但该解决方案似乎过于复杂，而且容易出错。有人对我如何使饼图的大小响应有建议吗？ 除此之外，正如您可能已经注意到的，图表的左侧被剪掉了，大概是由于包含了一个图例。有没有人碰巧知道一个快速修复方法，可以不手动设置图形容器的大小来修复这个问题？

顺晟科技：

它看起来像是在规范之外设置的。也许是您有意的？

            vegaEmbed("#pie-chart", {
                $schema: "https://vega.github.io/schema/vega-lite/v5.json",
                autosize: {
                    type: "fit",
                    contains: "padding",
                },
                resize: true,
                layer: [
                    {mark: {type: "arc", innerRadius: 35, outerRadius: 80}},
                    {
                        mark: {type: "text", radius: 57.5, fill: "white"},
                        encoding: {
                            text: {field: "count", type: "nominal"},
                        },
                    },
                ],
                encoding: {
                    color: {
                        field: "name",
                        type: "nominal",
                    },
                    theta: {
                        field: "count",
                        type: "quantitative",
                        stack: true,
                    },
                },
                data: {
                    values: [
                        {
                            name: "a",
                            count: 21,
                        },
                        {
                            name: "b",
                            count: 6,
                        },
                        {
                            name: "c",
                            count: 3,
                        },
                        {
                            name: "d",
                            count: 3,
                        },
                        {
                            name: "e",
                            count: 2,
                        },
                        {
                            name: "f",
                            count: 1,
                        },
                        {
                            name: "g",
                            count: 2,
                        },
                        {
                            name: "h",
                            count: 1,
                        },
                    ],
                },
            });