G2PlotDemo = {
const wrapper = html`<div style="text-align: center;"></div>`;
const container = html`<div style="height: 600px;"></div>`
wrapper.appendChild(container);
yield wrapper;
const data = [
{ type: 'Apple', value: 27 },
{ type: 'Banana', value: 25 },
{ type: 'Orange', value: 18 },
{ type: 'Peach', value: 15 },
{ type: 'Other', value: 8 },
];
const rosePlot = new G2Plot.Rose(container, {
forceFit: true,
title: { visible: true, text: 'A Basic Rose Chart' },
description: { visible: true, text: 'Declare (colorField) as the field maps to color channel.' },
radius: 0.8,
data,
radiusField: 'value',
categoryField: 'type',
colorField: 'type',
label: { visible: true, type: 'outer', content: (text) => text.value },
});
rosePlot.render();
}