react-native-echarts

react-native-echarts是react native结合百度echart的图表，集成的一个图表插件。

github地址：https://github.com/zhangxinagjunHJH/react-native-echarts

echart地址：http://echarts.baidu.com/examples/index.html 可以看到官方API很强大，图表种类非常多

按照官网所写，app在模拟器上运行正常，但是打包时出现图表不显示问题，下面先介绍按照和使用方法，再介绍解决问题方案。

• 安装命令：

npm install native-echarts --save

• 页面代码：

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

export default class app extends Component {
  render() {
    const option = {
      title: {
          text: 'ECharts demo'
      },
      tooltip: {},
      legend: {
          data:['销量']
      },
      xAxis: {
          data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
      },
      yAxis: {},
      series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
      }]
    };
    return (
      <Echarts option={option} height={300} />
    );
  }
}

AppRegistry.registerComponent('app', () => app);

　　安装后，可在模拟器上运行，显示没问题，但是在真机上一试，显示不出图表。

• 解决问题的方法：

把“\node_modules\native-echarts\src\components\Echarts\tpl.html”文件复制一份放在“android/app/src/main/assets”文件里，如果“android/app/src/main”下没有“assets”文件，就建一个。修改后，在

android模拟器上运行就正常显示图表了。