在React中使用echarts-for-react

一 、echarts-for-react对比echarts优势:

  1.React 集成友好性:

• 声明式 API：提供 React 风格的声明式组件，而非命令式 API

• JSX 语法支持：可以直接在 JSX 中作为组件使用

• 与 React 生命周期集成：自动处理组件的挂载、更新和卸载

  2.简化开发流程:

• 减少样板代码：封装了 ECharts 初始化和销毁逻辑

• 自动尺寸调整：内置响应式容器，自动处理窗口大小变化

  3.性能优化:

• 智能更新：只在必要时更新图表，避免不必要的重绘

• 自动清理：组件卸载时自动销毁 ECharts 实例，防止内存泄漏

二 、常用的配置项:

  1.option (必需):图表的主要配置对象，对应原生 ECharts 的 setOption 参数

  2.style:控制图表容器的样式

  3.className:为容器添加 CSS 类名

  4.notMerge:是否不合并选项（默认 false，即合并）

  5.lazyUpdate:是否延迟更新（性能优化用）

  6.onEvents:绑定 ECharts 事件

  7.opts:初始化附加参数

  8.autoResize:是否自动响应容器大小变化

<ReactECharts 
   option={invitBidOption} 
   style={{ height: '400px', width: '100%' }}
   className="chart-container"
   notMerge={true}
   lazyUpdate={true}
   onEvents={{
      click: (params) => console.log('图表点击:', params),
      legendselectchanged: (params) => console.log('图例选择变化:', params)
   }}
   opts={{
      renderer: 'svg', // 'canvas' 或 'svg'
      devicePixelRatio: 2 // 高清屏适配
   }}
   autoResize={true}
/>

三 、使用步骤:

  1.安装echarts-for-react:

npm install echarts-for-react

  2.定义option配置项:

let invitBidOption = {
		tooltip: {
			trigger: "item"
		},
		legend: {
			orient: "vertical",
			left: 10,
			top: 30,
			data: [
				{ icon: "circle", name: "招标中" },
				{ icon: "circle", name: "处置中" },
				{ icon: "circle", name: "已结束" }
			]
		},
		series: [
			{
				name: "招标概览",
				type: "pie",
				radius: ["60%", "90%"],
				itemStyle: {
					borderRadius: 2
				},
				label: {
					show: false,
					position: "center"
				},
				center: ["70%", "50%"],
				labelLine: {
					show: false
				},
				data: [
                  { value: 12, name: "招标中" },
		          { value: 35, name: "处置中" },
		          { value: 24, name: "已结束" }
               ]
			}
		],
		color: ["#2563eb", "#ffd023", "#c3d6ef"]
	};

  3.引入ReactECharts并使用:

import ReactECharts from 'echarts-for-react';

<ReactEcharts option={invitBidOption} style={{ width: "100%", height: "100%" }}/>

四 、实现效果: