模板版本：v0.2.2

[!TIP] Gitee 地址

安装与使用

请到三方库的 Releases 发布地址查看配套的版本信息：@ohmi/react-native-echarts-pro-fix Releases 。对于未发布到 npm 的旧版本，请参考安装指南安装 tgz 包。

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

npm

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

yarn

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

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

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

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 文档进行引入。

属性

[!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 | 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) ，请自由地享受和参与开源。