update pay function

This commit is contained in:
2025-11-30 15:36:20 +08:00
parent 2f8388ba41
commit 33a3c16421
2 changed files with 74 additions and 31 deletions

View File

@@ -5,6 +5,33 @@ import React, { useEffect, useRef } from 'react';
import { Box, useColorModeValue } from '@chakra-ui/react'; import { Box, useColorModeValue } from '@chakra-ui/react';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
/**
* 验证 ECharts 配置是否有效
*/
const isValidOption = (option) => {
if (!option || typeof option !== 'object') return false;
// 检查 xAxis 配置
if (option.xAxis) {
const xAxis = Array.isArray(option.xAxis) ? option.xAxis[0] : option.xAxis;
if (xAxis && xAxis.type === 'category' && (!xAxis.data || xAxis.data.length === 0)) {
// category 类型的 xAxis 必须有数据
return false;
}
}
// 检查 series 配置
if (option.series) {
const series = Array.isArray(option.series) ? option.series : [option.series];
const hasValidSeries = series.some(s => s && s.data && s.data.length > 0);
if (!hasValidSeries) {
return false;
}
}
return true;
};
/** /**
* ECharts 图表渲染组件 * ECharts 图表渲染组件
* @param {Object} option - ECharts 配置对象 * @param {Object} option - ECharts 配置对象
@@ -26,6 +53,12 @@ export const EChartsRenderer = ({ option, height = 400, variant = 'auto' }) => {
useEffect(() => { useEffect(() => {
if (!chartRef.current || !option) return; if (!chartRef.current || !option) return;
// 验证配置是否有效
if (!isValidOption(option)) {
console.warn('EChartsRenderer: Invalid or empty chart configuration, skipping render');
return;
}
// 初始化图表(支持深色模式) // 初始化图表(支持深色模式)
if (!chartInstance.current) { if (!chartInstance.current) {
chartInstance.current = echarts.init(chartRef.current, isDarkMode ? 'dark' : null); chartInstance.current = echarts.init(chartRef.current, isDarkMode ? 'dark' : null);

View File

@@ -113,41 +113,51 @@ const StepCard = ({ result, idx }) => {
// 如果有 echarts 图表数据,尝试生成图表 // 如果有 echarts 图表数据,尝试生成图表
if (data.data?.chart_data) { if (data.data?.chart_data) {
const chartData = data.data.chart_data; const chartData = data.data.chart_data;
const echartsConfig = {
title: { text: `${data.data.formatted_date || ''} 涨停概念分布` },
tooltip: { trigger: 'axis' },
xAxis: {
type: 'category',
data: chartData.labels || [],
axisLabel: { rotate: 30, fontSize: 10 },
},
yAxis: { type: 'value' },
series: [
{
name: '涨停家数',
type: 'bar',
data: chartData.counts || [],
itemStyle: {
color: {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{ offset: 0, color: '#ff7043' },
{ offset: 1, color: '#ff5722' },
],
},
},
},
],
};
const markdownContent = `\`\`\`echarts // 验证图表数据是否有效
${JSON.stringify(echartsConfig)} const hasValidChartData = chartData.labels?.length > 0 && chartData.counts?.length > 0;
\`\`\``;
return ( return (
<Box mt={3}> <Box mt={3}>
<MarkdownWithCharts content={markdownContent} variant="dark" /> {hasValidChartData ? (
(() => {
const echartsConfig = {
title: { text: `${data.data.formatted_date || ''} 涨停概念分布` },
tooltip: { trigger: 'axis' },
xAxis: {
type: 'category',
data: chartData.labels,
axisLabel: { rotate: 30, fontSize: 10 },
},
yAxis: { type: 'value' },
series: [
{
name: '涨停家数',
type: 'bar',
data: chartData.counts,
itemStyle: {
color: {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{ offset: 0, color: '#ff7043' },
{ offset: 1, color: '#ff5722' },
],
},
},
},
],
};
const markdownContent = `\`\`\`echarts
${JSON.stringify(echartsConfig)}
\`\`\``;
return <MarkdownWithCharts content={markdownContent} variant="dark" />;
})()
) : (
<Text fontSize="xs" color="gray.500">暂无图表数据</Text>
)}
{/* 板块详情 */} {/* 板块详情 */}
{data.data?.sector_data && ( {data.data?.sector_data && (