react-native-echarts's Introduction

native-echarts

修改记录

1、native-echarts 在react-native-webview 替换webview后出错
tmp.html改为动态：

<!DOCTYPE html>
    <html>
      <head>
        <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon"> 
        <title>echarts</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <style type="text/css">
          html,body {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
          }
          #main {
            height: 100%;
          }
        </style>
        <script src="https://cdn.bootcss.com/echarts/4.3.0/echarts.min.js"></script>
      </head>
      
      <body>
        <div id="main"></div>
      <body>
    <html>

2、增加 tplurl 属性，可传入自定义的tmp.html

install

$ npm install native-echarts1 --save

Usage

The Usage is complete consistent with Echarts

component props:

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.

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
import Echarts from 'native-echarts1';

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