一:说明: 南丁格尔玫瑰图饼图组件
npm install @czty/lchartpie一:说明:
南丁格尔玫瑰图饼图组件
二:使用:
npm i @czty/lchartpie
import React from 'react';
import Lchartpie from '@czty/lchartpie';
const MyComponent = () => {
return (
configer={
x: 0,
y: 0,
clazz : '',
params : {},
url: '',
method: 'get',
data: [
{
"cityName": "杭州",
"num": 3
},
{
"cityName": "湖州",
"num": 1
}
],
width: '400px',
height: '200px',
color: ['#6236ff', '#b620e1', '#2fc25a', '#f9cc14', '#ef4864', '#3096fa', '#e9693e', '#83a5c5', '#f89393', '#51daca', '#81daca'],
title: '减分登记项目占比',
radius: [50, 90],
center: ['66%', '50%'],
tooltipShow: '是',
legendIcon: 'roundRect',
legendTop: 40,
xField: 'cityName',
yField: 'num',
options: {}
}
/>
)
}
三:字段说明
x:
y:
clazz: 可添加的组件的className
params: 请求的传参参数
url: 请求的url地址
method: 请求方式
width: 组件的整体宽度
height: 组件的整体高度
data:数据
color:饼图颜色
title:饼图标题
radius:饼图半径大小
center: 饼图位置
tooltipShow:饼图tooltip是否显示
legendIcon:饼图图例Icon类型 //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
legendTop:饼图图例top值
xField:饼图数据x轴字段
yField:饼图数据y轴字段
options:饼图option选项