zoukankan      html  css  js  c++  java
  • 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
            }
          }
        ],
    此文仅为鄙人学习笔记之用,朋友你来了,如有不明白或者建议又或者想给我指点一二,请私信我。liuw_flexi@163.com/QQ群:582039935. 我的gitHub: (学习代码都在gitHub) https://github.com/nwgdegitHub/
  • 相关阅读:
    项目实战15—企业级堡垒机 jumpserver
    ELK重难点总结和整体优化配置
    ELK 经典用法—企业自定义日志收集切割和mysql模块
    项目实战14—ELK 企业内部日志分析系统
    搭建内网映射服务
    超好用内网映射神器
    Linux官方源、镜像源汇总
    搭建企业级PPTP服务器
    Ansible的Inventory管理
    Ansible的快速入门
  • 原文地址:https://www.cnblogs.com/liuw-flexi/p/11957377.html
Copyright © 2011-2022 走看看