echarts南丁格尔玫瑰图

最新推荐文章于 2025-06-27 16:15:52 发布

java里摸爬滚打的GIS开发人员

最新推荐文章于 2025-06-27 16:15:52 发布

阅读量1.4w

点赞数 2

CC 4.0 BY-SA版权

分类专栏： web前端 js 文章标签： echarts 饼图南丁格尔玫瑰图

本文链接：https://blog.youkuaiyun.com/qq_33801617/article/details/78894391

web前端同时被 2 个专栏收录

8 篇文章

订阅专栏

7 篇文章

订阅专栏

本文展示了如何利用echarts库制作南丁格尔玫瑰图，并提供了自定义样式的示例，通过代码演示实现这一时尚图表的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在做图表的时候，发现南丁格尔玫瑰图很时尚，因此做了个demo。

对于样式自己做了一下修改，重要的地方会注释，以供参考。

当然啦，有兴趣的也可以自己去官网查看API，不说了，上代码

option = {
    title : {
        text: '',
        subtext: '',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        x : 'center',
        y : 'bottom',
		//图例文字样式
        textStyle:{
                	color:'#000',
              		fontSize:14,
              		fontWeight:'700'
          },
        data:['图例1','图例2','图例3','图例4','图例5']
    },
    toolbox: {
        show : false,
    },
    calculable : true,
   color:['#FD6035','#82C730','#FACE2F','#36B6DD','#0084C5'],//自己设置扇形图颜色
    series : [
       
        {
            name:'图例占比',
            type:'pie',
            radius : [30, 110],
            center : ['50%',170],
            roseType : 'radius',
            x: '50%',               // for funnel
            max: 40,                // for funnel
            sort : 'ascending',     // for funnel
            data:[
                {value:40, name:'图例1'},
                {value:30, name:'图例2'},
                {value:25, name:'图例3'},
                {value:5, name:'图例4'},
                {value:2, name:'图例5'}              
            ],
		//标线的属性设置，以及显示的文字
         itemStyle: {
           normal:{
             label:{
             show:true,
             formatter: '{c}次',
            textStyle:{
                	color:'#000',
              		fontSize:14,
              		fontWeight:'700'
                }
               
             },
			 //标线长度，宽度
             labelLine:{
            	show:true,
               length:40,
               lineStyle:{
               	width:2
               }
             }
             },
             emphasis: {
                   shadowBlur: 10,
                   shadowOffsetX: 0,
                   shadowColor: 'rgba(0, 0, 0, 0.5)'
               }
           },
        
        }
    ]
};

结果如图：