69 lines
2.9 KiB
TypeScript
69 lines
2.9 KiB
TypeScript
'use client';
|
|
|
|
import React, { useMemo } from 'react';
|
|
import { type ChartInstance } from '@/domain/entities/ChartInstance';
|
|
import { type StyleConfig } from '@/domain/entities/StyleConfig';
|
|
import { chartRenderer } from '@/frameworks/di/container';
|
|
import { EChartsBase } from './EChartsBase';
|
|
import { KPICard } from './KPICard';
|
|
import { DataTable } from './DataTable';
|
|
|
|
const DEFAULT_STYLE: StyleConfig = {
|
|
title: { text: '', visible: true, fontSize: 16, fontWeight: 'bold', color: '#333', align: 'left' },
|
|
colors: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4'],
|
|
legend: { visible: true, position: 'top', orient: 'horizontal', fontSize: 12, color: '#666' },
|
|
xAxis: { visible: true, labelVisible: true, labelFontSize: 12, labelColor: '#666', labelRotation: 0, titleVisible: false, titleText: '', gridVisible: true, gridColor: '#eee' },
|
|
yAxis: { visible: true, labelVisible: true, labelFontSize: 12, labelColor: '#666', labelRotation: 0, titleVisible: false, titleText: '', gridVisible: true, gridColor: '#eee' },
|
|
dataLabel: { visible: false, fontSize: 12, color: '#333', position: 'outside', format: 'value' },
|
|
background: { color: '#fff', opacity: 1, borderRadius: 4 },
|
|
border: { visible: false, color: '#ddd', width: 1, style: 'solid' },
|
|
animation: { enabled: true, duration: 500, easing: 'ease-out' },
|
|
};
|
|
|
|
function ensureStyle(style: any): StyleConfig {
|
|
if (!style || typeof style !== 'object') return DEFAULT_STYLE;
|
|
return {
|
|
title: { ...DEFAULT_STYLE.title, ...(style.title ?? {}) },
|
|
colors: style.colors ?? DEFAULT_STYLE.colors,
|
|
legend: { ...DEFAULT_STYLE.legend, ...(style.legend ?? {}) },
|
|
xAxis: { ...DEFAULT_STYLE.xAxis, ...(style.xAxis ?? {}) },
|
|
yAxis: { ...DEFAULT_STYLE.yAxis, ...(style.yAxis ?? {}) },
|
|
dataLabel: { ...DEFAULT_STYLE.dataLabel, ...(style.dataLabel ?? {}) },
|
|
background: { ...DEFAULT_STYLE.background, ...(style.background ?? {}) },
|
|
border: { ...DEFAULT_STYLE.border, ...(style.border ?? {}) },
|
|
animation: { ...DEFAULT_STYLE.animation, ...(style.animation ?? {}) },
|
|
};
|
|
}
|
|
|
|
export interface ChartRendererProps {
|
|
chart: ChartInstance;
|
|
data: Record<string, any>[];
|
|
}
|
|
|
|
export const ChartRenderer: React.FC<ChartRendererProps> = ({ chart, data }) => {
|
|
const safeChart = useMemo(() => ({
|
|
...chart,
|
|
style: ensureStyle(chart.style),
|
|
}), [chart]);
|
|
|
|
const echartsOption = useMemo(() => {
|
|
if (safeChart.type === 'kpi' || safeChart.type === 'data-table') return null;
|
|
try {
|
|
return chartRenderer.build(safeChart, data);
|
|
} catch {
|
|
return null;
|
|
}
|
|
}, [safeChart, data]);
|
|
|
|
switch (safeChart.type) {
|
|
case 'kpi':
|
|
return <KPICard chart={safeChart} data={data} />;
|
|
case 'data-table':
|
|
return <DataTable chart={safeChart} data={data} />;
|
|
default:
|
|
return echartsOption ? <EChartsBase option={echartsOption} /> : <div style={{ padding: 16, color: '#999' }}>请绑定数据字段</div>;
|
|
}
|
|
};
|
|
|
|
export default ChartRenderer;
|