react-native-echarts-liquidfill

English 简体中文

echarts-liquidfill based on echarts.

Getting started

$ npm install react-native-echarts-liquidfill --save

Rely

$ npm install react-native-webview --save

Usage

1.Base Usage

import React from 'react';
import { View } from 'react-native';
import RNEChartsLiquidFill from 'react-native-echarts-liquidfill';
export default function ChartsComponent() {
  const pieOption = {
    title: {
      text: '水球图',
      left: 'center'
    },
    series: [
      {
        type: 'liquidFill',
        data: [0.6],
        color: ['#afb11b'],
        itemStyle: {
          //普通样式
          opacity: 0.6
        },
        emphasis: {
          itemStyle: {
            //悬停样式
            opacity: 0.9
          }
        }
      }
    ]
  };

  return (
    <View style={{ height: 300, paddingTop: 25 }}>
      <RNEChartsLiquidFill height={250} onPress={tt => alert(tt)} option={pieOption} />
    </View>
  );
}

2.More Usage

Please visit Echarts-Gallery

Props

| Prop | Type | Default | Description | | :-------------: | :----: | :---------: | ------------------------------------------------------------ | | height | number | 400 | Chart area height | | option | object | null | Chart data configuration items, see details：https://echarts.apache.org/zh/option.html#title | | backgroundColor | string | transparent | Chart background color | | themeName | string | - | There are only six officially available themes:vintage || dark || macarons || infographic || shine || roma |

Method

| Method name | Params | Description | | :----------: | :----------: | :-------------------------------------------------: | | setNewOption | option | Reassign and render the chart | | onPress | callbackData | Chart click event, callbackData is the clicked data |