MultiDonutChart 多层环形图
基于 ECharts 的多层环形图组件,支持自定义颜色、尺寸和图例样式。
基础用法
loading
API
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| className | 容器的类名 | string | 'chart' |
| width | 图表宽度 | string | '100%' |
| height | 图表高度 | string | '300px' |
| chartParam | 图表数据对象 | ChartParam | 必传 |
| color | 自定义颜色数组 | string[] | ['#0055FE', '#88DDFF', '#FF749D', '#FCDD69'] |
ChartParam
| 参数 | 说明 | 类型 | 必填 |
|---|---|---|---|
| data | 数据项数组 | ChartDataItem[] | 是 |
ChartDataItem
| 参数 | 说明 | 类型 | 必填 |
|---|---|---|---|
| name | 数据项名称 | string | 是 |
| color | 数据项颜色 | string | 是 |
| tips | 数据项提示文本 | string | 是 |
| value | 数据项数值 | number | 是 |
特性
- 自动排序:数据会自动按值的大小排序,值越大圆弧宽度越大
- 响应式:组件支持窗口大小变化自动重绘
- 自定义图例:支持自定义图例的样式和格式
- 工具提示:鼠标悬停显示详细数据和百分比
注意事项
chartParam是必传参数,必须包含data数组- 数据项中的
color必须指定,因为组件会对数据进行排序 - 组件基于 ECharts 5.x 版本开发
- 建议在组件销毁前调用
dispose()方法清理资源(组件已自动处理)