第一步,下载依赖

npm install native-echarts --save

第二步,引入

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} width={width} />
);
}
}

然后重启项目,你会看到如下页面

完整代码 Echart.js

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,Dimensions
} from 'react-native';
import Echarts from 'native-echarts';
const {width, height}=Dimensions.get('window');
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} width={width} />
);
}
}

注:如果有黄色的报错只需要把模拟器放在tab的第一个就行了,这里的tab是alt+tab切换的那个顺序,就是不重要的意思,哈哈

react native中使用native-echarts的更多相关文章

  1. react native中使用echarts

    开发平台:mac pro node版本:v8.11.2 npm版本:6.4.1 react-native版本:0.57.8 native-echarts版本:^0.5.0 目标平台:android端收 ...

  2. React Native 中 CSS 的使用

    首先声明,此文原作者为黎 跃春 React Native中CSS 内联样式 对象样式 使用Stylesheet.Create 样式拼接 导出样式对象 下面的代码是index.ios.js中的代码: / ...

  3. react native中的欢迎页(解决首加载白屏)

    参照网页: http://blog.csdn.net/fengyuzhengfan/article/details/52712829 首先是在原生中写一些方法,然后通过react native中js去 ...

  4. React Native中的网络请求fetch和简单封装

    React Native中的网络请求fetch使用方法最为简单,但却可以实现大多数的网络请求,需要了解更多的可以访问: https://segmentfault.com/a/1190000003810 ...

  5. [转] 「指尖上的魔法」 - 谈谈 React Native 中的手势

    http://gold.xitu.io/entry/55fa202960b28497519db23f React-Native是一款由Facebook开发并开源的框架,主要卖点是使用JavaScrip ...

  6. [转] 在React Native中使用ART

    http://bbs.reactnative.cn/topic/306/%E5%9C%A8react-native%E4%B8%AD%E4%BD%BF%E7%94%A8art 前半个月捣腾了一下Rea ...

  7. react native中一次错误排查 Error:Error: Duplicate resources

    最近一直在使用react native中,遇到了很多的坑,同时也学习到了一些移动端的开发经验. 今天在做一个打包的测试时,遇到了一个问题,打包过程中报错“Error:Error: Duplicate ...

  8. 在React Native中,使用fetch网络请求 实现get 和 post

    //在React Native中,使用fetch实现网络请求 /* fetch 是一个封装程度更高的网络API, 使用了Promise * Promise 是异步编程的一种解决方案 * Promise ...

  9. 《React Native 精解与实战》书籍连载「React Native 中的生命周期」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  10. react native中如何往服务器上传网络图片

    let common_url = 'http://192.168.1.1:8080/'; //服务器地址 let token = ''; //用户登陆后返回的token /** * 使用fetch实现 ...

随机推荐

  1. HDU 5950 - Recursive sequence - [矩阵快速幂加速递推][2016ACM/ICPC亚洲区沈阳站 Problem C]

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5950 Farmer John likes to play mathematics games with ...

  2. SQL之层次查询

    层次查询是一种确定数据行间关系的一种操作手段.层次查询遍历的是一个树形结构.基本语法如下,以下语法嵌入到标准SQL中即可达到层次查询的目的: level,... ...[注释:伪列,用于select子 ...

  3. vsftpd服务安装配置

    服务器:centos6.5 32位   192.168.1.114 1.安装 yum -y install vsftpd 2.启动 /etc/init.d/vsftpd start 3.配置 配置文件 ...

  4. word标题自动编号

    1.打开word文档中多级列表->定义新的多级列表 2.根据下图设置级别对应的标题,然后确定

  5. LEO原创-FMX之你不知道的ARC

    LEO原创13498714 FMX加入了ARC技术,对象创建后不用释放,FMX会帮你释放,是不是这样就不用关心对象的释放了呢,非也! 写简单的代码,这个功能也许很好用,但如果你写的是一个项目,那隐藏的 ...

  6. Guava cache 示例

    pom.xml <!-- guava --> <dependency> <groupId>com.google.guava</groupId> < ...

  7. 遍历出文档内所有元素的tagName

    //深度优先 function deepLogTagNames(parentNode){ console.log(parentNode.tagName); const childNodes=paren ...

  8. JavaScript学习(五)

  9. shell进阶函数

    函数的定义和用途 函数function是由若干条shell命令组成的语句块,实现shell代码的重用和模块化编程. 函数和shell程序的异同点 它与shell程序形式上是相似的,不同的是它不是一个单 ...

  10. Flappy Bird

    在网上学习了下“65行 JavaScript 代码实现 Flappy Bird 游戏”(http://blog.jobbole.com/61842/),main.js 如下: // Initializ ...