我把它升级成0.39，但是打包还是不行

真的感谢这个组件，但是release版本真机测试也是无法显示图标，react-native版本是0.34，急求修复

这是react-native的一个bug，解决方案参考facebook/react-native#6004

release版本只能使用uri加载资源，android把tpl.html文件放在android/app/src/main/assets文件里，使用uri:'file:///android_asset/tpl.html'这个地址加载，ios在项目目录下建个文件夹，把tpl文件放里面去，使用uri:'文件名/tpl'加载，这样能使用，但是好像无法使用webview和native见得通信

无法通信找到解决方法了，但是无法使用官方自己的webview，我使用react-native-webview-bridge这个，打包时忽略这个组建的webview方法就行了

@1610449813 这个问题解决了么，要我自己去改写这个组件么？

@ztMalone 恩，如果你不需要webview和native通信，可以使用原生的webview，把他组件里Echarts文件夹的index文件webview source路径改成我上面说的，要是需要通信的话，使用我上面说的第三方组件

facebook/react-native#505
参考 @1610449813 的答案。已解决！

按照@1610449813 的方法还是没有解决

@1610449813 android release版本通过“把tpl.html文件放在android/app/src/main/assets文件里，使用uri:'file:///android_asset/tpl.html'这个地址加载”已解决！但是IOS下将tpl.html放在项目的一个新建文件夹下，在报URL was not found 的错误，大家都有遇到吗？

@Rylai-Zihang 大兄弟，你这个问题解决了么

@1610449813 请问一下如何实现echarts和native的通信？
点击事件？要如何设置，在html中吗？

看看echarts api，再看看react-native-webview-bridge就知道如何通信了，

@1610449813 ios按上面解决方法 source={{uri:'app/tpl'}}显示URL was not found on this server 请问怎么解决

@lsamio +1，请问这个问题解决了吗？

npm install native-echarts --save之后一直下载不了，卡在loadRequestedDeps: still install loadDepsIntoIdealTree

@1610449813 请问在您的android真机release版本的APK无法显示echarts图片的解决办法中，下面代码是修改的哪个地方的代码？
uri:'file:///android_asset/tpl.html'

@1610449813 已解决，修改的是 \node_modules\native-echarts\src\components\Echarts\index.js中的代码，具体如下：
源代码为：source={require('./tpl.html')}
修改为：source={{uri:'file:///android_asset/tpl.html'}}

我这边修改过代码后还是不显示啊！source={{uri:'file:///android_asset/tpl.html'}}，并且把tpl.html放到android/app/src/main/assets里了，但是还是不行啊，求解答啊！我这饼图可以正常显示，折线图就不行

同路上一样 照着方法做了 饼图可以显示 仪表盘图可以显示 其他图就不行了 怎么解决啊 求大神指点

@gongchao @lsamio @Rylai-Zihang @belynnyond iOS的路径怎么放置，麻烦提示一下好吗，谢谢

@will86 @Hgq1001 你们看看你们的代码，trigger: 'axis'，这个值是不是这个，不是的话改下，echart3.0，和echart2.0，有变化了，你们可以去官网查查代码，如果你们写的值是‘Time’的话，在Debug上可以显示，但是release上就显示不了了 ，

目前我的解决方法
ios需要把tpl.html文件放到src/commonents/Echarts 里面
然后android 按照楼上的所说就行了
import { Platform } from 'react-native';

const source = (Platform.OS == 'ios') ? require('./tpl.html') : {'uri':'file:///android_asset/tpl.html'}
console.log("source=",source);
return (

  <View style={{flex: 1, height: this.props.height || 400,}}>
    <WebView
      ref="chart"
      scrollEnabled = {false}
      injectedJavaScript = {renderChart(this.props)}
      style={{
        height: this.props.height || 400,
      }}
      source={source}
    />
  </View>
);

你看看代码里的option，里边的trigger:的值是axis吗？

trigger: 'item',

你好好看看echart 3.0 和echart 2.0 的option是不一样的

