'1'
This commit is contained in:
commit
bbc8692e7f
12
index.html
Normal file
12
index.html
Normal file
@ -0,0 +1,12 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>AG Chart Service</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
24
package.json
Normal file
24
package.json
Normal file
@ -0,0 +1,24 @@
|
||||
{
|
||||
"name": "agchart-service",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite --host 0.0.0.0",
|
||||
"build": "tsc -b && vite build",
|
||||
"preview": "vite preview --host 0.0.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@vitejs/plugin-react": "^5.0.0",
|
||||
"ag-charts-community": "^13.2.1",
|
||||
"ag-charts-react": "^13.2.1",
|
||||
"vite": "^7.0.0",
|
||||
"typescript": "^5.8.3",
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^19.1.8",
|
||||
"@types/react-dom": "^19.1.6"
|
||||
}
|
||||
}
|
||||
104
src/App.tsx
Normal file
104
src/App.tsx
Normal file
@ -0,0 +1,104 @@
|
||||
import { useMemo, useState } from 'react';
|
||||
import { AgCharts } from 'ag-charts-react';
|
||||
import type { AgChartOptions } from 'ag-charts-community';
|
||||
|
||||
const revenueData = [
|
||||
{ month: '1月', revenue: 146, orders: 92, margin: 36 },
|
||||
{ month: '2月', revenue: 158, orders: 101, margin: 39 },
|
||||
{ month: '3月', revenue: 171, orders: 117, margin: 43 },
|
||||
{ month: '4月', revenue: 185, orders: 126, margin: 45 },
|
||||
{ month: '5月', revenue: 193, orders: 133, margin: 47 },
|
||||
{ month: '6月', revenue: 221, orders: 148, margin: 52 },
|
||||
];
|
||||
|
||||
function App() {
|
||||
const [chartType, setChartType] = useState<'bar' | 'line'>('bar');
|
||||
|
||||
const chartOptions = useMemo<AgChartOptions>(
|
||||
() => ({
|
||||
title: {
|
||||
text: '业务趋势',
|
||||
},
|
||||
subtitle: {
|
||||
text: '收入、订单与毛利表现',
|
||||
},
|
||||
data: revenueData,
|
||||
series: [
|
||||
{
|
||||
type: chartType,
|
||||
xKey: 'month',
|
||||
yKey: 'revenue',
|
||||
yName: '收入',
|
||||
fill: '#2563eb',
|
||||
stroke: '#2563eb',
|
||||
},
|
||||
{
|
||||
type: chartType,
|
||||
xKey: 'month',
|
||||
yKey: 'orders',
|
||||
yName: '订单',
|
||||
fill: '#059669',
|
||||
stroke: '#059669',
|
||||
},
|
||||
{
|
||||
type: chartType,
|
||||
xKey: 'month',
|
||||
yKey: 'margin',
|
||||
yName: '毛利',
|
||||
fill: '#d97706',
|
||||
stroke: '#d97706',
|
||||
},
|
||||
],
|
||||
axes: [
|
||||
{
|
||||
type: 'category',
|
||||
position: 'bottom',
|
||||
},
|
||||
{
|
||||
type: 'number',
|
||||
position: 'left',
|
||||
title: {
|
||||
text: '数值',
|
||||
},
|
||||
},
|
||||
],
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
},
|
||||
}),
|
||||
[chartType],
|
||||
);
|
||||
|
||||
return (
|
||||
<main className="app-shell">
|
||||
<section className="toolbar" aria-label="图表设置">
|
||||
<div>
|
||||
<h1>AG Chart Service</h1>
|
||||
<p>React 单页图表服务，无路由。</p>
|
||||
</div>
|
||||
<div className="segmented-control" aria-label="切换图表类型">
|
||||
<button
|
||||
className={chartType === 'bar' ? 'active' : ''}
|
||||
type="button"
|
||||
onClick={() => setChartType('bar')}
|
||||
>
|
||||
柱状
|
||||
</button>
|
||||
<button
|
||||
className={chartType === 'line' ? 'active' : ''}
|
||||
type="button"
|
||||
onClick={() => setChartType('line')}
|
||||
>
|
||||
折线
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="chart-panel" aria-label="业务趋势图表">
|
||||
<AgCharts options={chartOptions} />
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
13
src/main.tsx
Normal file
13
src/main.tsx
Normal file
@ -0,0 +1,13 @@
|
||||
import { StrictMode } from 'react';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import { AllCommunityModule, ModuleRegistry } from 'ag-charts-community';
|
||||
import App from './App';
|
||||
import './styles.css';
|
||||
|
||||
ModuleRegistry.registerModules([AllCommunityModule]);
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
);
|
||||
116
src/styles.css
Normal file
116
src/styles.css
Normal file
@ -0,0 +1,116 @@
|
||||
:root {
|
||||
color: #172033;
|
||||
background: #f4f7fb;
|
||||
font-family:
|
||||
Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||
sans-serif;
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
button {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.app-shell {
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(360px, 1fr);
|
||||
gap: 18px;
|
||||
width: min(1180px, calc(100vw - 32px));
|
||||
min-height: 100vh;
|
||||
margin: 0 auto;
|
||||
padding: 24px 0;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.toolbar h1 {
|
||||
margin: 0;
|
||||
font-size: 28px;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.toolbar p {
|
||||
margin: 6px 0 0;
|
||||
color: #5b6578;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.segmented-control {
|
||||
display: inline-grid;
|
||||
grid-template-columns: repeat(2, minmax(72px, 1fr));
|
||||
min-width: 160px;
|
||||
padding: 4px;
|
||||
border: 1px solid #cfd7e6;
|
||||
border-radius: 8px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.segmented-control button {
|
||||
min-height: 34px;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
color: #4a5568;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.segmented-control button.active {
|
||||
color: #ffffff;
|
||||
background: #1f4ed8;
|
||||
}
|
||||
|
||||
.chart-panel {
|
||||
min-height: 520px;
|
||||
padding: 16px;
|
||||
border: 1px solid #d9e1ee;
|
||||
border-radius: 8px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.chart-panel > div {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.app-shell {
|
||||
width: min(100vw - 20px, 1180px);
|
||||
grid-template-rows: auto minmax(420px, 1fr);
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.toolbar h1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.segmented-control {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.chart-panel {
|
||||
min-height: 460px;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
21
tsconfig.json
Normal file
21
tsconfig.json
Normal file
@ -0,0 +1,21 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["DOM", "DOM.Iterable", "ES2022"],
|
||||
"allowJs": false,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Bundler",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx"
|
||||
},
|
||||
"include": ["src"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
}
|
||||
10
tsconfig.node.json
Normal file
10
tsconfig.node.json
Normal file
@ -0,0 +1,10 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"skipLibCheck": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Bundler",
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
9
vite.config.ts
Normal file
9
vite.config.ts
Normal file
@ -0,0 +1,9 @@
|
||||
import { defineConfig } from 'vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
server: {
|
||||
port: 5173,
|
||||
},
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user