765 lines
26 KiB
JavaScript
765 lines
26 KiB
JavaScript
/**
|
||
* 行业估值分析工具前端JS
|
||
*/
|
||
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 获取DOM元素
|
||
const industryForm = document.getElementById('industryForm');
|
||
const industryNameSelect = document.getElementById('industryName');
|
||
const startDateInput = document.getElementById('startDate');
|
||
const metricSelect = document.getElementById('metric');
|
||
const showCrowdingCheckbox = document.getElementById('showCrowding');
|
||
const analyzeBtn = document.getElementById('analyzeBtn');
|
||
const resetBtn = document.getElementById('resetBtn');
|
||
const loadingSpinner = document.getElementById('loadingSpinner');
|
||
const resultCard = document.getElementById('resultCard');
|
||
const resultTitle = document.getElementById('resultTitle');
|
||
const errorAlert = document.getElementById('errorAlert');
|
||
const errorMessage = document.getElementById('errorMessage');
|
||
const percentileTable = document.getElementById('percentileTable');
|
||
const crowdingStats = document.getElementById('crowdingStats');
|
||
const crowdingTable = document.getElementById('crowdingTable');
|
||
const industryStatsTable = document.getElementById('industryStatsTable');
|
||
const crowdingChartRow = document.getElementById('crowdingChartRow');
|
||
|
||
// 定义图表实例
|
||
let valuationChart = null;
|
||
let crowdingChart = null;
|
||
|
||
// 初始化 - 加载行业列表
|
||
loadIndustryList();
|
||
|
||
// 监听表单提交事件
|
||
industryForm.addEventListener('submit', function(event) {
|
||
event.preventDefault();
|
||
analyzeIndustry();
|
||
});
|
||
|
||
// 监听重置按钮点击事件
|
||
resetBtn.addEventListener('click', function() {
|
||
resetForm();
|
||
});
|
||
|
||
// 拥挤度显示控制
|
||
showCrowdingCheckbox.addEventListener('change', function() {
|
||
if (crowdingStats.classList.contains('d-none')) {
|
||
// 如果还没有数据，不做任何操作
|
||
return;
|
||
}
|
||
|
||
if (this.checked) {
|
||
// 显示拥挤度
|
||
crowdingStats.classList.remove('d-none');
|
||
crowdingChartRow.classList.remove('d-none');
|
||
} else {
|
||
// 隐藏拥挤度
|
||
crowdingStats.classList.add('d-none');
|
||
crowdingChartRow.classList.add('d-none');
|
||
}
|
||
});
|
||
|
||
/**
|
||
* 加载行业列表
|
||
*/
|
||
function loadIndustryList() {
|
||
showLoading(true);
|
||
|
||
fetch('/api/industry/list')
|
||
.then(response => {
|
||
if (!response.ok) {
|
||
return response.json().then(data => {
|
||
throw new Error(data.message || '请求失败');
|
||
});
|
||
}
|
||
return response.json();
|
||
})
|
||
.then(data => {
|
||
if (data.status === 'success') {
|
||
// 填充行业下拉列表
|
||
populateIndustrySelect(data.data);
|
||
} else {
|
||
showError(data.message || '获取行业列表失败');
|
||
}
|
||
})
|
||
.catch(error => {
|
||
showError(error.message || '请求失败，请检查网络连接');
|
||
})
|
||
.finally(() => {
|
||
showLoading(false);
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 填充行业下拉列表
|
||
*/
|
||
function populateIndustrySelect(industries) {
|
||
// 清空选项（保留第一个默认选项）
|
||
industryNameSelect.innerHTML = '<option value="" selected disabled>请选择行业</option>';
|
||
|
||
// 排序行业列表（按名称）
|
||
industries.sort((a, b) => a.name.localeCompare(b.name, 'zh'));
|
||
|
||
// 添加行业选项
|
||
industries.forEach(industry => {
|
||
const option = document.createElement('option');
|
||
option.value = industry.name;
|
||
option.textContent = industry.name;
|
||
industryNameSelect.appendChild(option);
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 分析行业估值
|
||
*/
|
||
function analyzeIndustry() {
|
||
// 显示加载中状态
|
||
showLoading(true);
|
||
|
||
// 隐藏之前的结果和错误信息
|
||
resultCard.classList.add('d-none');
|
||
errorAlert.classList.add('d-none');
|
||
|
||
// 获取表单数据
|
||
const industryName = industryNameSelect.value;
|
||
const startDate = startDateInput.value;
|
||
const metric = metricSelect.value;
|
||
|
||
// 构建请求URL
|
||
let url = `/api/industry/analysis?industry_name=${encodeURIComponent(industryName)}&metric=${metric}`;
|
||
|
||
if (startDate) {
|
||
url += `&start_date=${startDate}`;
|
||
}
|
||
|
||
// 发送API请求
|
||
fetch(url)
|
||
.then(response => {
|
||
if (!response.ok) {
|
||
return response.json().then(data => {
|
||
throw new Error(data.message || '请求失败');
|
||
});
|
||
}
|
||
return response.json();
|
||
})
|
||
.then(data => {
|
||
if (data.status === 'success') {
|
||
// 渲染分析结果
|
||
renderIndustryResults(data);
|
||
} else {
|
||
showError(data.message || '分析失败，请稍后再试');
|
||
}
|
||
})
|
||
.catch(error => {
|
||
showError(error.message || '请求失败，请检查网络连接');
|
||
})
|
||
.finally(() => {
|
||
showLoading(false);
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 渲染行业分析结果
|
||
*/
|
||
function renderIndustryResults(data) {
|
||
// 显示结果卡片（在渲染图表前确保容器可见）
|
||
resultCard.classList.remove('d-none');
|
||
|
||
// 更新标题
|
||
resultTitle.textContent = data.data.title.text;
|
||
|
||
// 渲染分位数数据表格
|
||
renderPercentileTable(data.data.percentiles, data.data.yAxis[0].name);
|
||
|
||
// 渲染行业基本统计
|
||
renderIndustryStats(data.data.percentiles);
|
||
|
||
// 渲染拥挤度数据（如果有）
|
||
if (data.data.crowding) {
|
||
renderCrowdingStats(data.data.crowding);
|
||
|
||
// 根据复选框状态决定是否显示拥挤度
|
||
if (showCrowdingCheckbox.checked) {
|
||
crowdingStats.classList.remove('d-none');
|
||
crowdingChartRow.classList.remove('d-none');
|
||
} else {
|
||
crowdingStats.classList.add('d-none');
|
||
crowdingChartRow.classList.add('d-none');
|
||
}
|
||
} else {
|
||
crowdingStats.classList.add('d-none');
|
||
crowdingChartRow.classList.add('d-none');
|
||
}
|
||
|
||
// 渲染图表（等待DOM更新后）
|
||
setTimeout(() => {
|
||
renderValuationChart(data.data);
|
||
|
||
// 如果有拥挤度数据且复选框被选中，渲染拥挤度图表
|
||
if (data.data.crowding && showCrowdingCheckbox.checked) {
|
||
renderCrowdingChart(data.data);
|
||
}
|
||
|
||
// 滚动到结果区域
|
||
resultCard.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||
}, 100);
|
||
}
|
||
|
||
/**
|
||
* 渲染估值分位数ECharts图表
|
||
*/
|
||
function renderValuationChart(chartData) {
|
||
// 初始化图表
|
||
const chartContainer = document.getElementById('valuationChart');
|
||
|
||
// 确保容器可见
|
||
resultCard.classList.remove('d-none');
|
||
|
||
// 如果已经存在图表实例，则销毁
|
||
if (valuationChart) {
|
||
valuationChart.dispose();
|
||
}
|
||
|
||
// 创建新的图表实例
|
||
valuationChart = echarts.init(chartContainer);
|
||
|
||
// 处理图例数据
|
||
let legendData = chartData.legend.data.filter(item => !item.includes('拥挤度'));
|
||
|
||
// 处理系列数据
|
||
let seriesData = chartData.series.filter(series =>
|
||
!series.name.includes('拥挤度') && series.yAxisIndex !== 1
|
||
);
|
||
|
||
// 去掉所有折线上的圆圈标记
|
||
seriesData.forEach(series => {
|
||
series.symbol = 'none'; // 不显示折线上的圆点标记
|
||
});
|
||
|
||
// 检查数据有效性
|
||
// 注意：现在所有图例都是存在的，因为我们使用行业平均值的历史统计生成它们
|
||
// 不再需要检查q1_values, q3_values等是否存在
|
||
|
||
// 计算Y轴范围
|
||
const percentiles = chartData.percentiles;
|
||
const avgValues = chartData.valuation.avg_values.filter(v => v !== null && v !== undefined);
|
||
|
||
// 找出数据的最小值和最大值
|
||
let minValue = percentiles.min;
|
||
let maxValue = percentiles.max;
|
||
|
||
// 如果有avgValues，也考虑其最小值和最大值
|
||
if (avgValues.length > 0) {
|
||
const avgMin = Math.min(...avgValues);
|
||
const avgMax = Math.max(...avgValues);
|
||
minValue = Math.min(minValue, avgMin);
|
||
maxValue = Math.max(maxValue, avgMax);
|
||
}
|
||
|
||
// 计算Y轴范围，给出更好的视觉展示
|
||
// 下限：取最小值的80%或最小值减去范围的20%，但不小于0
|
||
// 上限：取最大值的120%或最大值加上范围的20%
|
||
const range = maxValue - minValue;
|
||
const padding = range * 0.2;
|
||
let yMinValue = Math.max(0, minValue - padding);
|
||
let yMaxValue = maxValue + padding;
|
||
|
||
// 如果最小值与最大值之间的差距太小，进一步扩大范围以便更好地展示
|
||
if (range / maxValue < 0.1) { // 如果范围小于最大值的10%
|
||
yMinValue = Math.max(0, minValue * 0.5); // 下限可以更低，但不低于0
|
||
yMaxValue = maxValue * 1.3; // 上限可以更高
|
||
}
|
||
|
||
// 设置图表选项
|
||
const option = {
|
||
title: {
|
||
text: chartData.title.text,
|
||
subtext: chartData.title.subtext,
|
||
left: 'center',
|
||
top: 5
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'cross',
|
||
label: {
|
||
backgroundColor: '#6a7985'
|
||
}
|
||
},
|
||
formatter: function(params) {
|
||
const date = params[0].axisValue;
|
||
let result = `${date}<br/>`;
|
||
|
||
params.forEach(param => {
|
||
const value = param.value;
|
||
const color = param.color;
|
||
const marker = `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color};"></span>`;
|
||
const name = param.seriesName;
|
||
|
||
if (name.includes('历史')) {
|
||
// 对于历史统计线，使用固定值显示
|
||
result += `${marker}${name}: ${value !== null ? value.toFixed(2) : 'N/A'}<br/>`;
|
||
} else {
|
||
// 对于当前值，显示更多小数位
|
||
result += `${marker}${name}: ${value !== null ? value.toFixed(2) : 'N/A'}<br/>`;
|
||
}
|
||
});
|
||
|
||
return result;
|
||
}
|
||
},
|
||
legend: {
|
||
data: legendData,
|
||
top: 60
|
||
},
|
||
grid: chartData.grid[0],
|
||
toolbox: chartData.toolbox,
|
||
xAxis: chartData.xAxis[0],
|
||
yAxis: {
|
||
type: 'value',
|
||
name: chartData.yAxis[0].name,
|
||
min: yMinValue,
|
||
max: yMaxValue,
|
||
axisLabel: {
|
||
formatter: function(value) { return value.toFixed(1); }
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: 'dashed'
|
||
}
|
||
}
|
||
},
|
||
dataZoom: [
|
||
{
|
||
type: 'inside',
|
||
start: 0,
|
||
end: 100,
|
||
xAxisIndex: [0]
|
||
},
|
||
{
|
||
start: 0,
|
||
end: 100,
|
||
xAxisIndex: [0]
|
||
}
|
||
],
|
||
series: seriesData
|
||
};
|
||
|
||
// 设置图表选项
|
||
valuationChart.setOption(option);
|
||
|
||
// 手动触发一次resize，确保图表正确渲染
|
||
setTimeout(() => {
|
||
valuationChart.resize();
|
||
}, 50);
|
||
|
||
// 响应式调整
|
||
window.addEventListener('resize', function() {
|
||
if (valuationChart) {
|
||
valuationChart.resize();
|
||
}
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 渲染拥挤度ECharts图表
|
||
*/
|
||
function renderCrowdingChart(chartData) {
|
||
// 初始化图表
|
||
const chartContainer = document.getElementById('crowdingChart');
|
||
|
||
// 确保容器可见
|
||
crowdingChartRow.classList.remove('d-none');
|
||
|
||
// 如果已经存在图表实例，则销毁
|
||
if (crowdingChart) {
|
||
crowdingChart.dispose();
|
||
}
|
||
|
||
// 创建新的图表实例
|
||
crowdingChart = echarts.init(chartContainer);
|
||
|
||
// 使用拥挤度的完整数据，不受其他时间筛选影响
|
||
// 拥挤度数据在后端已经固定为3年数据
|
||
const crowdingDates = chartData.crowding.dates;
|
||
const crowdingPercentiles = chartData.crowding.percentiles;
|
||
|
||
// 筛选拥挤度相关的系列
|
||
const crowdingSeries = {
|
||
name: '行业交易拥挤度历史百分位',
|
||
type: 'line',
|
||
data: crowdingPercentiles,
|
||
symbol: 'none', // 不显示折线上的圆点标记
|
||
lineStyle: {width: 2, color: '#ff7f50'},
|
||
areaStyle: {opacity: 0.2, color: '#ff7f50'},
|
||
markLine: {
|
||
data: [
|
||
{name: "20%", yAxis: 20, lineStyle: {color: "#28a745", type: "dashed"}},
|
||
{name: "80%", yAxis: 80, lineStyle: {color: "#dc3545", type: "dashed"}}
|
||
]
|
||
}
|
||
};
|
||
|
||
// 获取拥挤度数据，用于计算Y轴范围
|
||
// 使用百分位数值替代原始比例
|
||
let percentileValues = crowdingPercentiles.filter(v => v !== null && v !== undefined);
|
||
|
||
// 计算Y轴范围
|
||
let yMinValue = 0; // 默认最小值为0
|
||
let yMaxValue = 100; // 默认最大值为100（百分比）
|
||
|
||
// 如果有实际数据，可以根据数据调整范围
|
||
if (percentileValues.length > 0) {
|
||
const minPercentile = Math.min(...percentileValues);
|
||
const maxPercentile = Math.max(...percentileValues);
|
||
|
||
// 但拥挤度图表通常应该保持0-100的范围，所以只在必要时调整
|
||
if (minPercentile > 20 && maxPercentile < 80) {
|
||
// 如果数据都集中在20-80之间，可以适当缩小范围
|
||
yMinValue = Math.max(0, Math.floor(minPercentile / 10) * 10 - 10); // 向下取整到最接近的10的倍数再减10
|
||
yMaxValue = Math.min(100, Math.ceil(maxPercentile / 10) * 10 + 10); // 向上取整到最接近的10的倍数再加10
|
||
}
|
||
}
|
||
|
||
// 设置图表选项
|
||
const option = {
|
||
title: {
|
||
text: '行业交易拥挤度分析',
|
||
subtext: `当前拥挤度历史百分位: ${chartData.crowding.current_percentile.toFixed(2)}%`,
|
||
left: 'center',
|
||
top: 5
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'cross',
|
||
label: {
|
||
backgroundColor: '#6a7985'
|
||
}
|
||
},
|
||
formatter: function(params) {
|
||
const date = params[0].axisValue;
|
||
let result = `${date}<br/>`;
|
||
|
||
params.forEach(param => {
|
||
const value = param.value;
|
||
const color = param.color;
|
||
const marker = `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color};"></span>`;
|
||
|
||
result += `${marker}${param.seriesName}: ${value ? value.toFixed(2) : 'N/A'}%<br/>`;
|
||
});
|
||
|
||
return result;
|
||
}
|
||
},
|
||
legend: {
|
||
data: ['行业交易拥挤度历史百分位'],
|
||
top: 60
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '10%',
|
||
top: '100',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: crowdingDates,
|
||
axisLabel: {
|
||
rotate: 45
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
name: '历史百分位 (%)',
|
||
min: yMinValue,
|
||
max: yMaxValue,
|
||
axisLine: {
|
||
show: true
|
||
},
|
||
axisLabel: {
|
||
formatter: function(value) { return value.toFixed(1) + '%'; }
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: 'dashed'
|
||
}
|
||
}
|
||
},
|
||
dataZoom: [
|
||
{
|
||
type: 'inside',
|
||
start: 0,
|
||
end: 100
|
||
},
|
||
{
|
||
start: 0,
|
||
end: 100
|
||
}
|
||
],
|
||
series: [crowdingSeries],
|
||
visualMap: {
|
||
show: false,
|
||
dimension: 1,
|
||
pieces: [
|
||
{min: 0, max: 20, color: '#91cc75'}, // 绿色 - 不拥挤
|
||
{min: 20, max: 40, color: '#91cc75'}, // 绿色 - 较不拥挤
|
||
{min: 40, max: 60, color: '#fac858'}, // 黄色 - 中性
|
||
{min: 60, max: 80, color: '#ee6666'}, // 红色 - 较为拥挤
|
||
{min: 80, max: 100, color: '#ee6666'} // 红色 - 极度拥挤
|
||
]
|
||
}
|
||
};
|
||
|
||
// 设置图表选项
|
||
crowdingChart.setOption(option);
|
||
|
||
// 手动触发一次resize，确保图表正确渲染
|
||
setTimeout(() => {
|
||
crowdingChart.resize();
|
||
}, 50);
|
||
|
||
// 响应式调整
|
||
window.addEventListener('resize', function() {
|
||
if (crowdingChart) {
|
||
crowdingChart.resize();
|
||
}
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 渲染分位数表格
|
||
*/
|
||
function renderPercentileTable(percentiles, metricName) {
|
||
// 清空表格
|
||
percentileTable.innerHTML = '';
|
||
|
||
// 格式化函数
|
||
const formatValue = value => value ? value.toFixed(2) : 'N/A';
|
||
|
||
// 获取百分位类别
|
||
const getPercentileClass = value => {
|
||
if (value <= 33) return 'percent-low';
|
||
if (value <= 66) return 'percent-medium';
|
||
return 'percent-high';
|
||
};
|
||
|
||
// 创建表格行
|
||
const rows = [
|
||
{
|
||
label: '当前行业均值',
|
||
value: formatValue(percentiles.current),
|
||
class: 'current-value' // 添加特殊样式类
|
||
},
|
||
{
|
||
label: '历史百分位',
|
||
value: `${formatValue(percentiles.percentile)}%`,
|
||
class: getPercentileClass(percentiles.percentile)
|
||
},
|
||
{
|
||
label: '历史最小值',
|
||
value: formatValue(percentiles.min),
|
||
class: 'percent-low' // 绿色
|
||
},
|
||
{
|
||
label: '历史最大值',
|
||
value: formatValue(percentiles.max),
|
||
class: 'percent-high' // 红色
|
||
},
|
||
{
|
||
label: '历史均值',
|
||
value: formatValue(percentiles.mean)
|
||
},
|
||
{
|
||
label: '历史中位数',
|
||
value: formatValue(percentiles.median)
|
||
},
|
||
{
|
||
label: '历史第一四分位',
|
||
value: formatValue(percentiles.q1),
|
||
class: 'percent-low' // 绿色
|
||
},
|
||
{
|
||
label: '历史第三四分位',
|
||
value: formatValue(percentiles.q3),
|
||
class: 'percent-high' // 红色
|
||
}
|
||
];
|
||
|
||
// 添加行到表格
|
||
rows.forEach(row => {
|
||
const tr = document.createElement('tr');
|
||
|
||
// 添加特殊类以突出当前值行
|
||
if (row.label === '当前行业均值' || row.label === '历史百分位') {
|
||
tr.classList.add('highlight-row');
|
||
}
|
||
|
||
const tdLabel = document.createElement('td');
|
||
tdLabel.textContent = row.label;
|
||
tr.appendChild(tdLabel);
|
||
|
||
const tdValue = document.createElement('td');
|
||
tdValue.textContent = row.value;
|
||
|
||
if (row.class) {
|
||
tdValue.classList.add('percent-value', row.class);
|
||
}
|
||
|
||
tr.appendChild(tdValue);
|
||
percentileTable.appendChild(tr);
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 渲染行业统计数据
|
||
*/
|
||
function renderIndustryStats(percentiles) {
|
||
// 清空表格
|
||
industryStatsTable.innerHTML = '';
|
||
|
||
// 获取用户选择的开始日期，如果没有选择则显示"最近三年"
|
||
const userStartDate = startDateInput.value ? startDateInput.value : "最近三年";
|
||
|
||
// 创建表格行
|
||
const rows = [
|
||
{ label: '行业成份股数量', value: percentiles.stock_count + '只' },
|
||
{ label: '分析开始日期', value: userStartDate }
|
||
];
|
||
|
||
// 添加行到表格
|
||
rows.forEach(row => {
|
||
const tr = document.createElement('tr');
|
||
|
||
const tdLabel = document.createElement('td');
|
||
tdLabel.textContent = row.label;
|
||
tr.appendChild(tdLabel);
|
||
|
||
const tdValue = document.createElement('td');
|
||
tdValue.textContent = row.value;
|
||
tr.appendChild(tdValue);
|
||
|
||
industryStatsTable.appendChild(tr);
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 渲染拥挤度统计数据
|
||
*/
|
||
function renderCrowdingStats(crowding) {
|
||
// 清空表格
|
||
crowdingTable.innerHTML = '';
|
||
|
||
// 获取拥挤度级别的颜色类
|
||
const getCrowdingLevelClass = level => {
|
||
switch(level) {
|
||
case '不拥挤':
|
||
case '较不拥挤':
|
||
return 'percent-low'; // 绿色
|
||
case '中性':
|
||
return 'percent-medium'; // 黄色
|
||
case '较为拥挤':
|
||
case '极度拥挤':
|
||
return 'percent-high'; // 红色
|
||
default:
|
||
return '';
|
||
}
|
||
};
|
||
|
||
// 创建表格行
|
||
const rows = [
|
||
{
|
||
label: '当前成交占比',
|
||
value: crowding.current_ratio.toFixed(2) + '%',
|
||
tooltip: '行业成交额占全市场成交额的百分比'
|
||
},
|
||
{
|
||
label: '历史百分位',
|
||
value: crowding.current_percentile.toFixed(2) + '%',
|
||
class: getCrowdingLevelClass(crowding.level),
|
||
tooltip: '当前行业成交占比在历史分布中的位置'
|
||
},
|
||
{
|
||
label: '拥挤度评级',
|
||
value: crowding.level,
|
||
class: getCrowdingLevelClass(crowding.level),
|
||
tooltip: '根据历史百分位划分的拥挤度等级'
|
||
}
|
||
];
|
||
|
||
// 添加行到表格
|
||
rows.forEach(row => {
|
||
const tr = document.createElement('tr');
|
||
|
||
const tdLabel = document.createElement('td');
|
||
tdLabel.textContent = row.label;
|
||
|
||
// 添加工具提示
|
||
if (row.tooltip) {
|
||
tdLabel.title = row.tooltip;
|
||
tdLabel.style.cursor = 'help';
|
||
}
|
||
|
||
tr.appendChild(tdLabel);
|
||
|
||
const tdValue = document.createElement('td');
|
||
tdValue.textContent = row.value;
|
||
|
||
if (row.class) {
|
||
tdValue.classList.add('percent-value', row.class);
|
||
}
|
||
|
||
tr.appendChild(tdValue);
|
||
crowdingTable.appendChild(tr);
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 显示错误信息
|
||
*/
|
||
function showError(message) {
|
||
errorMessage.textContent = message;
|
||
errorAlert.classList.remove('d-none');
|
||
|
||
// 滚动到错误信息
|
||
errorAlert.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||
}
|
||
|
||
/**
|
||
* 重置表单
|
||
*/
|
||
function resetForm() {
|
||
industryForm.reset();
|
||
|
||
// 隐藏结果和错误信息
|
||
resultCard.classList.add('d-none');
|
||
errorAlert.classList.add('d-none');
|
||
|
||
// 销毁图表
|
||
if (valuationChart) {
|
||
valuationChart.dispose();
|
||
valuationChart = null;
|
||
}
|
||
|
||
if (crowdingChart) {
|
||
crowdingChart.dispose();
|
||
crowdingChart = null;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 显示/隐藏加载状态
|
||
*/
|
||
function showLoading(isLoading) {
|
||
if (isLoading) {
|
||
loadingSpinner.classList.remove('d-none');
|
||
analyzeBtn.disabled = true;
|
||
} else {
|
||
loadingSpinner.classList.add('d-none');
|
||
analyzeBtn.disabled = false;
|
||
}
|
||
}
|
||
});
|