首页 > js教程 > 正文

响应式React Native Echarts组件的介绍

原创 2018-07-14 11:17:56 0 580
这篇文章主要介绍了关于响应式React Native Echarts组件的介绍,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

近年来,随着移动端对数据可视化的要求越来越高,类似 MPAndroidChart 这样的传统图表库已经不能满足产品经理日益变态的需求。前端领域数据可视化的发展相对繁荣一些,通过 WebView 在移动端使用 Echarts 这样功能强大的前端数据可视化库,是解决问题的好办法。

React Native 开发中,由于使用的是与前端相同的 JavaScript 语言,衔接 Echarts 的工作相对顺畅些,不过一些必要的组件封装还是能够大大提高开发效率的。

Echarts 官方推荐过一个第三方封装库:react-native-echarts(注:它对应的 nmp package 名字为 native-echarts ),目前有 400+ stars 和 100+ 的周下载量,可见还是被广泛使用的。但是我们经过调研,发现 react-native-echarts 存在以下一些问题:

  • 该库已半年多未更新,Echarts 版本停留在 3.0 ,Android 端打包需手动添加 assets 的问题也一直未处理

  • 库的接口灵活度较低,比如只能通过 width、height 设置大小;无法使用 Echarts 扩展包;无法进行事件注册、WebView 通信等

由于用 WebView 封装 Echarts 涉及到本地 html,不是纯 JavaScript 语言层面的功能,又没有 native 代码,所以做成 nmp package 并不是一个很好的选择,写成项目里的内部组件,自己进行配置反而是更方便更灵活的方案。

因此我们决定不使用第三方的 Echarts 封装库,自己写一个通用组件 WebChart 。为方便开发中使用,该组件具有以下特点:

  • 按照响应式进行设计,只需在 option 中配置好数据源,数据变化后图表就会自动刷新,更符合 React 的风格。

    我们的方案是在组件每次 update 时判断传入的 option 参数是否发生变化,如果变化通过 webView.postMessage ,以 JSON 的形式传入新的 option ,通知 Echarts 重新 setOption 。

    虽然 Echarts 本身会对 option 进行对比,但事先判断可以减少 update 导致的与 WebView 频繁通信,这一点在容器父组件中有大量异步请求时还是很明显的;在 WebView 内部,更新则是采用 Echarts 本身的 setOption 而无需 reload 整个 WebView

  • 利用 WebView 的 postMessage 和 onMessage 接口,可实现图表与其它 React Native 组件的事件通信

  • 通过组件的 exScript 参数,可为 WebView 添加任意脚本,使用灵活

  • 由于是自己写的组件, echarts 版本、扩展包,svg/canvas 、数据增量加载都可以自己设定

Demo 与使用方法

使用与示例请参见:react-native-echarts-demo,如果你需要直接使用,可按以下步骤移植:

  1. 将根目录下的 WebChart 组件文件夹拷到你项目中合适的地方

  2. 将 /android/app/src/main/assets/web 文件夹拷到你项目同样位置,没有 assets 文件夹需手动创建。

只需以上两步就可以在项目中使用 WebChart 组件了。

如果需要进一步定制的话,Echarts 代码在以上两个文件夹中的 index.html 里 <script /> 标签内,目前是放的是 4.0 完整版,无扩展包,可到官网下载所需的版本和扩展包替换;svg/canvas 、数据增量加载等可在 WebChart/index.js 中直接进行修改。在移动端,出于性能的考虑,我们一般使用 svg 的渲染模式。

WebChart 具体使用可参见 App.js ,style 的设置就和普通的 React Native 组件一样,可使用 flex ,也可设为定值。额外的三个参数:

  • option(object):赋给 setOption 的参数对象,发生变化后 WebChart 内部会自动调用 setOption ,实现响应式刷新。特别注意,JSON 解析时未进行函数的处理,所以需避免使用函数式的 formatter 和类形式的 LinearGradient ,和 demo 一样使用模板式和普通对象的吧

  • exScript(string):任何你想在 WebView 加载时执行的代码,一般会是事件注册之类的,推荐使用模板字面量

  • onMessage(function):WebView 内部触发 postMessage 之后的回调,postMessage 需先在 exScript 中进行设置,用于图表与其它 React Native 组件的通信

当然这是根据我们的业务需要设计的参数,你完全可以自由重新设定。

Echarts与React Native组件的通信

在 React Native 的 WebView 组件中,提供了 onMessage 和 postMessage 来进行 html 与组件的双向通信,具体使用可参加文档。

利用 webView.postMessage ,WebChart 实现了通知 Echarts 执行 setOption ;在 exScript 中,可利用 window.postMessage 实现 Echarts 的事件向 React Native 组件的通信。

一般我们会约定通信的 data 为这样格式的对象:

{
  type: 'someType',
  payload: {
      value: 111,
  },
}

由于 onMessage 和 postMessage 只能进行字符串的传递,在 exScript 需进行 JSON 序列化,类似这样:

