网站文章展示是做怎么wordpress 去掉category
效果图
目录
效果图
✅ 项目结构
🚀 创建项目步骤
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 />);
4️⃣ 启动项目：
npm start
浏览器会自动打开 http://localhost:3000