在react-native中使用echart绘制图表_其他编程

在react-native中使用echart绘制图表

引用自：https://www.jianshu.com/p/6eae23b3ece9.
有前辈做好了echart的封装
native-echarts.
cd到你项目目录，然后通过npm install native-echarts --save去安装

在需要调用的界面import Echarts from 'native-echarts’可以调用
代码与效果图如下：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 *Copyright © 2017年 张宇. All rights reserved.
 */

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

import Echarts from 'native-echarts';

export default class ECharts extends Component {
  render() {
    const option = {
      title: {
          text: '销量统计表'
      },
      tooltip: {},
      legend: {
          data:['销量']
      },
      xAxis: {
          data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
      },
      yAxis: {},
      series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
      }]
    };
    const option2 = {
      tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}: {c} ({d}%)"
      },
      legend: {
          orient: 'vertical',
          x: 'left',
          data:['直达','营销广告','搜索引擎','邮件营销','联盟广告','视频广告','百度','谷歌','必应','其他']
      },
      series: [
          {
              name:'访问来源',
              type:'pie',
              selectedMode: 'single',
              radius: [0, '30%'],

              label: {
                  normal: {
                      position: 'inner'
                  }
              },
              labelLine: {
                  normal: {
                      show: false
                  }
              },
              data:[
                  {value:335, name:'直达', selected:true},
                  {value:679, name:'营销广告'},
                  {value:1548, name:'搜索引擎'}
              ]
          },
          {
              name:'访问来源',
              type:'pie',
              radius: ['40%', '55%'],

              data:[
                  {value:335, name:'直达'},
                  {value:310, name:'邮件营销'},
                  {value:234, name:'联盟广告'},
                  {value:135, name:'视频广告'},
                  {value:1048, name:'百度'},
                  {value:251, name:'谷歌'},
                  {value:147, name:'必应'},
                  {value:102, name:'其他'}
              ]
          }
      ]
    }
    return (
      <View>
        <Text style={styles.title}>Echarts图表</Text>
        <Echarts option={option} height={300} />
        <Echarts option={option2} height={300} />
        <Text style={styles.demo}>Demo</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  title:{
    textAlign:'center'
  },
  demo:{
    textAlign:'center',
    fontSize:20
  }
});

AppRegistry.registerComponent('ECharts', () => ECharts);

效果图：
在这里插入图片描述

此时会出现报错，解决办法如下：
引用自： https://www.jianshu.com/p/b2b5d8752ea8.
在这里插入图片描述
完成后页面虽然不报错，但是图表显示不出来，此时解决办法：
引用自： https://blog.csdn.net/qq_25905161/article/details/89308475.