react-native-echarts在打包时出现的坑

  react-native-echarts目前是RN开发中使用echarts图表最好的插件了,用法与Echarts完全一致,默认提供了三个属性:

  • option (object): The option for echarts: Documentation
  • width (number): The width of the chart. The default value is the outer container width.
  • height (number): The height of the chart. The default value is 400

  1.首先是最基本的使用:

    

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);

当自定义tooltip时,由于react-native-echarts外层包裹了一层WebView,所以在配置项的函数内部不能拿到外部的变量

const deviceW = Dimensions.get('window').width / 750
 
option.tooltip.formatter = (params) => {
  return `<div style="width: ${deviceW*690}px; font-size: ${deviceW*26}px;"></div>` // 此处deviceW并不生效,获取不到外部定义的变量
}

  2.改进:

    WebView将图表与外界的变量进行了隔离,只能另想他法,多传入一个属性,将外部变量变成可以供内部使用的变量

    

const deviceW = Dimensions.get('window').width / 750
let chartContext = {
  width: deviceW
}
 option.tooltip.formatter = (params) => {
  return `<div style="width: ${chartContext.width*690}px; font-size: ${chartContext.width*26}px;"></div>` // 此处deviceW并不生效,获取不到外部定义的变量
 }
<Echarts option={option} height={300} chartContext={chartContext} />

// 修改react-native-echarts包代码:
// renderChart.js
 export default function renderChart(props) {
  const height = `${props.height || 400}px`;
  const width = props.width ? `${props.width}px` : "auto";
   const chartContext = props.chartContext
  return `
    document.getElementById('main').style.height = "${height}";
    document.getElementById('main').style.width = "${width}";
    var myChart = echarts.init(document.getElementById('main'));
     var chartContext = ${toString(chartContext)};
    myChart.setOption(${toString(props.option)});
    myChart.on('click', function(params) {
      var seen = [];
      var paramsString = JSON.stringify(params, function(key, val) {
        if (val != null && typeof val == "object") {
          if (seen.indexOf(val) >= 0) {
            return;
          }
          seen.push(val);
        }
        return val;
      });
      window.postMessage(paramsString);
    });
    `
 }

  3.改进:

    以上方案解决了配置项拿不到外部变量的问题,看起来很完美,运行代码也没有什么问题,不过,在项目打包时,又出了问题,图表显示不出来了,很诡异

    原因:打包时,由于自定义属性是手动加的,打包时转换成了简写,不能被识别

  

  

// renderChart.js
var chartContext = ${toString(chartContext)}; 替换为
var g_chartContext = ${toString(chartContext)};
  
// 使用时,把chartContext 全都替换为g_chartContext 就可以了
  
option.tooltip.formatter = (params) => {
  return `<div style="width: ${ g_chartContext.width*690}px; font-size: ${ g_chartContext.width*26}px;"></div>` // 此处deviceW并不生效,获取不到外部定义的变量
}

   4.终极版:

import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';

export default class Assets {

    static fromModule(moduleId) {
        return resolveAssetSource(moduleId);
    }
}
import Assets from 'emrn-common/utils/assets'

<WebView
  ref="chart"
  scrollEnabled={false}
  injectedJavaScript={renderChart(this.props)}
  originWhitelist={['*']}
  style={{
     height: this.props.height || 400,
     backgroundColor: this.props.backgroundColor || 'transparent'
  }}
  scalesPageToFit={Platform.OS === 'android'}
  // source={{ html: tpl, baseUrl: '' }}
   // source={source}
  source={{uri: Assets.fromModule(source).uri}}
  // onMessage={event => this.props.onPress ? this.props.onPress(JSON.parse(event.nativeEvent.data)) : null}
  />

 

转载于:https://www.cnblogs.com/Yicoding/p/10120096.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值