模板版本：v0.2.0

react-native-echarts-pro

安装与使用

三方库版本	发布信息	支持RN版本
1.9.1	react-native-echarts-pro Releases	0.72
1.9.3	react-native-echarts-pro Releases	0.77

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

npm

# 0.72
npm install react-native-echarts-pro@^1.9.1

# 0.77
npm install react-native-echarts-pro@1.9.3

yarn

# 0.72
yarn add react-native-echarts-pro@^1.9.1

# 0.77
yarn add react-native-echarts-pro@1.9.3

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

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

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" },
          { value: 134, name: "harmony" },
        ],
        label: {
          normal: {
            show: true,
            textStyle: {
              fontSize: 12,
              color: "#23273C",
            },
          },
        },
      },
    ],
  };
  return (
    <View style={{ height: 300, paddingTop: 25 }}>
      <RNEChartsPro height={250} option={pieOption} />
    </View>
  );
}

Link

本库 HarmonyOS 侧实现依赖@react-native-oh-tpl/react-native-webview 的原生端代码，如已在 HarmonyOS 工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。

如未引入请参照@react-native-oh-tpl/react-native-webview 文档的 Link 章节进行引入

兼容性

本文档内容基于以下版本验证通过：

1. RNOH: 0.72.27; SDK: HarmonyOS-Next-DB1 5.0.0.29(SP1); IDE: DevEco Studio 5.0.3.403; ROM: 3.0.0.25;
2. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71;
3. RNOH：0.77.18; SDK：HarmonyOS 5.1.1 Release; IDE: DevEco Studio 5.1.1.830; ROM：NEXT 5.1.0.150;

属性

详情见react-native-echarts-pro

Properties for all react-native-echarts-pro components:

Name	Description	Type	Platform	Required	HarmonyOS Support
height	Chart area height	Number	All	Y	Yes
width	Chart area auto	Number	All	N	Yes
option	Chart configuration, see more：Apache ECharts - options	Object	All	Y	Yes
backgroundColor	Chart background color	String	All	N	Yes
themeName	There are only six officially available themes: vintage dark macarons infographic shine roma	String	All	N	Yes
webViewSettings	Customize WebView container properties	Object	All	N	Yes
formatterVariable	If option’formatter function need variable,can use this.	Object	All	N	Yes
extension	Dynamic support for tripartite expansion, such as word cloud, water polo map, etc. example.	object	All	N	Yes
customMapData	For custom maps, null is a world map. See the following usage examples	Object	All	N	Yes
eventActions	Custom charts events.	Object	All	N	Yes
fontFamilies	Custom font families.	Array	Android/ios	N	No
enableParseStringFunction	If enabled, function are parse as strings	Boolean	All	N	Yes
renderMode1.9.3+	Used to specify the rendering method for ECharts	String	All	N	Yes
getInstance	Gets the specified instance	Function	All	N	Yes
setNewOption	Modify the legend configuration	Function	All	N	Yes
dispatchAction	Manual triggering of events	Function	All	N	Yes

遗留问题

• fontFamilies自定义字体属性未生效，该属性需要将字体文件转为base64字符串，拼接在html中的style标签中使用，经验证，这种用法在react-native-webview的最小化demo也不生效，一旦有base64字体加载，就会白屏并无法触发loadEnd，而原生 HarmonyOS webview上显示正常 issues#20

其他

开源协议

本项目基于 MIT License ，请自由地享受和参与开源。