@zwyqz 我的柱状图 设置宽度不起作用 总是占据两个屏宽 有什么解决办法吗 谢谢

@wangchongwei @1610449813 通讯可以使用 onMessage

在WebView 上设置一个 onMessage , 然后在 option 里面中的 function 中 可以通过 window.postMessage 传值。

Please explain why need to modify:

Source = {require ('./tpl.html')}

to

Modify Is: source = {{uri: 'file: ///android_asset/tpl.html'}}

and where do I modify this?

@amijabd
The component WebView powered by Facebook requires that modify...

File of this path ./node_modules/native-echarts/src/components/Echarts/index.js needs to be modified

Yes, I made those changes based on the above by putting this:
source = {{uri: 'file: ///android_asset/tpl.html'}}

Still after I made a release, the charts still can't be viewed. Not sure what I'm doing wrong.

*When running the emulator, the chart no longer show after the modified code was made.

Here's the page I did for one of the charts. Not sure where I'm going wrong.

import React, { Component } from 'react';
import { Container, Header, Content, Card, CardItem, Text, Body, Left, Right, Button, H3 } from 'native-base';
import Echarts from 'native-echarts';
export default class SalesProDepartment extends Component {
  render() {
    const option = {
    title : {
        show: true,
        text: 'Product Department',
        subtext: 'Mar 24-Sept 30, 2016',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'horizontal',
        bottom: 'bottom',
        data: [
          "-",
          "F-F&B",
          "R-Retail"
        ]
    },
    series : [
        {
            name: 'Department',
            type: 'pie',
            xAxis: '',
            yAxis: '',
            radius: [0, '50%'],
            data:[
              {name: "-", value: 12198.53},
              {name: "F-F&B", value: 26559.58},
              {name: "R-Retail", value: 29900.57}
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};
    return (
      <Container>
        <Content padder>
          <Card>
            <CardItem>
              <Button bordered small style={{marginRight: 10}}>
                <Text>Department</Text>
              </Button>
              <Button bordered small>
                <Text>Net Sales</Text>
              </Button>
            </CardItem>
          </Card>
          <Card style={{height:450}}>
            <CardItem>
              <Body>
                <Echarts option={option} height={400} width={350} />
              </Body>
            </CardItem>
         </Card>
        </Content>
      </Container>
    );
  }
}

@amijabd
Confirm that, does the file tpl.html exists in the path ./android/app/src/main/assets/tpl.html?

Nope. Its not there. I did the bundling but its not there.

There is however a file in /android/app/src/main/res/raw with the name node_modules_nativeecharts_src_components_echarts_tpl.html

@will86
Okay. Managed to figure it out. Thanks for the assist.

@amijabd I have exactly the same problem, how you fixed the problem?

我这边遇到一个问题 加载china map的时候,在安卓上一切OK，在iOS上 模拟器正常，连线跑到真机上一切正常，release出ipa包后装到手机上就不显示了，最后找到了原因是因为html模板加载路径问题，解决办法如下:
1.在项目全局运行npm run bundle-ios
2.我把html中引用的加载js路径不正确的js文件直接拷贝到了html中，这样不存在路径问题了
经验证，iOS的release模式可以显示出来了

iOS的release包下图标无法显示，在项目下建立文件夹来存放tpl.html也是不行，android的配置可以了，求各位大佬指点下iOS的路径到底要怎么配置？

我这边遇到一个问题 加载china map的时候,在安卓上一切OK，在iOS上 模拟器正常，连线跑到真机上一切正常，release出ipa包后装到手机上就不显示了，最后找到了原因是因为html模板加载路径问题，解决办法如下:
1.在项目全局运行npm run bundle-ios
2.我把html中引用的加载js路径不正确的js文件直接拷贝到了html中，这样不存在路径问题了
经验证，iOS的release模式可以显示出来了

你这个中文是英语老师教的吧，，，，，第二条你自己读试试，能读懂吗？