React native 之 图标库ECharts的使用
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的使用的更多相关文章
- [RN] React Native 使用开源库 react-native-image-crop-picker 实现图片选择、图片剪裁
React Native 使用开源库 react-native-image-crop-picker 实现图片选择.图片剪裁 该库可以实现启动本地相册和照相机来采集图片,并且提供多选.图片裁剪等功能,支 ...
- (转)React Native 使用react-native-image-picker库实现图片上传功能
react-native-image-picker作为一个集成相机和相册的功能的第三方库,因为其使用相对简单受到前端开发人员的喜爱. react-native-image-picker使用 首先,安装 ...
- react native 常用第三方库
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Helvetica; color: #000000 } p.p2 { margin: 0.0p ...
- React Native初探
前言 很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP,在可控的范围内,我们可以在上面做任何想做的事情. P ...
- React Native 系列(八) -- 导航
前言 本系列是基于React Native版本号0.44.3写的.我们都知道,一个App不可能只有一个不变的界面,而是通过多个界面间的跳转来呈现不同的内容.那么这篇文章将介绍RN中的导航. 导航 什么 ...
- React Native 系列(八)
前言 本系列是基于React Native版本号0.44.3写的.我们都知道,一个App不可能只有一个不变的界面,而是通过多个界面间的跳转来呈现不同的内容.那么这篇文章将介绍RN中的导航. 导航 什么 ...
- Teaset-React Native UI 组件库
GitHub地址 https://github.com/rilyu/teaset/blob/master/docs/cn/README.md React Native UI 组件库, 超过 20 个纯 ...
- React Native之配置开发环境
安装前注意: 1)在Max OS X 10.11(El Capitan)版本中,homebrew在安装软件时可能会碰到/usr/local目录不可写的权限问题.可以使用下面的命令修复: sudo ch ...
- React Native创建一个APP
React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用.在 JavaScript 中用 React 抽 ...
随机推荐
- C++学习笔记-const
const在C++中有着大量的运用,深刻理解const有助于进一步理解C++. const基础知识 int main() { const int a;//C++中必须初始化 int const b;/ ...
- Java架构师 成长之路 -- 跳出程序员陷阱(转载)
本人也是coding很多年,虽然很失败,但也总算有点失败的心得,不过我在中国,大多数程序员都是像我一样,在一直走着弯路. 如果想成为一个架构师,就必须走正确的路,否则离目标越来越远,正在辛苦工作的程序 ...
- Sql Server使用TOP实现Limit m,n的功能
转载自:https://blog.csdn.net/weixin_41798450/article/details/88885891 在MySQL中,可以用 Limit 来查询第 m 列到第 n 列的 ...
- LCA模板(数剖实现)
题目链接:https://www.luogu.org/problemnew/show/P3379 题意:LCA模板题. 思路:今天开始学树剖,先拿lca练练.树剖解lca,两次dfs复杂度均为O(n) ...
- [转帖]Unix版权史
Unix版权史 http://www.ruanyifeng.com/blog/2010/03/unix_copyright_history.html 阮一峰的blog 里面写到了 system V ...
- 解决ubuntu命令行中文乱码
解决方法: 1.安装zhcon 登入用户后,输入 1 sudo apt-get install zhcon 2.启动zhcon 输入 1 zhcon --utf8 PS:zhcon支持中文输入法,按 ...
- java暂停线程
暂停线程 本节介绍两个被废弃的用于线程暂停和恢复的方法suspend().resume().主要探究废弃原因,强调线程的安全性.主要有两个原因 原因1: suspend().resume()使用不当, ...
- selenium Grid2环境搭建和基本使用
Selenium Grid简介 利用Selenium Grid可以使主节点(hub)的测试用例在不同主机即分支点(node)运行.可以使一份测试用例在不同环境下(操作系统.浏览器)执行自动化测试.Se ...
- python-day37(正式学习)
前景回顾 抢票系统的代码优化,使用了Lock类 from multiprocessing import Process,Lock import os,time,json with open('user ...
- flat 的用法
今天在项目中,看到了flat的一个语法,是我之前没有用过的,所以有必要记录下来,作为新的知识点,巩固我自己的知识点: 附赠转载连接:https://developer.mozilla.org/zh-C ...