原创

echarts南丁格尔玫瑰图

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_33801617/article/details/78894391

在做图表的时候,发现南丁格尔玫瑰图很时尚,因此做了个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)'
               }
           },
        
        }
    ]
};
                    
结果如图:



展开阅读全文

没有更多推荐了,返回首页

博客模板©2019 由CSDN提供 模版主题为:skin3-template by CSDN官方博客 设计