React-Native使用echarts

首先安装我封装的组件 react-native-zy-echarts

以及依赖的组件 react-native-webview

yarn add react-native-zy-echarts
yarn add react-native-webview

在项目中使用可参考以下代码

import React from 'react';
import {Text, StyleSheet, View, Dimensions} from 'react-native';
import Echarts from 'react-native-zy-echarts';

export default class Home extends React.Component {
  state = {
    option: {
      color: ['#1CD097'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
        },
        formatter: (params) => {
          let arr = params[0].seriesName;
          let yj = arr.split(',')[params[0].dataIndex] || 0;
          return params[0].name + '<br>' + '销售业绩: ' + yj + '元';
        },
        backgroundColor: 'rgba(0,0,0,0.5)',
      },
      grid: {
        left: '1%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: [
        {
          type: 'category',
          data: [
            '1月',
            '2月',
            '3月',
            '4月',
            '5月',
            '6月',
            '7月',
            '8月',
            '9月',
            '10月',
            '11月',
            '12月',
          ],
          axisTick: {
            show: false,
            alignWithLabel: true,
          },
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: '#D9D9D9',
            },
          },
          axisLabel: {
            textStyle: {
              color: '#BFBFBF',
              fontSize: 12,
            },
            interval: 0,
            rotate: 40,
          },
        },
      ],
      yAxis: [
        {
          type: 'value',
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: '#D9D9D9',
            },
          },
          axisLine: {
            show: false,
            lineStyle: {
              type: 'solid',
              color: '#BFBFBF',
            },
          },
          axisLabel: {
            textStyle: {
              color: '#BFBFBF',
            },
          },
          axisTick: {
            show: false,
          },
        },
      ],
      series: [
        {
          name: [],
          type: 'bar',
          barWidth: '50%',
          data: [20, 5, 25, 30, 76, 10, 50, 158, 100, 60, 30, 150],
          itemStyle: {
            normal: {
              barBorderRadius: [25, 25, 0, 0],
            },
            emphasis: {
              shadowColor: 'rgba(0,0,0,.1)',
            },
          },
        },
      ],
    },
  };
  render() {
    return (
      <View style={styles.content}>
        <Text>柱状图</Text>
        <Echarts option={this.state.option} height={300} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  content: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  },
});

注意：在安卓中存在兼容问题，需要将 node_modules/react-native-zy-echarts/components/Echarts/tpl.html 文件复制到 android/app/src/main/assets/ 目录下方可解决

最后在 ios 目录下执行 pod install 并重启项目可以看到效果