// In an app: import { setupECharts } from '@aparte/plugin-echarts'; setupECharts();
const donut = {
title: { text: 'Where visitors come from' }, tooltip: { trigger: 'item' }, legend: { bottom: 0 },
series: [{ type: 'pie', radius: ['45%', '70%'], data: [
{ name: 'Search', value: 4820 }, { name: 'Direct', value: 2310 }, { name: 'Newsletter', value: 1240 },
{ name: 'Social', value: 980 }, { name: 'Referral', value: 610 },
] }],
};
// Open, close, low, high: a month of made-up daily prices.
const days = Array.from({ length: 22 }, (_, i) => 'Day ' + (i + 1));
const prices = days.map((_, i) => {
const open = 170 + Math.sin(i / 3) * 6 + i * 0.4;
const close = open + Math.sin(i * 1.7) * 3;
return [open, close, Math.min(open, close) - 1.5, Math.max(open, close) + 1.5].map((n) => Math.round(n * 100) / 100);
});
const candles = {
title: { text: 'ACME, last month' }, tooltip: { trigger: 'axis' },
xAxis: { type: 'category', data: days }, yAxis: { type: 'value', scale: true },
series: [{ type: 'candlestick', data: prices }],
};
document.querySelector('aparte-chat-bubble').setSegments([
{ id: 's1', type: 'code', language: 'echarts', content: JSON.stringify(donut, null, 2) },
{ id: 's2', type: 'code', language: 'echarts', content: JSON.stringify(candles, null, 2) },
]);