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

官网:https://www.echartsjs.com/zh/tutorial.html#5%20分钟上手%20ECharts

安装之后因为rn版本问题,可能会抱错,关于WebView 引入问题,解决办法是在nodemodules中找到该库,引入WebView的地方改成

import { WebView } from 'react-native-webview';

所以又要装 react-native-webview了

另外好了之后,记得

cd ios

pod install

一下,因为native需要拉取新的库。

关于使用:

如果想设置柱状图的颜色:

itemStyle是设置条的颜色,
backgroundColor是设置背景色
series : [
{
name:'天数',
type:'bar',
stack: '天',
data:[30, 45, 15,60,40],
barWidth: 30,
itemStyle:{
normal:{
color:'#4ad2ff'
}
},
label:{
normal:{
show: true,
position: 'insideTop'}
}
}
],
backgroundColor: 'green' ————————————————
版权声明:本文为CSDN博主「酸菜谭丶」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/t876587201/article/details/70159076

显示与隐藏X,Y轴,刻度线,网格线

"yAxis": [
{
//就是一月份这个显示为一个线段,而不是数轴那种一个点点
"show" : true,
"boundaryGap": true,
"type": "category",
"name": "时间",
"data": ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月"],
"axisLine":{ //y轴
"show":false },
"axisTick":{ //y轴刻度线
"show":false
},
"splitLine": { //网格线
"show": false
}
}
],
"xAxis": [
{
"show" : false,
"type": "value",
"name": "销量(kg)",
"splitLine": {
"show": false
}
}
],

React native 之 图标库ECharts的使用的更多相关文章

  1. [RN] React Native 使用开源库 react-native-image-crop-picker 实现图片选择、图片剪裁

    React Native 使用开源库 react-native-image-crop-picker 实现图片选择.图片剪裁 该库可以实现启动本地相册和照相机来采集图片,并且提供多选.图片裁剪等功能,支 ...

  2. (转)React Native 使用react-native-image-picker库实现图片上传功能

    react-native-image-picker作为一个集成相机和相册的功能的第三方库,因为其使用相对简单受到前端开发人员的喜爱. react-native-image-picker使用 首先,安装 ...

  3. react native 常用第三方库

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Helvetica; color: #000000 } p.p2 { margin: 0.0p ...

  4. React Native初探

    前言 很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP,在可控的范围内,我们可以在上面做任何想做的事情. P ...

  5. React Native 系列(八) -- 导航

    前言 本系列是基于React Native版本号0.44.3写的.我们都知道,一个App不可能只有一个不变的界面,而是通过多个界面间的跳转来呈现不同的内容.那么这篇文章将介绍RN中的导航. 导航 什么 ...

  6. React Native 系列(八)

    前言 本系列是基于React Native版本号0.44.3写的.我们都知道,一个App不可能只有一个不变的界面,而是通过多个界面间的跳转来呈现不同的内容.那么这篇文章将介绍RN中的导航. 导航 什么 ...

  7. Teaset-React Native UI 组件库

    GitHub地址 https://github.com/rilyu/teaset/blob/master/docs/cn/README.md React Native UI 组件库, 超过 20 个纯 ...

  8. React Native之配置开发环境

    安装前注意: 1)在Max OS X 10.11(El Capitan)版本中,homebrew在安装软件时可能会碰到/usr/local目录不可写的权限问题.可以使用下面的命令修复: sudo ch ...

  9. React Native创建一个APP

    React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用.在 JavaScript 中用 React 抽 ...

随机推荐

  1. 登录进入Mysql数据库的几种方式

    前提:连接进入mysql数据库 本机安装的myslq基础信息: host= "localhost", # 数据库主机地址:127.0.0.1 port=3306, # 端口号 us ...

  2. Akka简介与Actor模型(一)

    前言...... Akka是一个构建在JVM上,基于Actor模型的的并发框架,为构建伸缩性强,有弹性的响应式并发应用提高更好的平台.本文主要是个人对Akka的学习和应用中的一些理解. Actor模型 ...

  3. Macaca环境搭建(二)----uirecorder PC录制

    上一节我们安装好了macaca环境,这节我们来进行PC录制: 一.安装UI Recorder 命令窗口输入:npm install uirecorder mocha -g 二.初始化配置 1.创建文件 ...

  4. 课程计划安排 ver: 2016-12-14

    录的越多,后续肯定会涨价. <x86 从实模式到保护模式> 这本书涉及到除了汇编语言,还有一些计算机架构和操作系统方面相关的知识点. 不仅为学习高级编程语言打下了非常扎实的基础,学完C++ ...

  5. [转帖]Java 8新特性探究(九)跟OOM:Permgen说再见吧

    Java 8新特性探究(九)跟OOM:Permgen说再见吧 https://my.oschina.net/benhaile/blog/214159 need study 很多开发者都在其系统中见过“ ...

  6. IIS7多站点ssl配置及http自动跳转到https

    SSL证书配置参考如下: http转https实战教程iis7.5 window08 IIS7安装多域名SSL证书绑定443端口 关键是修改C:\Windows\System32\inetsrv\co ...

  7. Codeforces 1209D Cow and Snacks

    题目大意 有 $n$ 个不同的糖果,从 $1$ 到 $n$ 编号.有 $k$ 个客人.要用糖果招待客人. 对于每个客人,这些糖果中恰有两个是其最爱.第 $i$ 个客人最爱的糖果编号是 $x_i$ 和 ...

  8. JAVA基础--JAVA API集合框架(其他集合类,集合原理)

    一.ArrayList介绍 1.ArrayList介绍 ArrayList它是List接口的真正的实现类.也是我们开发中真正需要使用集合容器对象. ArrayList类,它是List接口的实现.肯定拥 ...

  9. C语言&*符号使用及大端法小端法测试

    工具:Microsoft Visual C++ 6.0 例子: int a = 1; int* b = &a; C语言规定a表示存储单元中的数据,&a表示存储单元的地址,b存储的就是a ...

  10. linux shell脚本中使用expect(脚本打开新终端自动远程连接顺便输一点指令)(巨坑)

    放弃吧 我找了六个小时都没找到可以用的方案(指标题括号里的内容) 给个曲线救国的方法: 现把expect脚本写成一个文件 在另一个shell脚本中调用