React native 之 图标库ECharts的使用
2024-09-05 07:16:34
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
}
}
],
最新文章
- const,static,extern简介
- mapreduce 模板
- Android开发笔记——常见BUG类型之内存泄露与线程安全
- ListView Animation
- POJ 3468 A Simple Problem with Integers(线段树)
- Linux下静态库生成和使用
- C#编写 ";Hello,Word!"; 您的第一个程序。
- opengl打开本地bmp图片绘制
- c# 无损高质量压缩图片代码
- ABAP程序的效率(转)
- jquery与ajax的应用
- C 语言学习 之搭建环境和熟悉命令
- Codeforces 107B Basketball Team 简单概率
- c#之AES加密解密
- javaScript遍历对象、数组总结
- C# 之 反射性能优化3
- BZOJ1880或洛谷2149 [SDOI2009]Elaxia的路线
- k8s API sample
- linux:Apache服务器相关
- 《算法》第五章部分程序 part 1