1.0.1 • Published 3 years ago
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