用react 写一个可左右滑动的柱状图

效果图

效果图

[✅ 项目结构](#✅ 项目结构)

[🚀 创建项目步骤](#🚀 创建项目步骤)

[1️⃣ 打开终端或命令行，创建新项目：](#1️⃣ 打开终端或命令行，创建新项目：)

[2️⃣ 安装 recharts 图表库：](#2️⃣ 安装 recharts 图表库：)

[3️⃣ 替换默认代码：](#3️⃣ 替换默认代码：)

[4️⃣ 启动项目：](#4️⃣ 启动项目：)

✅ 项目结构

bash 复制代码

scrollable-bar-chart/
├── node_modules/
├── public/
├── src/
│   ├── App.js
│   ├── ScrollableBarChart.js
│   └── index.js
├── package.json

🚀 创建项目步骤

1️⃣ 打开终端或命令行，创建新项目：

bash 复制代码

npx create-react-app scrollable-bar-chart
cd scrollable-bar-chart

2️⃣ 安装 `recharts` 图表库：

bash 复制代码

npm install recharts

3️⃣ 替换默认代码：

把 src/App.js 内容换成我给你的 App.js

javascript 复制代码

import React from 'react';
import ScrollableBarChart from './ScrollableBarChart';

function App() {
  return (
    <div style={{ padding: '20px' }}>
      <h2>可滚动柱状图示例</h2>
      <ScrollableBarChart />
    </div>
  );
}

export default App;

创建一个新文件 src/ScrollableBarChart.js，粘贴我提供的图表代码

javascript 复制代码

import React from "react";
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  Tooltip,
  Legend,
  CartesianGrid,
  ReferenceLine,
  ReferenceArea,
} from "recharts";

const data = [
  { name: "09", solar: 20, discharge: 15, sell: 10, charge: -5 },
  { name: "10", solar: 30, discharge: 20, sell: 15, charge: -10 },
  { name: "11", solar: 40, discharge: 25, sell: 20, charge: -15 },
  { name: "12", solar: 45, discharge: 30, sell: 25, charge: -20 },
  { name: "13", solar: 50, discharge: 35, sell: 30, charge: -25 },
  { name: "14", solar: 45, discharge: 30, sell: 25, charge: -20 },
  { name: "15", solar: 40, discharge: 25, sell: 20, charge: -15 },
  { name: "16", solar: 30, discharge: 20, sell: 15, charge: -10 },
  { name: "17", solar: 25, discharge: 15, sell: 10, charge: -5 },
  { name: "18", solar: 20, discharge: 10, sell: 5, charge: -3 },
];

const ScrollableBarChart = () => {
  return (
    <div style={{ overflowX: "auto" }}>
      <div style={{ width: "1200px", height: "400px" }}>
        <BarChart
          data={data}
          width={1200}
          height={400}
          margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
          barGap={0}
          barCategoryGap={0}
        >
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="name" />
          <YAxis
            domain={[-100, 100]}
            ticks={[-100, -75, -50, -25, 0, 25, 50, 75, 100]}
          />
          <Tooltip />
          <Legend />
          <ReferenceLine y={0} stroke="#000" strokeWidth={2} />
          <ReferenceArea x1="12" x2="13" fill="#d0f0d0" fillOpacity={0.4} />

          {/* 顶部的柱子有上圆角 */}
          <Bar
            dataKey="solar"
            stackId="a"
            fill="#8dd1e1"
            barSize={30}
            radius={[10, 10, 0, 0]}
            name="光伏自发自用"
          />
          {/* 中间无圆角 */}
          <Bar
            dataKey="discharge"
            stackId="a"
            fill="#82ca9d"
            barSize={30}
            radius={0}
            name="电池放电"
          />
          <Bar
            dataKey="sell"
            stackId="a"
            fill="#ffc658"
            barSize={30}
            radius={0}
            name="电力卖给电网"
          />
          {/* 底部负值柱子有下圆角 */}
          <Bar
            dataKey="charge"
            stackId="a"
            fill="#8884d8"
            barSize={30}
            radius={[0, 0, 10, 10]}
            name="电池充电"
          />
        </BarChart>
      </div>
    </div>
  );
};

export default ScrollableBarChart;

确保 src/index.js 和之前保持一致（一般不用改）

javascript 复制代码

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

4️⃣ 启动项目：

npm start

浏览器会自动打开 http://localhost:3000