如何使用React JS或npm为电商后台仪表盘创建销售图表？

下面是几个成熟、易用的React图表npm包，针对电商销售场景给出具体使用方法：

1. Recharts #

轻量、基于React D3的图表库，语法简洁，适合快速搭建销售趋势、类目对比类图表。

安装 #

npm install recharts
# 或
yarn add recharts

销售趋势折线图示例（电商常用场景） #

import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';

// 模拟电商月度销售数据
const salesData = [
  { month: '1月', revenue: 12000, orders: 85 },
  { month: '2月', revenue: 15000, orders: 102 },
  { month: '3月', revenue: 18000, orders: 118 },
  { month: '4月', revenue: 16500, orders: 99 },
];

function SalesTrendChart() {
  return (
    <LineChart width={600} height={300} data={salesData}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="month" />
      <YAxis />
      <Tooltip />
      <Legend />
      <Line type="monotone" dataKey="revenue" stroke="#8884d8" name="销售额" />
      <Line type="monotone" dataKey="orders" stroke="#82ca9d" name="订单量" />
    </LineChart>
  );
}

export default SalesTrendChart;

2. react-chartjs-2 #

基于Chart.js的React封装，功能全面，支持多种图表类型，适合复杂的销售数据分析场景。

安装 #

npm install react-chartjs-2 chart.js
# 或
yarn add react-chartjs-2 chart.js

类目销售柱状图示例 #

import { Bar } from 'react-chartjs-2';
import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend } from 'chart.js';

// 注册Chart.js需要的组件
ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);

// 模拟各品类销售数据
const categorySalesData = {
  labels: ['电子产品', '服装', '家居', '美妆'],
  datasets: [
    {
      label: '销售额(元)',
      data: [28000, 19000, 15000, 12000],
      backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0'],
    },
  ],
};

const options = {
  responsive: true,
  plugins: {
    legend: {
      position: 'top',
    },
    title: {
      display: true,
      text: '各品类销售额对比',
    },
  },
};

function CategorySalesChart() {
  return <Bar options={options} data={categorySalesData} />;
}

export default CategorySalesChart;

3. Victory #

由Formidable Labs开发的React图表库，高度可定制，适合需要自定义交互或特殊视觉效果的销售图表。

安装 #

npm install victory
# 或
yarn add victory

销售占比饼图示例 #

import { VictoryPie, VictoryTooltip, VictoryLabel } from 'victory';

// 模拟各渠道销售占比
const channelSalesData = [
  { x: '官网', y: 45 },
  { x: '淘宝', y: 30 },
  { x: '京东', y: 20 },
  { x: '其他', y: 5 },
];

function ChannelSalesPie() {
  return (
    <VictoryPie
      data={channelSalesData}
      colorScale={['#8884d8', '#82ca9d', '#ffc658', '#ff8042']}
      labelComponent={<VictoryTooltip />}
      style={{ labels: { fontSize: 12 } }}
      width={300}
      height={300}
    />
  );
}

export default ChannelSalesPie;

实用提示 #

• 按需选择：Recharts适合快速开发，react-chartjs-2适合功能需求复杂的场景，Victory适合高度定制化需求
• 异步数据处理：若销售数据从接口获取，需确保数据加载完成后再渲染图表（可配合useState和useEffect实现）
• 样式适配：可通过组件的style属性或CSS自定义图表样式，匹配电商后台的主题风格

内容的提问来源于stack exchange，提问作者Anas K.