正文

react-native-echarts

IP云
IP云V管理员/6 阅读
08/12
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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模拟器上运行就正常显示图表了。