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

最新推荐文章于 2024-06-21 16:31:39 发布

代码就是bug

最新推荐文章于 2024-06-21 16:31:39 发布

阅读量1.1k

点赞数 1

文章标签： react native react.js echarts

本文链接：https://blog.csdn.net/XKFC1/article/details/124806105

版权

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