React Native集成ECharts

本文介绍了在React Native项目中集成ECharts遇到的WebView警告及图表不显示的问题,提供了解决方案。包括安装最新版WebView组件,修改ECharts内部对WebView的引用,将tpl.html文件拷贝到android的assets目录,并调整Echarts组件的index.js代码。
摘要由CSDN通过智能技术生成
import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import Echarts from 'native-echarts';
export default class ChartAnaly 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} />
    );
  }
}

特别提示  这个解决方案管用是管用  但是呢 有个非常捞的问题出现 ,我发现哈 每过几天我做的第二步和第四步就会恢复成原来的样子,导致我每过几天就要更改一次 ,后来才知道在RN中node_modules中的代码也就是第三方组件是不能更改的,因为你每次要部署项目都会再次从官网上下载源码,这才是导致我更改失效的根源,解决这个问题就需要在github上面fork一下官网上的项目然后建立自己的本地仓库 ,在本地仓库中做更改,然后更改RN中的下载地址

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值