# react-native-echarts-pro-fix

**Repository Path**: kunyuan-hongke/react-native-echarts-pro-fix

## Basic Information

- **Project Name**: react-native-echarts-pro-fix
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-30
- **Last Updated**: 2025-10-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

> 模板版本：v0.2.2

<p align="center">
  <h1 align="center"> <code>@ohmi/react-native-echarts-pro-fix</code> </h1>
</p>
<p align="center">
    <a href="https://gitee.com/kunyuan-hongke/react-native-echarts-pro-fix">
        <img src="https://img.shields.io/badge/platforms-android%20|%20ios%20|%20harmony%20-lightgrey.svg" alt="Supported platforms" />
    </a>
    <a href="https://gitee.com/kunyuan-hongke/react-native-echarts-pro-fix/blob/master/LICENSE">
        <img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License" />
    </a>
</p>

> [!TIP] [Gitee 地址](https://gitee.com/kunyuan-hongke/react-native-echarts-pro-fix)

## 安装与使用

请到三方库的 Releases 发布地址查看配套的版本信息：[@ohmi/react-native-echarts-pro-fix Releases](https://gitee.com/kunyuan-hongke/react-native-echarts-pro-fix/release) 。对于未发布到 npm 的旧版本，请参考[安装指南](https://gitee.com/react-native-oh-library/usage-docs/tree/master/zh-cn/tgz-usage.md)安装 tgz 包。

进入到工程目录并输入以下命令：

<!-- tabs:start -->

#### **npm**

```bash
npm install @ohmi/react-native-echarts-pro-fix
```

#### **yarn**

```bash
yarn add @ohmi/react-native-echarts-pro-fix
```

<!-- tabs:end -->

下面的代码展示了这个库的基本使用场景：

> [!WARNING] 使用时 import 的库名不变。

```jsx
import React from "react";
import { View } from "react-native";
import RNEChartsPro from "react-native-echarts-pro-fix";

export default function RNEPDemo() {
	const pieOption = {
		series: [
			{
				name: "Source",
				type: "pie",
				legendHoverLink: true,
				hoverAnimation: true,
				avoidLabelOverlap: true,
				startAngle: 180,
				radius: "55%",
				center: ["50%", "35%"],
				data: [
					{ value: 105.2, name: "android" },
					{ value: 310, name: "iOS" },
					{ value: 234, name: "web" }
				],
				label: {
					normal: {
						show: true,
						textStyle: {
							fontSize: 12,
							color: "#23273C"
						}
					}
				}
			}
		]
	};
	return (
		<View style={{ height: 300, paddingTop: 25 }}>
			<RNEChartsPro height={250} option={pieOption} />
		</View>
	);
}
```

## Link

本库依赖 `@ohmi/react-native-webview` ，如已在鸿蒙工程中引入过该库，则无需再次引入。

如未引入请参照[@ohmi/react-native-webview 文档](https://gitee.com/kunyuan-hongke/ohos-react-native-webview/blob/master/README.md)进行引入。

## 属性

> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。

> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。

### Props

| Name                      | Description                                                                                         | default     | Type    | Required | Platform | HarmonyOS Support |
| ------------------------- | --------------------------------------------------------------------------------------------------- | ----------- | ------- | -------- | -------- | ----------------- |
| height                    | 图表区域高度                                                                                        | 400         | Number  | yes      | all      | yes               |
| width                     | 图表区域宽度                                                                                        | auto        | Number  | no       | all      | yes               |
| option                    | 图表核心配置项，请参考：[Apache ECharts - options](https://echarts.apache.org/en/option.html#title) | null        | Object  | yes      | all      | yes               |
| backgroundColor           | 背景颜色                                                                                            | transparent | String  | no       | all      | yes               |
| themeName                 | 内置主题 ，六种可选: `vintage` `dark` `macarons` `infographic` `shine` `roma`                       | ---         | String  | no       | all      | yes               |
| webViewSettings           | 自定义 WebView 容器属性                                                                             | null        | Object  | no       | all      | yes               |
| formatterVariable         | 如果 formatter 使用了动态单位变量，使用此属性传入                                                   | null        | Object  | no       | all      | yes               |
| extension                 | 动态扩展支持，如词云、水球图等                                                                      | null        | Object  | no       | all      | yes               |
| customMapData             | 自定义地图数据，默认为世界地图 JSON                                                                 | world JSON  | Object  | no       | all      | yes               |
| eventActions              | 自定义传入事件                                                                                      | null        | Object  | no       | all      | yes               |
| fontFamilies              | 自定义字体数组                                                                                      | []          | Array   | no       | all      | yes               |
| enableParseStringFunction | 开启后，`function` 将以字符串进行传递                                                               | false       | Boolean | no       | all      | yes               |

### Method

| Name           | Description          | Params                          | Required | Platform | HarmonyOS Support |
| -------------- | -------------------- | ------------------------------- | -------- | -------- | ----------------- |
| setNewOption   | 重新设置图表 option. | option(require), optionSetting? | no       | all      | yes               |
| getInstance    | 获取图表 instance.   | functionName, params?           | no       | all      | yes               |
| dispatchAction | 图表事件监听.        | callbackData?                   | no       | all      | yes               |

## 遗留问题

## 其他

## 开源协议

本项目基于 [The MIT License (MIT)](https://gitee.com/kunyuan-hongke/react-native-echarts-pro-fix/blob/master/LICENSE) ，请自由地享受和参与开源。