饼图的实现

前言

扇形的块数对应数据行数

一、基本实现(不需要直角坐标系)

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
            }
        }
    ]
}