# 内容配置-饼图
# 数据格式
接口配置的数据格式：【系统管理】-【接口管理】-【接口配置】菜单编辑
配置的假数据和接口返回数据格式必须正确,rest接口必须返回json格式,webservervice接口返回xml格式,如格式不正确将无法正确显示
rest接口json格式假数据示例:
// 对应【编辑接口】中的【参数字段】
{
"code": "200",
"data": [{
"value": 1048,
"name": "中央区"
},
{
"value": 735,
"name": "西北区"
},
{
"value": 580,
"name": "东南区"
},
{
"value": 280,
"name": "正北区"
},
{
"value": 50,
"name": "地下室"
}
]
}
如果要设置某一块饼图为选中状态，如示例图中那样，则需要在返回的参数中添加 selected 字段并设置为 true。 如
{
"code": "200",
"data": [{
"value": 1048,
"name": "中央区",
"selected": true
},
{
"value": 735,
"name": "西北区"
},
{
"value": 580,
"name": "东南区"
},
{
"value": 280,
"name": "正北区"
},
{
"value": 50,
"name": "地下室"
}
]
}
# 数据源配置
参照数据源配置。
# 过滤配置
参照过滤配置。
# 包装配置
参照包装配置。
# 基础设置
饼图基础设置里面选择对应的字段映射关系，即可渲染成图形。
- 图表宽度: 设置整个饼图组件的宽度
- 数值字段: 根据接口配置的出参，设置对应饼图组件中数值的 key，echarts 本身使用的数值字段为 value
- 名称字段: 根据接口配置的出参，设置对应饼图组件中名称的 key，echarts 本身使用的数值字段为 name
- 值列 id: 该条数据的唯一 id
# 标题设置
参照图表公共配置项-标题设置。
# 副标题设置
# 图例设置
参照图表公共配置项-图例设置。
# 饼图设置
用于对饼图的展示做配置，其中内外半径需要开启环形时才可使用。
- 是否为环形
- 内半径
- 外半径
- 展示为南丁格尔玫瑰
- 扇区是否顺时针排布：默认逆时针排布
- 最小扇区角度：最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互。
- 展示标签的最小角度：最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互。
- 显示 0 扇区：是否在数据和为 0（一般情况下所有数据为 0） 的时候仍显示扇区。
# 文本标签设置
- 是否展示
- 文字大小
- 文字颜色
- 文字粗细
- 标签位置
# 链接跳转设置
# 自定义属性设置
# 饼图常见问题
当数据全部为 0 时，会均分饼图，产生歧义，可以在自定义属性中进行如下配置解决：
function(option,resp){
if(resp[0].data.filter(item => item.value == 0).length == resp[0].data.length){
option.series[0].radius = ['50%', '50%'];
option.series[0].label.show= false;
option.series[0].emphasis= {
scale: false
};
option.series[0].itemStyle = {
borderColor: '#ccc',
borderWidth: 3,
borderType: 'solid'
}
}
return option
}
解决效果如下：
