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 相关文章推荐
基于JQuery实现异步刷新的代码(转载)
Mar 29 Javascript
AngularJS语法详解(续)
Jan 23 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
Feb 15 Javascript
复杂的javascript窗口分帧解析
Feb 19 Javascript
jQuery无刷新上传之uploadify3.1简单使用
Jun 18 Javascript
JS添加删除DIV的简单实例
Jul 08 Javascript
React组件之间的通信的实例代码
Jun 27 Javascript
vue-router相关基础知识及工作原理
Mar 16 Javascript
动态加载JavaScript文件的3种方式
May 05 Javascript
浅谈vue引用静态资源需要注意的事项
Sep 28 Javascript
微信小程序新手教程之启动页的重要性
Mar 03 Javascript
JavaScript中的this/call/apply/bind的使用及区别
Mar 06 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
实现了一个PHP5的getter/setter基类的代码
2007/02/25 PHP
php实现zip文件解压操作
2015/11/03 PHP
php读取torrent种子文件内容的方法(测试可用)
2016/05/03 PHP
学习ExtJS border布局
2009/10/08 Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
2013/01/16 Javascript
Javascript中浮点数相乘的一个解决方法
2014/06/03 Javascript
jQuery实现的分页功能示例
2017/01/22 Javascript
Angular在一个页面中使用两个ng-app的方法
2017/02/20 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
2017/02/21 Javascript
bootstrap select插件封装成Vue2.0组件
2017/04/17 Javascript
Ionic2开发环境搭建教程
2020/08/20 Javascript
详解基于angular-cli配置代理解决跨域请求问题
2017/07/05 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
2017/10/19 Javascript
vue父组件向子组件传递多个数据的实例
2018/03/01 Javascript
浅谈Redux中间件的实践
2018/07/27 Javascript
微信小程序保存多张图片的实现方法
2019/03/05 Javascript
前端插件之Bootstrap Dual Listbox使用教程
2019/07/23 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
2019/10/11 Javascript
微信小程序利用button控制条件标签的变量问题
2020/03/15 Javascript
Vue实现购物车基本功能
2020/11/08 Javascript
python 布尔操作实现代码
2013/03/23 Python
Python编程求解二叉树中和为某一值的路径代码示例
2018/01/04 Python
Python使用pymysql从MySQL数据库中读出数据的方法
2018/07/25 Python
influx+grafana自定义python采集数据和一些坑的总结
2018/09/17 Python
python使用matplotlib绘制热图
2018/11/07 Python
python pyinstaller打包exe报错的解决方法
2019/11/02 Python
Django框架实现在线考试系统的示例代码
2020/11/30 Python
简述进程的启动、终止的方式以及如何进行进程的查看
2014/02/20 面试题
好书伴我成长演讲稿
2014/05/14 职场文书
优秀少先队员主要事迹材料
2014/05/28 职场文书
党支部组织生活会整改方案
2014/09/30 职场文书
先进个人申报材料
2014/12/30 职场文书
工程资料员岗位职责
2015/04/13 职场文书
同学聚会祝酒词
2015/08/10 职场文书
vue 数字翻牌器动态加载数据
2022/04/20 Vue.js
TS 类型兼容教程示例详解
2022/09/23 Javascript