如何使用React Chart实现周、月、年度报表的下拉切换展示

目标效果示意图

实现逻辑非常直接，核心是通过React受控组件记录用户选中的时间维度，根据维度匹配对应数据集，传入图表组件完成渲染，具体步骤如下：

• 整理数据源
  先把存储在JSON里的报表数据按维度整理，推荐直接按周、月、年三个维度拆分存储，减少前端计算量，示例结构如下：

// data.json
{
  "week": [
    {"label": "周一", "value": 120},
    {"label": "周二", "value": 200},
    {"label": "周三", "value": 150},
    {"label": "周四", "value": 80},
    {"label": "周五", "value": 270},
    {"label": "周六", "value": 320},
    {"label": "周日", "value": 190}
  ],
  "month": [
    {"label": "1月", "value": 1200},
    {"label": "2月", "value": 1900},
    {"label": "3月", "value": 1500},
    {"label": "4月", "value": 2100},
    {"label": "5月", "value": 2400},
    {"label": "6月", "value": 1800}
  ],
  "year": [
    {"label": "2021年", "value": 12000},
    {"label": "2022年", "value": 19000},
    {"label": "2023年", "value": 25000},
    {"label": "2024年", "value": 32000}
  ]
}

• 编写受控选择器+数据联动逻辑
  用useState存储当前选中的时间维度，监听维度变化更新要渲染的图表数据，代码示例：

import { useState, useEffect } from 'react'
import reportData from './data.json'
// 替换为你实际使用的图表组件，比如echarts-for-react、recharts等均可
import LineChart from './LineChart'

export default function DataReport() {
  // 默认选中周维度
  const [selectedRange, setSelectedRange] = useState('week')
  const [chartData, setChartData] = useState([])

  // 选中维度变更时，同步更新图表数据
  useEffect(() => {
    setChartData(reportData[selectedRange])
  }, [selectedRange])

  return (
    <div className="report-page">
      <div className="select-bar">
        <select
          value={selectedRange}
          onChange={(e) => setSelectedRange(e.target.value)}
        >
          <option value="week">周</option>
          <option value="month">月</option>
          <option value="year">年</option>
        </select>
      </div>
      <div className="chart-area">
        <LineChart data={chartData} />
      </div>
    </div>
  )
}

• 适配图表组件
  把拿到的chartData按照你所用图表库要求的格式传入即可，切换下拉选项时数据会自动更新，图表会触发重渲染展示对应维度的报表。

如果你的JSON存的是全量明细数据，没有提前按维度拆分，只需要在上面的useEffect里加对应的数据聚合逻辑：选周时按近7天/自然周分组统计，选月时按自然月分组，选年时按年份分组，处理完成后再赋值给chartData即可。

内容的提问来源于stack exchange，提问作者Md Borhan Uddin Ashik