zoukankan      html  css  js  c++  java
  • react-native-echarts

    react-native-echarts是react native结合百度echart的图表,集成的一个图表插件。

    github地址:https://github.com/zhangxinagjunHJH/react-native-echarts

    echart地址:http://echarts.baidu.com/examples/index.html 可以看到官方API很强大,图表种类非常多

    按照官网所写,app在模拟器上运行正常,但是打包时出现图表不显示问题,下面先介绍按照和使用方法,再介绍解决问题方案。

    • 安装命令:
    npm install native-echarts --save
    
    •  页面代码:
    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);
    

      安装后,可在模拟器上运行,显示没问题,但是在真机上一试,显示不出图表。

    • 解决问题的方法:

         把“ ode_modules ative-echartssrccomponentsEcharts pl.html”文件复制一份放在“android/app/src/main/assets”文件里,如果“android/app/src/main”下没有“assets”文件,就建一个。修改后,在

         android模拟器上运行就正常显示图表了。

  • 相关阅读:
    solr源码解读(转)
    solr安装配置
    HTML转义字符
    JAVA:在0-99间产生100个不重复的随机数
    JS中的$符号
    使用Emacs敲出UML,PlantUML快速指南
    operator 安装
    package handler
    shell 条件判断if
    libvirtError: internal error: No more available PCI slots
  • 原文地址:https://www.cnblogs.com/xiaojun-zxj/p/8308866.html
Copyright © 2011-2022 走看看