前言
扇形的块数对应数据行数
一、基本实现(不需要直角坐标系)
1、数据准备
series:[{
type: 'pie',
data:[
{name:'淘宝',value:1123},
{name:'京东',value:656},
{name:'唯品会',value:1634}
]
2、图表类型
series:[{
type: 'pie'
二、常见效果
1、显示数值
series:[{
label:{//饼图文字的显示
show:true,
formatter:function(arg){
let {name,value,percent} = arg
}
2、圆环的设置
series:[{
//radius:20//半径
//radius:'20%'//百分比参照echart图的宽高较小者的一半
radius:['50%','75%']
3、南丁格尔图(半径不一样)
series:[{
roseType:'radius'
4、选中效果(选中的区域偏离圆点一小段距离)
series:[{
selectedMode:'single',//multiple
selectedOffset: 30//偏离距离
5、圆环图中间位置生成几排带变量的文字
graphic --原生图形元素组件
type: group -唯一的可以有子节点的容器
text、img、circle、ring、reat、line
graphic: {
type: 'group',
// width、height外层图形元素所占图表的比例,用于给children中子元素的top、left定位
width: '50%',
height: '50%',
// left、top外层图形元素相对图表的位置,也可以用百分数
left: 'center',
top: 'center',
children: [
{
type: 'text',
top: '20%',
left: '10%',
style: {
text: `${this.title}`,
fill: '#fff',
fontSize: 14
}
},
{
type: 'text',
top: '40%',
left: '10%',
style: {
text: `${this.subtitle}`,
fill: '#fff',
fontSize: 12
}
}
]
}