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;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|