当前位置：首页 > news >正文

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

news 来源：原创 2025/5/22 17:02:17

效果图

✅ 项目结构

🚀 创建项目步骤

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

2️⃣ 安装 recharts 图表库：

3️⃣ 替换默认代码：

4️⃣ 启动项目：

✅ 项目结构

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

🚀 创建项目步骤

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

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

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

npm install recharts

3️⃣ 替换默认代码：

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

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，粘贴我提供的图表代码

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

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

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);