|
|
@@ -121,6 +121,9 @@ function getList() {
|
|
|
loading.value = true;
|
|
|
// 处理查询参数，将年份转换为完整日期格式
|
|
|
const queryParam = { ...queryParams.value };
|
|
|
+
|
|
|
+ // 当改变年份时，不传递类别参数到后台
|
|
|
+ delete queryParam.qhType;
|
|
|
|
|
|
// 如果只提供了年份，将其转换为当年1月1日的完整日期格式
|
|
|
if (queryParam.qhTime && queryParam.qhTime.length === 4) {
|
|
|
@@ -488,6 +491,22 @@ function initCharts() {
|
|
|
// 合并原系列数据和平均线
|
|
|
const allSeries = [...chartList.value[index].series, averageLine];
|
|
|
|
|
|
+ // 收集所有图表共用的x轴数据（确保所有图表使用相同的x轴）
|
|
|
+ const allXAxisData = [];
|
|
|
+ chartList.value.forEach(chart => {
|
|
|
+ chart.series.forEach(serie => {
|
|
|
+ if (serie.data) {
|
|
|
+ serie.data.forEach(item => {
|
|
|
+ if (item && item[0] && !allXAxisData.includes(item[0])) {
|
|
|
+ allXAxisData.push(item[0]);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ // 对x轴数据进行排序
|
|
|
+ allXAxisData.sort((a, b) => a.localeCompare(b));
|
|
|
+
|
|
|
// 配置图表选项
|
|
|
const option = {
|
|
|
title: {
|
|
|
@@ -525,14 +544,36 @@ function initCharts() {
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
boundaryGap: false,
|
|
|
- // 设置x轴时间显示格式为 yyyy-MM-dd
|
|
|
+ data: allXAxisData, // 使用统一的x轴数据
|
|
|
+ // 强制显示第一个和最后一个日期，并适当间隔显示其他日期
|
|
|
axisLabel: {
|
|
|
formatter: function (value) {
|
|
|
- // 如果是完整日期格式，只显示日期部分
|
|
|
+ // 如果是完整日期格式，转换为 mm-dd 格式
|
|
|
if (value && value.length >= 10) {
|
|
|
- return value.substring(0, 10);
|
|
|
+ // 从 yyyy-MM-dd 格式提取月日
|
|
|
+ const month = value.substring(5, 7);
|
|
|
+ const day = value.substring(8, 10);
|
|
|
+ return month + '-' + day;
|
|
|
}
|
|
|
return value;
|
|
|
+ },
|
|
|
+ // 自定义标签间隔策略，确保首尾标签显示且避免过于密集
|
|
|
+ interval: function (index, value) {
|
|
|
+ // 总是显示第一个和最后一个标签
|
|
|
+ if (allXAxisData.length > 0 &&
|
|
|
+ (index === 0 || index === allXAxisData.length - 1)) {
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 根据数据总量动态调整标签显示间隔
|
|
|
+ if (allXAxisData.length > 20) {
|
|
|
+ // 数据量大时，每隔一定数量显示一个标签
|
|
|
+ const interval = Math.ceil(allXAxisData.length / 10); // 最多显示10个标签
|
|
|
+ return index % interval === 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 数据量小时，让ECharts自动处理
|
|
|
+ return false;
|
|
|
}
|
|
|
},
|
|
|
// 取消x轴网格线
|
|
|
@@ -555,9 +596,34 @@ function initCharts() {
|
|
|
series: allSeries
|
|
|
};
|
|
|
|
|
|
+ // 为每个系列设置完整的x轴数据，确保数据对齐
|
|
|
+ option.series.forEach(serie => {
|
|
|
+ if (serie.type === 'line' && serie.name !== '平均价') {
|
|
|
+ // 创建一个新的数据数组，包含所有x轴点
|
|
|
+ const newData = [];
|
|
|
+ allXAxisData.forEach(xValue => {
|
|
|
+ // 查找该x值在原始数据中的对应项
|
|
|
+ const existingDataPoint = serie.data.find(item => item[0] === xValue);
|
|
|
+ if (existingDataPoint) {
|
|
|
+ newData.push(existingDataPoint);
|
|
|
+ } else {
|
|
|
+ // 如果该x值在原始数据中不存在，添加一个null值
|
|
|
+ newData.push([xValue, null]);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // 更新系列数据
|
|
|
+ serie.data = newData;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
// 设置图表选项
|
|
|
chartInstance.setOption(option, true);
|
|
|
|
|
|
+ // 调试信息
|
|
|
+ console.log('Chart ' + index + ' xAxis data length:', allXAxisData.length);
|
|
|
+ console.log('First date:', allXAxisData[0]);
|
|
|
+ console.log('Last date:', allXAxisData[allXAxisData.length - 1]);
|
|
|
+
|
|
|
// 监听窗口大小变化，自适应图表
|
|
|
const resizeHandler = () => {
|
|
|
chartInstance.resize();
|
