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 相关文章推荐
11款基于Javascript的文件管理器
Oct 25 Javascript
js 操作select相关方法函数
Dec 06 Javascript
通过javascript设置css属性的代码
Dec 28 Javascript
JavaScript 页面坐标相关知识整理
Jan 09 Javascript
文本框中,回车键触发事件的js代码[多浏览器兼容]
Jun 07 Javascript
修改或扩展jQuery原生方法的代码实例
Jan 13 Javascript
jquery实现的用户注册表单提示操作效果代码分享
Aug 28 Javascript
vue从使用到源码实现教程详解
Sep 19 Javascript
快速解决js开发下拉框中blur与click冲突
Oct 10 Javascript
vue+node+webpack环境搭建教程
Nov 05 Javascript
Vue路由history模式解决404问题的几种方法
Sep 29 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
Apr 11 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
重量级动漫纷纷停播!唯独OVERLORD第四季正在英魂之刃继续更新
2020/05/06 日漫
PHP函数常用用法小结
2010/02/08 PHP
PHP与Java进行通信的实现方法
2013/10/21 PHP
php导出csv格式数据并将数字转换成文本的思路以及代码分享
2014/06/05 PHP
PHP中把数据库查询结果输出为json格式简单实例
2015/04/09 PHP
PHP对XML内容进行修改和删除实例代码
2016/10/26 PHP
php微信公众号开发之微信企业付款给个人
2018/10/04 PHP
用jquery ajax获取网站Alexa排名的代码
2009/12/12 Javascript
JavaScript初学者需要了解10个小技巧
2010/08/25 Javascript
可选择和输入的下拉列表框示例
2013/11/05 Javascript
js获得当前系统日期时间的方法
2015/05/06 Javascript
前端编码规范(3)JavaScript 开发规范
2017/01/21 Javascript
nodejs个人博客开发第四步 数据模型
2017/04/12 NodeJs
深入理解vue中的$set
2017/06/01 Javascript
zTree获取当前节点的下一级子节点数实例
2017/09/05 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
2017/09/13 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
2018/02/16 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
2018/06/07 Javascript
js实现购物车功能
2018/06/12 Javascript
axios 封装上传文件的请求方法
2018/09/26 Javascript
JavaScript数组去重的几种方法
2019/04/07 Javascript
vue中destroyed方法的使用说明
2020/07/21 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
2020/09/04 Javascript
微信小程序自定义底部弹出框动画
2020/11/18 Javascript
python实现Windows电脑定时关机
2018/06/20 Python
Dlib+OpenCV深度学习人脸识别的方法示例
2019/05/14 Python
vscode+PyQt5安装详解步骤
2020/08/12 Python
python查询MySQL将数据写入Excel
2020/10/29 Python
python re模块常见用法例举
2021/03/01 Python
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
澳大利亚先进的皮肤和激光诊所购物网站:Soho Skincare
2018/10/15 全球购物
采购员岗位职责
2013/11/15 职场文书
村官学习十八大感想
2014/01/15 职场文书
四年大学自我鉴定
2014/02/17 职场文书
创先争优演讲稿
2014/09/15 职场文书
初中作文评语集锦
2014/12/25 职场文书