如何使用React结合Highcharts实现指定样式的面积图

用React做这类面积图，最省心的方式是用成熟的图表库，推荐Recharts，下面是完全符合你需求的实现示例：

1. 先安装依赖 #

npm install recharts
# 或者用yarn
yarn add recharts

2. 完整组件代码 #

import React from 'react';
import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';

// 模拟你的数据结构，date是X轴日期，us和ussr是两组百分比数据
const chartData = [
  { date: '5月24日', us: 35, ussr: 60 },
  { date: '5月25日', us: 42, ussr: 55 },
  { date: '5月26日', us: 50, ussr: 48 },
  { date: '5月27日', us: 65, ussr: 38 },
  { date: '5月28日', us: 72, ussr: 30 },
];

const PercentageAreaChart = () => {
  return (
    <AreaChart
      width={600}
      height={400}
      data={chartData}
      margin={{ top: 10, right: 30, left: 0, bottom: 0 }}
    >
      <CartesianGrid strokeDasharray="3 3" />
      {/* X轴：日期展示 */}
      <XAxis dataKey="date" />
      {/* Y轴：格式化显示百分比 */}
      <YAxis tickFormatter={(value) => `${value}%`} domain={[0, 100]} />
      <Tooltip formatter={(value) => [`${value}%`, '占比']} />
      <Legend />
      {/* 第一组数据：USE */}
      <Area type="monotone" dataKey="us" stackId="1" stroke="#8884d8" fill="#8884d8" />
      {/* 第二组数据：USSR/Russia */}
      <Area type="monotone" dataKey="ussr" stackId="1" stroke="#82ca9d" fill="#82ca9d" />
    </AreaChart>
  );
};

export default PercentageAreaChart;

关键配置说明 #

• 双数据系列：通过两个<Area>组件实现，dataKey对应数据里的字段，stackId设为相同值可做堆叠面积图，不需要堆叠的话去掉这个属性即可
• Y轴百分比：用tickFormatter把数值转成百分比格式，domain={[0,100]}限制Y轴范围在0-100之间，符合百分比逻辑
• X轴日期：直接用dataKey="date"绑定数据里的日期字段，自动渲染刻度

你可以直接把这段代码放到你的React项目里运行，根据实际需求调整数据、颜色、图表尺寸即可。

内容的提问来源于stack exchange，提问作者Tal Levi