exScript={`
  chart.on('click', (params) => {
    if(params.componentType === 'series') {
      window.postMessage(JSON.stringify({
        type: 'select',
        payload: {
            index: params.dataIndex,
        },
      }));
    }
  });
`}

以上就是我们封装的响应式 WebChart 组件及使用,完整代码请参见:react-native-echarts-demo。

在使用中,还有以下几个坑未解决,目前只能绕过,欢迎知道的同学指正:

  • 在 IOS 中,Echarts 好像渲染不出透明的效果,用 rgba 设置的颜色不能正常

  • React Native 的 WebView 好像 style.height 属性无效,因此不得不在外面套了个 View

  • 按现在的资源加载方式,index.html 在 Android 上会有两份。因为平台判断是运行时进行的,哪怕分开设置 index.anroid.js 和 index.ios.js 打包时也会都打包进去,而 Android 中又必须手动添加 assets

  • index.html 中必须内联引入 Echarts 的代码,外部引用单独的 js 文件好像无效

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

以上就是响应式React Native Echarts组件的介绍的详细内容,更多请关注php中文网其它相关文章!

  • 相关标签:
  • 本文原创发布php中文网 ,转载请注明出处,感谢您的尊重!
  • 网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    条评论

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    ThinkPHP5快速开发企业站点[全程实录]更新中...

    本课以最新版ThinkPHP5.0.10为基础进行开发,全程实录一个完整企业点,从后台到前台,从控制器到路由的全套完整教程,不论是你是新人,还是有一定开发经验的程序员,都可以从中学到实用的知识~~

    Thinkphp3.2.3个人博客开发

    ThinkPHP是一个快速、开源的轻量级国产PHP开发框架,是业内最流行的PHP框架之一。本课程以博客系统为例,讲述如何使用TP实战开发,从中学习Thinkphp的实践应用。模版下载地址:http:/...

    PHP实战天龙八部之仿爱奇艺电影网站

    本课程是php实战开发课程,以爱奇艺电影网站为蓝本从零开发一个自己的网站。目的是让大家了解真实项目的架构及开发过程

    独孤九贱(8)_php从零开始开发属于自己的php框架

    本课以一个极简的PHP开发框架为案例,向您展示了一个PHP框架应该具有的基本功能,以及具体的实现方法,让您快速对PHP开发框架的底层实现有一个清楚的认识,为以后学习其实的开发框架打下坚实的基础。

    独孤九贱(3)_JavaScript视频教程

    javascript是运行在浏览器上的脚本语言,连续多年,被评为全球最受欢迎的编程语言。是前端开发必备三大法器中,最具杀伤力。如果前端开发是降龙十八掌,好么javascript就是第18掌:亢龙有悔。...

    直播实录:PHP魔鬼训练营[从零开始制作个人博客]

    本站9月直播课已经结束,本套教程是直播实录,没有报上名或者漏听学员福利来了,赶紧看看吧,说不定这里就有你的菜

    2018前端入门_HTML5

    轻松明快,简洁生动,让你快速走入HTML5的世界,体会语义化开发的魅力

    JavaScript极速入门_玉女心经系列

    JavaScript能够称得上是史上使用最广泛的编程语言,也是前端开发必须掌握的三技能之一:描述网页内容的HTML、描述网页样式的CSS以及描述网页行为的JavaScript。本章节将帮助大家迅速掌握...

    独孤九贱(7)_Bootstrap视频教程

    Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。为所有开发者、所有应用场景而设计,它让前端开发更快速、简单,所有开发者都能快速上手...

    PHP用户注册登录系统视频教程

    《php用户注册登录系统》主要介绍网站的登录注册功能,我们会从最简单的实现登录注册功能开始,增加验证码,cookie验证等,丰富网站的登录注册功能

    独孤九贱(2)_CSS视频教程

    《php.cn独孤九贱(2)-css视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了CSS知识...

    PHP学生管理系统视频教程

    《PHP学生管理系统视频教程》主要给大家讲解了HTML,PHP,MySQL之间的相互协作,实现动态的网页显示和获取数据.

    独孤九贱(6)_jQuery视频教程

    jQuery是一个快速、简洁的JavaScript框架。设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的...

    弹指间学会HTML视频教程

    《弹指间学会HTML视频教程》从最基本的概念开始讲起,步步深入,带领大家学习HTML,了解各种常用标签的意义以及基本用法,学习HTML知识为以后的学习打下基础

    最新微信小程序开发视频教程

    《最新微信小程序开发视频教程》本节课程是由微趋道录制,讲述了如何申请一个微信小程序,以及开发中需要使用哪些工具,和需要注意哪些等。

    • 昧光

      全栈工程师

    • 认证0级讲师
    • 5318篇
      文章总数
    • 580
      文章总浏览数

    头条

    推荐视频教程

  • javascript初级视频教程
  • jquery 基础视频教程
  • javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程
  • 最新更新