如何为带月份筛选器的FusionCharts多层饼图设置默认年月

安全阿岳

2026-8-8

实现FusionCharts多层饼图默认显示当前年月数据

步骤1：获取并格式化当前年月

用JavaScript获取系统当前日期，转换成和你筛选器匹配的格式（比如YYYY-MM）：

// 生成"YYYY-MM"格式的当前年月
const getCurrentYearMonth = () => {
  const now = new Date();
  const year = now.getFullYear();
  // 月份从0开始计数，需+1后补0保证两位格式
  const month = String(now.getMonth() + 1).padStart(2, '0');
  return `${year}-${month}`;
};

步骤2：设置筛选器默认值

将当前年月赋值给你的年月筛选控件（以常见下拉框为例）：

// 假设筛选器是id为"yearMonthSelector"的select元素
const selector = document.getElementById('yearMonthSelector');
const currentYM = getCurrentYearMonth();
// 设置下拉框默认选中当前年月
selector.value = currentYM;

如果使用第三方日期选择器（如Element UI DatePicker），直接在组件初始化时绑定value为格式化后的当前年月即可。

步骤3：页面加载时自动触发渲染

调用你已实现的图表渲染函数，在DOM加载完成后自动执行：

// 假设你已有根据年月渲染图表的函数renderPieChart(yearMonth)
document.addEventListener('DOMContentLoaded', () => {
  const currentYM = getCurrentYearMonth();
  // 同步更新筛选器默认值
  document.getElementById('yearMonthSelector').value = currentYM;
  // 直接传入当前年月，触发图表渲染
  renderPieChart(currentYM);
});