React native use of the icon library ECharts

github Address: https://github.com/somonus/react-native-echarts

 

Official website: https: //www.echartsjs.com/zh/tutorial.html#5%20 minutes to get started% 20ECharts

 

After installing version because rn problems that may Baocuo, on the introduction of WebView problem, the solution is to be found in the library nodemodules, the introduction of WebView into place

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

So again loaded the react-native-webview

In addition, after Well, remember

cd ios 

pod install

It because native necessary to pull a new library.

 

About the use of:

If you want to set the color histogram:

itemStyle color bar is provided,

backgroundColor is to set the background color

 

series : [
                            {
                                name: 'Days' ,
                                type:'bar',
                                Stack: 'day' ,
                                data:[30, 45, 15,60,40],
                                barWidth: 30,
                                itemStyle:{
                                    normal:{
                                        color:'#4ad2ff'
                                    }
                                },
                                label:{ 
                                    normal:{ 
                                        show: true, 
                                        position: 'insideTop'} 
                                        }
                            }
                        ]，
backgroundColor: 'green'

————————————————
Disclaimer: This article is CSDN blogger original article "sauerkraut Tan Dian", and follow CC 4.0 BY- SA copyright agreement, reproduced, please attach the original source link and this statement.
Original link: HTTPS: // blog.csdn.net/t876587201/article/details/70159076

 

Displaying and hiding of X, Y axis, tick marks, grid lines

"yAxis": [
      {
        // is in January this appears as a line, rather than the number of axes that a little bit of 
        "Show": to true ,
         "boundaryGap": to true ,
         "of the type": "category" ,
         "name": "Time" ,
         "the Data": [ "January", "February", "March", "April", "May", "6", "7", "8" ],
         "axisLine": {        // Y axis 
          "Show": false

        },
        "axisTick": {        // Y-axis tick marks 
          "Show": to false
        },
        "SplitLine": {      // Grid 
          "Show": to false
        }
      }
    ],
    "xAxis": [
      {
        "show" : false,
        "type": "value",
        "name": "销量(kg)",
        "splitLine": {
          "show": false
        }
      }
    ],