reactnative 使用react-native-echarts-pro 组件使用 echarts图表

最新推荐文章于 2025-11-06 11:50:47 发布

原创最新推荐文章于 2025-11-06 11:50:47 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react native #react.js #echarts

本文介绍了如何在React Native应用中使用react-native-echarts-pro库来展示Echarts图表。首先，通过npm或yarn安装库，接着详细列出所需的环境版本。然后，提供了一个饼状图的使用案例，展示了如何配置图表选项并渲染到屏幕上。此库适用于创建数据可视化组件，特别是在React Native环境中。

React Native使用Echarts图表本质是通过webview展示的。
react-native-echarts-pro官网

安装

npm install react-native-echarts-pro --save
或者
yarn add react-native-echarts-pro

环境要求

react-native 版本大于或等于 0.59.

react-native-webview 版本大于或等于 6.9.0.

使用案例

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