ThemedChart
Основа всех echarts-графиков: палитра из CSS-токенов, перерисовка при смене темы, общий вид подсказок.
Новый график строится через ThemedChart: функция build(palette, size) получает цвета текущей темы и возвращает
опции echarts. Палитра пересчитывается при переключении светлой и тёмной темы.
Живой код — редактируйте
<ThemedChart height={220} build={(palette) => ({ grid: { left: 32, right: 16, top: 16, bottom: 24 }, xAxis: { type: 'category', data: ['Пн', 'Вт', 'Ср', 'Чт', 'Пт'], axisLabel: { color: palette.muted } }, yAxis: { type: 'value', splitLine: { lineStyle: { color: palette.border } }, axisLabel: { color: palette.muted } }, tooltip: { trigger: 'axis', ...baseTooltip(palette) }, series: [ { type: 'bar', data: [12, 18, 9, 22, 16], itemStyle: { color: palette.brand, borderRadius: 6 } } ] })} />
Пропсы
Prop
Type