react echarts pie base

基础饼图echarts图表。提取常用api进行封装的echarts插件。

安装

npm install --save @ahwecharts/pie-base

引入

import LineBaseEcharts from '@ahwecharts/pie-base';
or
import { PieBaseEcharts } from 'ahwecharts';

基本用法

import ReactDOM from 'react-dom';
import PieBaseEcharts from '@ahwecharts/line-base';

ReactDOM.render(
  <div>
    <PieBaseEcharts
      isSwitch
      label={{
        show: true,
        formatter: '{b}\n{d}',
        length: 20,
        length2: 50,
      }}
      legend={{
        show: true,
      }}
      series={{
        radius: ['40%', '70%'],
        center: ['50%', '40%']
      }}
      data={[
        { name: 'Mon', value: 150},
        { name: 'Tue', value: 230},
        { name: 'Wed', value: 224},
        { name: 'Thu', value: 218},
        { name: 'Fri', value: 135},
        { name: 'Sat', value: 147},
        { name: 'Sun', value: 260},
      ]}
    />
  </div>,
  _mount_
);

Props Line

| 参数 | 说明 | 类型 | 默认值 | | -------- | -------- | -------- | -------- | | width | 宽 | string | 100% | | height | 高 | string | 100% | | colors | 饼图颜色 | string[] | -- | | label | 标签属性 | LabelProps | -- | | series | 饼图属性 | SeriesProps | -- | | legend | 图例属性 | LegendComponentOption | -- | | isSwitch | 是否自动切换 Tooltip | boolean | false | | switchTime | 自动切换时间 | number | 2000 | | data | 数据 | any[] | [] | | onClick | 点击 | (v: any) => void | -- |

Props data[]

| 参数 | 说明 | 类型 | 默认值 | | -------- | -------- | -------- | -------- | | name | 健 | string | -- | | value | 值 | number | -- |

Props LabelProps

| 参数 | 说明 | 类型 | 默认值 | | -------- | -------- | -------- | -------- | | show | 是否显示标签 | boolean | false | | color | 文字颜色 | string | #333 | | fontSize | 字体大小 | number / string | 14 | | formatter | 标签内容格式 | string / Function | -- | | edgeDistance | 文字边距 | number | -- | | lineHeight | 文字行高 | number | 20 | | minMargin | 标签之间间距 | number | 10 | | length | 第一段引导线长度 | number | 10 | | length2 | 第二段引导线长度 | number | 20 |

Props SeriesProps

| 参数 | 说明 | 类型 | 默认值 | | -------- | -------- | -------- | -------- | | center | 拼图位置 | string / number / string[] / number[] | -- | | radius | 饼图半径 | string / number / string[] / number[] | -- |

Props LegendComponentOption

API