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需要拉取新的库。

扫描二维码关注公众号,回复: 8016052 查看本文章

关于使用:

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

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
        }
      }
    ],

猜你喜欢

转载自www.cnblogs.com/liuw-flexi/p/11957377.html