[JavaScript知识库] reactnative 使用react-native-echarts-pro 组件使用 echarts图表

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> reactnative 使用react-native-echarts-pro 组件使用 echarts图表 -> 正文阅读

[JavaScript知识库]reactnative 使用react-native-echarts-pro 组件使用 echarts图表

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>
  );
}