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 相关文章推荐
利用JS重写Cognos右键菜单的实现代码
Apr 11 Javascript
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
May 06 Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
Dec 28 Javascript
JavaScript制作的可折叠弹出式菜单示例
Apr 04 Javascript
Jquery注册事件实现方法
May 18 Javascript
JavaScript节点及列表操作实例小结
Aug 05 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
Jan 11 Javascript
详解vue axios中文文档
Sep 12 Javascript
浅谈Vue SPA 首屏加载优化实践
Dec 15 Javascript
分享ES6的7个实用技巧
Jan 18 Javascript
详解 vue better-scroll滚动插件排坑
Feb 08 Javascript
Vue的data、computed、watch源码浅谈
Apr 04 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
一家之言的经验之谈php+mysql扎实个人基本功
2008/03/27 PHP
php 无极分类(递归)实现代码
2010/01/05 PHP
php一行代码获取文件后缀名实例分析
2014/11/12 PHP
PHP实现获取客户端IP并获取IP信息
2015/03/17 PHP
百度工程师讲PHP函数的实现原理及性能分析(三)
2015/05/13 PHP
PHP中$GLOBALS与global的区别详解
2019/03/21 PHP
firefox中JS读取XML文件
2006/12/21 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
2012/03/29 Javascript
js使下拉列表框可编辑不止是选择
2013/12/12 Javascript
js锁屏解屏通过对$.ajax进行封装实现
2014/07/31 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
2014/09/01 Javascript
详解JavaScript中setSeconds()方法的使用
2015/06/11 Javascript
浅谈jQuery的offset()方法及示例分享
2015/07/17 Javascript
微信小程序 实例应用(记账)详解
2016/09/28 Javascript
使用原生js+canvas实现模拟心电图的实例
2017/09/20 Javascript
JavaScript程序设计高级算法之动态规划实例分析
2017/11/24 Javascript
关于ES6箭头函数中的this问题
2018/02/27 Javascript
详解Vue源码之数据的代理访问
2018/12/11 Javascript
小程序转发探索示例
2019/02/19 Javascript
Vue 指令实现按钮级别权限管理功能
2019/04/23 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
2020/04/27 Javascript
[01:19]2014DOTA2国际邀请赛 采访TITAN战队ohaiyo 能赢DK很幸运
2014/07/12 DOTA
[33:23]Secret vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python中不能连接超时的问题及解决方法
2018/06/10 Python
django admin 后台实现三级联动的示例代码
2018/06/22 Python
Python排序函数的使用方法详解
2020/12/11 Python
HTML5实现的震撼3D焦点图动画的示例代码
2019/09/26 HTML / CSS
HTML5新增的Css选择器、伪类介绍
2013/08/07 HTML / CSS
怀旧收藏品和经典纪念品:Betty’s Attic
2018/08/29 全球购物
BSTN意大利:德国街头和运动文化高品质商店
2020/12/22 全球购物
秘书岗位职责
2013/11/18 职场文书
2014年庆祝国庆65周年演讲稿
2014/09/21 职场文书
2014年语文教师工作总结
2014/12/18 职场文书
2015中秋节慰问信范文
2015/03/23 职场文书
Pytest中skip和skipif的具体使用方法
2021/06/30 Python
使用 Koa + TS + ESLlint 搭建node服务器的过程详解
2022/05/30 NodeJs