Public
Edited
Dec 24, 2022
Fork of Column Chart
Insert cell
Insert cell
Insert cell
Insert cell
{
return G2.render({
type: "view",
height: 320,
data: [
{ type: "分类一", value: 27 },
{ type: "分类二", value: 25 },
{ type: "分类三", value: 18 },
{ type: "分类四", value: 15 },
{ type: "分类五", value: 10 },
{ type: "其他", value: 5 }
],
// 需要在外部定义 coordinates
coordinates: [{ type: "theta" }],
children: [
{
type: G2PlotPie,
encode: { y: "value", color: "type" },
labels: [{ text: "value", autoRotate: true, offset: 30 }]
}
]
});
}
Insert cell
Insert cell
{
return G2.render({
type: "view",
height: 320,
data: [
{ type: "分类一", value: 27 },
{ type: "分类二", value: 25 },
{ type: "分类三", value: 18 },
{ type: "分类四", value: 15 },
{ type: "分类五", value: 10 },
{ type: "其他", value: 5 }
],
interactions: [{ type: "legendFilter" }],
// 需要在外部定义 coordinates
coordinates: [{ type: "theta", innerRadius: 0.56 }],
children: [
{
type: G2PlotPie,
encode: { y: "value", color: "type" },
labels: [{ text: "value" }]
},
{
type: "text",
// [TODO] 无法获取统计数值
transform: [{ type: "groupColor", text: "sum" }],
encode: { text: "value", color: "type" },
style: {
x: "50%",
y: "50%",
textAlign: "center",
textBaseline: "middle",
fontSize: 24,
fontWeight: 600
}
}
]
});
}
Insert cell
Insert cell
G2PlotPie = {
function G2PlotPie(options) {
const mergeOptions = assignDeep(
{},
{
isStack: true,
animate: {
enterType: "waveIn",
updateType: "waveIn"
}
},
options
);

const {
style = {},
scale,
axis,
legend,
slider,
scrollbar,
labels,
animate
} = mergeOptions;

const DEFAULT_BACKGROUND_OPTIONS = {
style: { fillOpacity: 0.15, fill: "rgb(180, 180, 180)" }
};
const key = Symbol();
const primary = {
...defineMark("interval", mergeOptions, {}),
scale,
axis: assignDeep({ x: { title: false } }, axis),
legend,
slider,
scrollbar,
labels,
animate: omitObject(animate, [""]),
style: omitObject(style, [""]),
_key: "pie"
};

return (view) => {
console.info(view.marks);
return [primary];
};
}

G2PlotPie.props = { composite: true };
return G2PlotPie;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more