ECharts学习--饼图

（一）饼图

饼图又称圆饼图、圆形图等，它是利用圆形及圆内扇形面积来表示数值大小的图形。饼图主要用于总体中各组成部分所占比重的研究。

<div style="width: 200px;height: 200px;"></div>
<script>
    var mChart = echarts.init(document.querySelector('div'));
    // 饼图的数据需要的是数组，数组中包含一个一个的对象，每一个对象需要name和value
    var data = [{name :'淘宝',value:1000},{name :'拼多多',value: 3000},{name : '京东',value: 500},{name : '当当',value: 300}]
    var option = {
        series : {
            type: 'pie',
            data: data
        }
    }
    mChart.setOption(option)
</script>

（二）饼图的常见效果

（1）显示数值：label下fromatter

label : {
    show :true,
    formatter : function (arg){
        console.log(arg);
        return `${arg.name}${arg.percent}%`
    }
}

（2）圆环：radius

// radius : '60%', // 饼图的半径 (视图的宽或高较小边的作为参照)
// radius : 50 // 饼图的半径 (视图的最小边)
radius : ['60','80'] // 第0个元素代表的是内圈的半径，第一个元素代表的是外圆的半径

（3）南丁格尔图：roseType 半径和数值有关

roseType : 'radius',
// selectedMode : 'single', // 选中的效果，能将选中的区域偏离原点一小段距离(一个)
selectedMode : 'multiple', // 选中的效果，能将选中的区域偏离原点一小段距离（多个）
selectedOffset : 20 // 偏离的距离