没有合适的资源?快使用搜索试试~ 我知道了~
React Native使用百度Echarts显示图表的示例代码
0 下载量 22 浏览量
2020-11-26
20:49:59
上传
评论
收藏 99KB PDF 举报
温馨提示
Echarts是百度推出的免费开源的图表组件,功能丰富,涵盖各行业图表。相信很多同学在网页端都使用过。今天我就来介绍下在React Native中如何使用Echarts来显示各种图表。 首先需要在我们的React Native项目中安装native-echarts组件,该组件是兼容IOS和安卓双平台的。 安装 npm install native-echarts --save 安装完成后在node_modules文件夹下会多出一个文件夹叫native-echarts。 目录结构如下图所示: 基础使用 native-echarts的使用方法基本和网页端的Echarts使用方法一致。
资源推荐
资源详情
资源评论
React Native使用百度使用百度Echarts显示图表的示例代码显示图表的示例代码
Echarts是百度推出的免费开源的图表组件,功能丰富,涵盖各行业图表。相信很多同学在网页端都使用过。今天我就来介绍
下在React Native中如何使用Echarts来显示各种图表。
首先需要在我们的React Native项目中安装native-echarts组件,该组件是兼容IOS和安卓双平台的。
安装安装
npm install native-echarts --save
安装完成后在node_modules文件夹下会多出一个文件夹叫native-echarts。
目录结构如下图所示:
基础使用基础使用
native-echarts的使用方法基本和网页端的Echarts使用方法一致。组件主要有三个属性:
option (object):图表的相关配置和数据。详见文档:ECharts Documentation
width (number):图表的宽度,默认值是外部容器的宽度。
height (number) :图表的高度,默认值是400。
示例代码:
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',
资源评论
weixin_38749863
- 粉丝: 3
- 资源: 912
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功