react如何用echarts
安装 ECharts 和 React 适配库
在 React 项目中使用 ECharts 需要安装 ECharts 核心库和 React 适配库。通过 npm 或 yarn 安装以下依赖：
npm install echarts echarts-for-react
# 或
yarn add echarts echarts-for-react引入 ECharts 和 React 组件
在 React 组件中引入 ECharts 和 ReactECharts 组件：
import React from 'react';
import ReactECharts from 'echarts-for-react';
import * as echarts from 'echarts';配置图表选项
准备 ECharts 的配置选项对象，包含图表类型、数据、样式等：
const option = {
title: {
text: '示例图表'
},
tooltip: {},
xAxis: {
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 15]
}
]
};渲染图表组件
在 React 组件中使用 ReactECharts 渲染图表，传入配置选项：
function ChartComponent() {
return (
<ReactECharts
option={option}
style={{ height: '400px', width: '100%' }}
/>
);
}动态更新图表
通过 React 的状态管理动态更新图表数据，修改 option 后重新渲染：
function DynamicChart() {
const [data, setData] = React.useState([5, 20, 36, 10, 15]);
const updateData = () => {
setData(data.map(value => value + 5));
};
const dynamicOption = {
series: [{ data }]
};
return (
<div>
<ReactECharts option={dynamicOption} />
<button onClick={updateData}>更新数据</button>
</div>
);
}自定义主题和扩展
使用 ECharts 主题或注册地图等扩展功能：
// 注册主题
echarts.registerTheme('myTheme', {
backgroundColor: '#f4cccc'
});
// 使用主题
<ReactECharts option={option} theme="myTheme" />事件绑定
通过 onEvents 属性绑定 ECharts 事件：
const onChartClick = (params) => {
console.log('图表点击事件', params);
};
<ReactECharts
option={option}
onEvents={{
'click': onChartClick
}}
/>按需引入模块
优化体积时可按需引入 ECharts 模块：
import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { GridComponent } from 'echarts/components';
echarts.use([BarChart, GridComponent]);
