React Native使用百度Echarts显示图表的示例代码


Posted in Javascript onNovember 07, 2017

Echarts是百度推出的免费开源的图表组件,功能丰富,涵盖各行业图表。相信很多同学在网页端都使用过。今天我就来介绍下在React Native中如何使用Echarts来显示各种图表。

首先需要在我们的React Native项目中安装native-echarts组件,该组件是兼容IOS和安卓双平台的。

安装

npm install native-echarts --save

安装完成后在node_modules文件夹下会多出一个文件夹叫native-echarts。

目录结构如下图所示:

 React Native使用百度Echarts显示图表的示例代码

基础使用

native-echarts的使用方法基本和网页端的Echarts使用方法一致。组件主要有三个属性:

  1. option (object):图表的相关配置和数据。详见文档:ECharts Documentation
  2. width (number):图表的宽度,默认值是外部容器的宽度。
  3. 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',
     data: [5, 20, 36, 10, 10, 20]
   }]
  };
  return (
   <Echarts option={option} height={300} />
  );
 }
}

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

React Native使用百度Echarts显示图表的示例代码

通过上面的代码我们就可以在React Native里面显示一个图表了。但是我们会发现显示的字体会偏小。我们需要适配下移动端的字体,我们需要在native-echarts文件下找到tpl.html文件,在head里面增加下面一句代码:
<meta name="viewport" content="width=device-width, initial-scale=1"> 这样字体大小就显示正常了。

进阶使用:

在使用图表时,如果我们需要使用图表的点击事件,比如点击柱状图的某个柱子,获取到该柱子的信息,再跳转到详情页面,这该怎么做呢?组件本身是没有这个属性的,需要我们自己修改下代码,传递下消息。具体代码如下:

首先我们需要在renderChart.js文件中把需要的数据注入并传递出来(window.postMessage):

import echarts from './echarts.min';
import toString from '../../util/toString';

export default function renderChart(props) {
 const height = props.height || 400;
 const width = props.width || 568;
 return `
  document.getElementById('main').style.height = "${height}px";
  document.getElementById('main').style.width = "${width}px";
  var myChart = echarts.init(document.getElementById('main'));
  myChart.setOption(${toString(props.option)});
  myChart.on('click', function (params) {
   var message = {};
   message.event='click';
   message.seriesName = params.seriesName;
   message.name = params.name;
   window.postMessage(JSON.stringify(message));
 });
 `
}

然后在index.js中做处理(handleMessage):

import React, { Component } from 'react';
import { WebView, View, StyleSheet, Platform } from 'react-native';
import renderChart from './renderChart';
import echarts from './echarts.min';

export default class App extends Component {
 componentWillReceiveProps(nextProps) {
  if(JSON.stringify(nextProps.option) !== JSON.stringify(this.props.option)) {
   this.refs.chart.reload();
  }
 }
 handleMessage = (evt) => {
  const message = JSON.parse(evt.nativeEvent.data)
   this.props.handleMessage(message);
 }
 render() {
  return (
   <View style={{flex: 1, height: this.props.height,width: this.props.width }}>
    <WebView
     ref="chart"
     scrollEnabled = {false}
     injectedJavaScript = {renderChart(this.props)}
     style={{
      height: this.props.height|| 400,
      width: this.props.width || 568,
     }}
     onMessage={this.handleMessage}
     source={require('./tpl.html')}
    />
   </View>
  );
 }
}

最后在使用图表的页面中,修改下代码来接受传递过来的消息:
<Echarts option={option} height={height} width={theme.screenWidth} handleMessage={this.handleMessage} />

在handleMessage方法中就可以写自己的逻辑来处理传递过来数据了。

打包:

如果就这样打包的话,IOS是可以正常打包并显示的。但是在android端打包时会出错。

解决方法:

将index.js中的代码:source={require('./tpl.html')}修改为:

source= {Platform.OS === 'ios' ? require('./tpl.html') : { uri: 'file:///android_asset/tpl.html' }}

同时将tpl.html文件拷贝到安卓项目下面的app/src/main/assets文件夹中。

在执行完react-native bundle命令后,需要手动将资源文件res/drawable-mdpi中生成的tpl.html文件删除,再执行cd android && ./gradlew assembleRelease命令,这样就能成功打包了。

Q1

当数据量比较大的时候,x轴的数据不显示。这个是echarts自己的一个功能,解决办法是设置xAxis-axisLabel-interval为0即可。

Q2

