饼图的实现

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

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//偏离距离

上一篇:css进阶八(滤镜)


下一篇:style 变量赋值样式