echarts-for-react 基本使用折线图
时间: 2024-09-30 14:16:02 浏览: 10
Echarts-for-react 是一个 React 组件化封装的 ECharts 库,它使得在 React 中集成 ECharts 的图表变得更加简单。以下是基本使用折线图的步骤:
1. 首先,你需要安装依赖库,通过npm或yarn添加 echarts-for-react 和相关的 ECharts 主体库:
```bash
npm install @antv/g2 @antv/g2plot react-chartjs-2
```
2. 导入组件并创建一个简单的折线图组件:
```jsx
import { Line } from '@antv/g2plot';
function LineChart() {
const data = [
{ year: '2016', value: 5 },
{ year: '2017', value: 4 },
{ year: '2018', value: 3 },
{ year: '2019', value: 2 },
{ year: '2020', value: 6 },
];
return (
<Line width={800} height={400} data={data}>
// 定义 x 轴和 y 轴数据
<XAxis dataKey="year" />
<YAxis />
// 设置折线图系列
<Series type="line" dataKey="value" />
</Line>
);
}
```
3. 将这个组件添加到你的 React 组件树中,传递必要的配置和数据。