feat: 泡泡玛特增加年度、半年数据区分

js/main.js

@@ -11,6 +11,7 @@ import {
 
 const instances = new Map();
 const activeViews = new Map();
+const chartRenderVersions = new Map();
 let manifest;
 let shell;
 let state;
@@ -106,25 +107,47 @@ function chartSource(chart) {
   return chart.views[view];
 }
 
-async function renderChart(chart, version) {
+async function renderChart(chart, version, chartVersion) {
   const el = document.getElementById(`chart-${chart.instanceId}`);
   if (!el) return;
   const source = chartSource(chart);
+  const view = chart.views
+    ? activeViews.get(chart.viewKey) || chart.defaultView
+    : undefined;
 
   try {
     const rows = await loadCSV(`${source}?t=${cacheToken}`);
-    if (version !== renderVersion || !document.body.contains(el)) return;
+    if (version !== renderVersion || chartVersion !== chartRenderVersions.get(chart.instanceId) || !document.body.contains(el)) return;
 
     const instance = echarts.init(el, null, { renderer: 'canvas' });
     instances.set(chart.instanceId, instance);
     const { width, height } = el.getBoundingClientRect();
-    instance.setOption(getChartBuilder(chart.key)(rows, { width, height }), true);
+    instance.setOption(getChartBuilder(chart.key)(rows, { width, height, view }), true);
   } catch (error) {
     if (version === renderVersion) showChartError(chart.instanceId, error.message);
     console.error(`渲染图表失败：${chart.id}`, error);
   }
 }
 
+function renderSingleChart(chart) {
+  const previous = instances.get(chart.instanceId);
+  previous?.dispose();
+  instances.delete(chart.instanceId);
+  const chartVersion = (chartRenderVersions.get(chart.instanceId) || 0) + 1;
+  chartRenderVersions.set(chart.instanceId, chartVersion);
+  renderChart(chart, renderVersion, chartVersion);
+}
+
+function updateViewControls(chart, view) {
+  const card = document.getElementById(`card-${chart.instanceId}`);
+  if (!card) return;
+  card.querySelectorAll('.view-button').forEach((button) => {
+    button.dataset.active = String(button.dataset.view === view);
+  });
+  const source = card.querySelector('.src');
+  if (source) source.textContent = chartSource(chart);
+}
+
 function exportPNG(chartId, filename) {
   const instance = instances.get(chartId);
   if (!instance) return;
@@ -167,12 +190,19 @@ function renderCurrent() {
   renderCards(shell.cards, charts, activeViews, {
     onExport: exportPNG,
     onSelectView: (chart, view) => {
+      if (activeViews.get(chart.viewKey) === view) return;
       activeViews.set(chart.viewKey, view);
-      updateHash({ companyId: company.id, tabId: tab.id, chartId: chart.id, view });
+      state = normalizeState({ companyId: company.id, tabId: tab.id, chartId: chart.id, view });
+      history.pushState(null, '', serializeHash(state));
+      updateViewControls(chart, view);
+      renderSingleChart(chart);
     },
   });
   renderAnchors(shell.chartNav, charts, selectAnchor);
-  Promise.all(charts.map((chart) => renderChart(chart, version)));
+  charts.forEach((chart) => {
+    chartRenderVersions.set(chart.instanceId, (chartRenderVersions.get(chart.instanceId) || 0) + 1);
+  });
+  Promise.all(charts.map((chart) => renderChart(chart, version, chartRenderVersions.get(chart.instanceId))));
 }
 
 async function start() {