饼图的实现

2021/10/5 6:14:01

本文主要是介绍饼图的实现,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

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

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



这篇关于饼图的实现的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程