express+mongodb,展示两个饼图,并在同一行上显示
时间: 2024-03-09 19:49:13 浏览: 17
好的,我理解了你的问题。首先,你可以使用`express`作为后端框架,使用`mongodb`作为数据库存储数据。然后,你可以使用一个前端框架(如`React`或`Vue`)来展示饼图。
对于展示两个饼图并在同一行上显示,你可以使用一些前端图表库,如`echarts`或`highcharts`等。这些库提供了许多可视化选项,包括饼图。你可以使用这些库来生成饼图,并使用CSS布局将它们放在同一行上。
以下是一个简单的例子:
首先,你需要在`express`中创建一个API来从`mongodb`中获取数据。例如,你可以使用`mongoose`来连接数据库和定义模型。你可以创建一个API来获取两个饼图的数据并将其返回到前端。
```javascript
const mongoose = require('mongoose');
const express = require('express');
const app = express();
mongoose.connect('mongodb://localhost/mydatabase', { useNewUrlParser: true });
const PieSchema = new mongoose.Schema({
label: String,
value: Number
});
const Pie = mongoose.model('Pie', PieSchema);
app.get('/api/pies', (req, res) => {
Pie.find({}, (err, data) => {
if (err) {
console.error(err);
res.status(500).send('Internal Server Error');
} else {
res.json(data);
}
});
});
```
然后,你可以使用`echarts`来生成饼图。以下是一个简单的例子,用于获取数据并生成饼图:
```javascript
import React, { useState, useEffect } from 'react';
import echarts from 'echarts';
const PieChart = ({ title, apiUrl }) => {
const [data, setData] = useState([]);
useEffect(() => {
fetch(apiUrl)
.then(res => res.json())
.then(data => setData(data))
.catch(err => console.error(err));
}, [apiUrl]);
useEffect(() => {
const chart = echarts.init(document.getElementById(title));
chart.setOption({
title: {
text: title,
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{b}: {c} ({d}%)'
},
series: [
{
type: 'pie',
radius: '50%',
data: data.map(item => ({
name: item.label,
value: item.value
}))
}
]
});
return () => chart.dispose();
}, [title, data]);
return <div id={title} style={{ width: '50%', height: 300 }} />;
};
const App = () => {
return (
<div style={{ display: 'flex', flexDirection: 'row' }}>
<PieChart title="Pie 1" apiUrl="/api/pie1" />
<PieChart title="Pie 2" apiUrl="/api/pie2" />
</div>
);
};
export default App;
```
在前端代码中,我们使用了`React`来生成两个饼图,并使用`echarts`来生成饼图。我们在`useEffect`钩子中调用API来获取饼图的数据,并在数据更新时重新渲染饼图。我们还使用CSS样式将两个饼图放在同一行上。
这只是一个简单的例子,你可以根据你的需求进行更改和扩展。