面积折线图中面积颜色“不正“,也就是说和设置的颜色对不上。这个可能是react-native-echarts组件封装的问题,解决办法是设置areaStyle-normal-shadowColor为'#ffffff',同理可以设置lineStyle等。

Q3

打release包的时候报错了,
\android\app\src\main\res\drawable-mdpi\node_modules_nativeecharts_src_components_echarts_tpl.html
Error:Error: The file name must end with .xml or .png

原因:

release打包的时候把node_modules_nativeecharts_src_components_echarts_tpl.html打到了drawable下,这是不行的,要放到assets下。

解决办法是

另外,release版本只能使用uri加载资源,android把tpl.html文件放在android/app/src/main/assets文件里,使用uri:'file:///android_asset/tpl.html'这个地址加载,ios在项目目录下建个文件夹,把tpl文件放里面去,使用uri:'文件名/tpl'加载。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Ubuntu 11.10 安装Node.js的方法
Nov 30 Javascript
jquery ajax 同步异步的执行 return值不能取得的解决方案
Jan 08 Javascript
js简单实现删除记录时的提示效果
Dec 05 Javascript
jquery siblings获取同辈元素用法实例分析
Jul 25 Javascript
微信小程序 登录实例详解
Jan 16 Javascript
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
echarts鼠标覆盖高亮显示节点及关系名称详解
Mar 17 Javascript
Vue开发实现吸顶效果的示例代码
Aug 21 Javascript
详解Vue中的基本语法和常用指令
Jul 23 Javascript
vue视频播放插件vue-video-player的具体使用方法
Nov 08 Javascript
js实现的在本地预览图片功能示例
Nov 09 Javascript
three.js利用卷积法如何实现物体描边效果
Nov 27 Javascript
浅谈在Vue-cli里基于axios封装复用请求
Nov 06 #Javascript
浅谈mint-ui 填坑之路
Nov 06 #Javascript
基于vue实现分页效果
Nov 06 #Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
Nov 06 #Javascript
JS实现分页浏览横向图片(类轮播)实例代码
Nov 06 #Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
Nov 06 #Javascript
vue自定义过滤器创建和使用方法详解
Nov 06 #Javascript
You might like
mysql5的sql文件导入到mysql4的方法
2008/10/19 PHP
对淘宝URL中ID提取的PHP代码
2013/09/01 PHP
phpinfo() 中 Local Value(局部变量)Master Value(主变量) 的区别
2016/02/03 PHP
javascript之通用简单的table选项卡实现(二)
2010/05/09 Javascript
js控制表单奇偶行样式的简单方法
2013/07/31 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/20 Javascript
Js判断CSS文件加载完毕的具体实现
2014/01/17 Javascript
基于jquery和svg实现超炫酷的动画特效
2014/12/09 Javascript
DOM基础教程之使用DOM控制表单
2015/01/20 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
2016/01/23 Javascript
javascript瀑布流布局实现方法详解
2016/02/17 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
2016/08/23 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
2018/01/23 Javascript
Vue中的v-for循环key属性注意事项小结
2018/08/12 Javascript
puppeteer库入门初探
2019/01/09 Javascript
JS实现马赛克图片效果完整示例
2019/04/13 Javascript
详解如何使用nvm管理Node.js多版本
2019/05/06 Javascript
微信小程序的授权实现过程解析
2019/08/02 Javascript
Javascript基于OOP实实现探测器功能代码实例
2020/08/26 Javascript
JavaScript中如何调用Java方法
2020/09/16 Javascript
python使用win32com在百度空间插入html元素示例
2014/02/20 Python
python使用在线API查询IP对应的地理位置信息实例
2014/06/01 Python
浅析使用Python操作文件
2017/07/31 Python
python实现批量修改文件名代码
2017/09/10 Python
Python 使用 prettytable 库打印表格美化输出功能
2019/12/26 Python
Python库skimage绘制二值图像代码实例
2020/04/10 Python
matplotlib基础绘图命令之errorbar的使用
2020/08/13 Python
python 如何对logging日志封装
2020/12/02 Python
Baracuta官方网站:Harrington夹克,G9,G4,G10等
2018/03/06 全球购物
Java的接口和C++的虚类的相同和不同处
2014/03/27 面试题
竞选部门副经理的自荐书范文
2014/02/11 职场文书
小学数学课后反思
2014/04/23 职场文书
高等教育学专业自荐书
2014/06/17 职场文书
创先争优演讲稿
2014/09/15 职场文书
纪委书记群众路线整改措施思想汇报
2014/10/09 职场文书
用Python生成会跳舞的美女
2022/01/18 Python