博客

先看下实现之后的效果：

饼图的分隔线：实际上是通过给边框宽度和边框色实现的

series:[
	itemStyle:{
            // 间隔
              borderWidth:2,
              borderColor:'#000'
          }
]

图例的位置、间距：

legend:{
		//纵向
 		orient: 'vertical',
        top: '40%',
        left: '67%',
        //图例距离饼图的距离
        itemGap: 40,
        itemWidth: 14,// 设置图例图形的宽
        itemHeight: 14
}

图例的图形：（因为我写的图形是环形 不是官网自带的，需要给图例颜色设置为透明色，加上边框宽度，由于每个图形颜色不同，所以需要单独设置 ）

legend: {
		//图例里 每条数据里的名字和图形颜色
        data:[
            {
                value: 25,
                name: '立项',
                itemStyle:{
                	borderColor:"#0ba5ff"
                }
                
            },
            {
                value: 8, 
                name: '验收',
                itemStyle:{
                	borderColor:"#fcd501"
                }
                
            },
            {
                value: 4, 
                name: '归档',
                itemStyle:{
                	borderColor:"#596c7a"
                }
                
            }
        ],
	//icon类型：'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
     icon: "circle",
     //全部样式
     itemStyle:{
            color:"transparent",
            // 间隔
            borderWidth:2
        },
  }

图例后面带数据：

formatter: function(name) {
          var index = 0;
           var clientlabels = ['  立项','  验收','  归档'];
           var clientcounts = [25,8,4];
           clientlabels.forEach(function(value,i){
               if(value == name){
                   index = i;
               }
           });
           return name + "                     " + clientcounts[index];
       }

全部代码：

option = {
    title: {
        text: '项目阶段情况',
        left: 'center',
        top:"48%",
        textStyle:{
                fontSize: 26,
                fontWeight:"normal",
                width:30,
                height:60
            },
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        data:[
            {
                value: 25,name: '立项',
                itemStyle:{
                    borderColor:"#0ba5ff"
                }
                
            },
            {
                value: 8, name: '验收',
                itemStyle:{
                    borderColor:"#fcd501"
                }
                
            },
            {
                value: 4, name: '归档',
                itemStyle:{
                    borderColor:"#596c7a"
                }
                
            }
        ],
        textStyle:{
          fontSize:18  
        },
        itemStyle:{
            color:"transparent",
            // 间隔
            borderWidth:2,
            // borderColor:"#0ba5ff"
        },
        orient: 'vertical',
        top: '40%',
        left: '67%',
        itemGap: 40,
        itemWidth: 14,// 设置图例图形的宽
        itemHeight: 14,
        //icon类型：'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
        icon: "circle",
        formatter: function(name) {
                                var index = 0;
                                var clientlabels = ['立项','验收','归档'];
                                var clientcounts = [25,8,4];
                                clientlabels.forEach(function(value,i){
                                    if(value == name){
                                        index = i;
                                    }
                                });
                                return name + "                     " + clientcounts[index];
                            },
        // 图例关闭后的描边颜色
        inactiveColor:"pink"
    },
    series: [
        {
            name: '项目阶段情况',
            type: 'pie',
            radius: ['36%', '30%'],
            // 标签不会重叠
            avoidLabelOverlap: true,
            label: {
                show: false,
                position: 'center'
            },
            // 选中时候的样式
            emphasis: {
                label: {
                    show: false,
                    fontSize: '40',
                    fontWeight: 'bold'
                }
            },
              itemStyle:{
                // 间隔
                borderWidth:3,
                borderColor:'#000'
            },
            labelLine: {
                show: true
            },
            data: [
                {value: 25,name: '立项',itemStyle:{color:"#0ba5ff"}},
                {value: 8, name: '验收',itemStyle:{color:"#fcd501"}},
                {value: 4, name: '归档',itemStyle:{color:"#596c7a"}}
            ]
        }
    ]
};