react native使用echarts图表

react native 使用echarts 是在HTML展示图表，通过webview引入html

安装webview

yarn add react-native-webview

通过下面命令安装

yarn add native-echarts

安装完成之后在node_modules 生成文件夹native-echarts。

这样安装的组件还有问题，

（1）组件中引用的webview是react-native自带的，但是最近几个版本已经没有了，需要引入上面安装的webview

import React, { Component } from 'react';
import { WebView, View } from 'react-native';
import { Container, Echarts } from './components'

将这个组件中所有引入webview的替换为

import WebView from "react-native-webview";

（2）webview引入html

找到

   <WebViewref="chart"scrollEnabled = {false}injectedJavaScript = {renderChart(this.props)}style={{height: this.props.height || 400,backgroundColor: this.props.backgroundColor || 'transparent'}}scalesPageToFit={Platform.OS !== 'ios'}originWhitelist={['*']}source={require('./tpl.html')}onMessage={event => this.props.onPress ? this.props.onPress(JSON.parse(event.nativeEvent.data)) : null}/>

改成

 <WebViewref="chart"scrollEnabled = {false}injectedJavaScript = {renderChart(this.props)}style={{height: this.props.height || 400,backgroundColor: this.props.backgroundColor || 'transparent'}}scalesPageToFit={Platform.OS !== 'ios'}originWhitelist={['*']}source= {Platform.OS === 'ios' ? require('./tpl.html') : { uri: 'file:///android_asset/tpl.html' }}onMessage={event => this.props.onPress ? this.props.onPress(JSON.parse(event.nativeEvent.data)) : null}/>

将tpl.html复制一份放在项目\android\app\src\main

webview 的source是引入html,在Android端 require此方式不会进行html解析.

基础使用
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 Index extends Component {render() {const option = {tooltip: {trigger: 'axis',axisPointer: {type: 'cross',crossStyle: {color: '#999'}}},toolbox: {feature: {dataView: { show: true, readOnly: false },magicType: { show: true, type: ['line', 'bar'] },restore: { show: true },saveAsImage: { show: true }}},legend: {data: ['Evaporation', 'Temperature']},xAxis: [{type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],axisPointer: {type: 'shadow'}}],yAxis: [{type: 'value',name: 'Precipitation',min: 0,max: 250,interval: 50,axisLabel: {formatter: '{value} ml'}},{type: 'value',name: 'Temperature',min: 0,max: 25,interval: 5,axisLabel: {formatter: '{value} °C'}}],series: [{name: 'Evaporation',type: 'bar',data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]},{name: 'Temperature',type: 'line',yAxisIndex: 1,data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]}]
};return (<Echarts option={option} height={300} />);}
}

react native使用echarts图表相关推荐

如何使用动态工具提示构建React Native图表
by Vikrant Negi 通过Vikrant Negi 如何使用动态工具提示构建React Native图表 (How to build React Native charts with dyn ...
react可视化项目 ECharts 3D区域地图图表+点击取消高亮黄色
react 可视化项目 ECharts 3D区域地图图表地图介绍 echarts图表引入 react页面中引入使用地图介绍做可视化项目时需要3d的区域地图,在网上搜到ECharts社区的一个其他 ...
React中使用echarts绘制图表
我们都知道,Echarts图表功能非常强大,使用起来也很方便,我们的项目中就用到了Echarts,现在笔者就带大家看看怎么在react中使用Echarts. 我们要想在react项目中高效使用echa ...
React Native图表插件
React Native图表插件react-native-charts-wrapper集成教程 https://www.jianshu.com/p/432517c5b531
【React自制全家桶】一、Webstrom+React+Ant Design+echarts搭建react项目
前言一.React是Facebook推出的一个前端框架,之前被用于著名的社交媒体Instagram中,后来由于取得了不错的反响,于是Facebook决定将其开源.出身名门的React也不负众望,成功 ...
echarts setoption方法_在Vue和React中使用ECharts的多种方法
前言俗话说:"工欲善其事,必先利其器".现如今已经有许多成熟易用的可视化解决方案,例如ECharts,AntV等等.我们可以把这些解决方案比作是一套套成熟的"工具&qu ...
Shoutem旨在成为React Native移动应用领域的WordPress
近日,Shoutem推出了新的基于React Native的应用构建器,为开发人员提供了移动应用领域的WordPress. \\ Shoutem让开发人员可以使用一个可视化环境快速创建基于React ...
如何在React Native中创建精美的动画加载器
by Vikrant Negi 通过Vikrant Negi 如何在React Native中创建精美的动画加载器 (How to create a beautifully animated load ...
如何构建具有实时搜索功能的React Native FlatList
by Vikrant Negi 通过Vikrant Negi 如何构建具有实时搜索功能的React Native FlatList (How to build a React Native FlatL ...
React Native常用第三方汇总
React Native 项目常用第三方组件汇总: react-native-animatable 动画 react-navigation github : https://reactnavig ...

react native使用echarts图表

react native使用echarts图表相关推荐

最新文章

热门文章