Echarts数据可视化--特殊饼图2

数据可视化开发过程中，经常会遇到比较特殊的图表。现在简单介绍遇到过的特殊饼图-1的做法：

1、HTML代码：

<div class="wrap">
    <div id="echarts"></div>
    <div id="echarts2"></div>
</div>

2、CSS代码：

.wrap {
    height: 800px;
    position: relative;
    width: 800px;
}
#echarts ,#echarts2{
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
}

3、JS代码：

var myChart = echarts.init(document.getElementById('echarts'));
var myChart2 = echarts.init(document.getElementById('echarts2'));
var option = {
    'tooltip': {
        'trigger': 'item',
	'formatter': "{a} <br/>{b}: {c} ({d}%)"
    },
    'series': [
	{
	    'name':'访问来源',
	    'type':'pie',
	    "color": ['#133379', '#e06a17', '#b09710', '#7a5a32', '#22ab39'],
	    'radius': ['45%', '50%'],
	    'avoidLabelOverlap': false,
	    'label': {
		'normal': {
			formatter: function(params, ticket, callback) {
				return '' + params.data['name'] + '\n' + params.data['name'] + '%';
			},
			'show': true,
			'textStyle': {
		             'fontSize': '12',
		             'color': '#000'
		         }
		},
		'emphasis': {
		     'show': true,
		     'textStyle': {
		         'fontSize': '30',
		         'fontWeight': 'bold'
		      }
		 }
	    },
	    'labelLine': {
		'show': true,
		'normal': {
			'lineStyle': {
				'width': 2
			},
			'smooth': 0.2,
			'length': 50,
			'length2': 50
		}
	    },
	    'data':[
		{'value':30, 'name':'流量原因'},
		{'value':20, 'name':'天气原因'},
		{'value':20, 'name':'空管原因'},
		{'value':20, 'name':'机场原因'},
		{'value':10, 'name':'其他原因'}
	    ]
	}
    ]
};
myChart.setOption(option);

// *************************************
var option2 = {
    'title': {
	'text': '',
	'subtext': '',
	'left': 'center',
	'top': '35%',
	'textBaseline': 'top',
	'textStyle': {
		'fontSize': 12,
		'color': '#fff',
		'fontFamily': 'Digiface'
	},
	'subtextStyle': {
		'fontSize': 16,
		'color': '#f3be2c'
	}
    },
    'tooltip': {
	'show': true,
	'position':[0,0],
	'trigger': 'item',
	'formatter': '{b}: {c} ({d}%)'
    },
    'grid': {
	'left': 0,
	'top': 0,
	'bottom': 0,
	'right': 0
    },
    'series': []
};
var staticData = {
	'pieData': 100,
	'traffic': 30,
	'weather': 20,
	'blank': 20,
	'airport': 20,
	'other': 10
};
function makeLabelData(data) {
    let seriesData = {
        'hoverAnimation': true,
	'avoidLabelOverlap': true,
	'name': '计划',
	'type': 'pie',
	'data': [],
	'itemStyle': {
	    'normal': {
	        'borderWidth':2,
	         'borderColor': '#050f33'
	    }
	},
	radius': ['35%', '50%'],
	'label': {
	    'normal': {
	        'position': 'inside',
	        'show':false,
	    }
	}
    };
    let labelData = [];
    if(data.pieData) {
        const totalNum = data.pieData;
	const trafficNum = data.traffic;
	const weatherNum = data.weather;
	const blankNum = data.blank;
	const airportNum = data.airport;
	const otherNum = data.other;
	for (let i = 0; i < 100; i++) {
	    labelData.push({
		'value': 1,
		'name': '计划' ,
		'itemStyle':{
			'normal': {
			'color': "#74778a"
		    }
	        }
	    });
	}
	for (let k = 0; k < trafficNum; k++) {
	    labelData[k] = {
		'value': 1,
		'name': '流量原因' ,
		'itemStyle':{
		    'normal': {
			'color': "#133379"
		    }
		}
	    };
	    seriesData.name = '流量原因';
	}
	for (let j = 0; j < weatherNum; j++) {
            var weatherIndex = trafficNum + j;
	    labelData[weatherIndex] = {
		'value': 1,
		'name': '天气原因' ,
		'itemStyle':{
		    'normal': {
			'color': "#e06a17"
		    }
		}
	    };
	    seriesData.name = '天气原因';
	}
	for (let l = 0; l < blankNum; l++) {
            var blankIndex = trafficNum + weatherNum + l;
	    labelData[blankIndex] = {
	        'value': 1,
	        'name': '空管原因' ,
		'itemStyle':{
		    'normal': {
			'color': "#b09710"
		    }
		}
	    };
	    seriesData.name = '空管原因';
	}
	for (let m = 0; m < airportNum; m++) {
            var airportIndex = trafficNum + weatherNum + blankNum + m;
	    labelData[airportIndex] = {
		'value': 1,
		'name': '机场原因' ,
		'itemStyle':{
		    'normal': {
			'color': "#7a5a32"
		    }
		}
	    };
	    seriesData.name = '机场原因';
	}
	for (let n = 0; n < otherNum; n++) {
	    var otherIndex = trafficNum + weatherNum + blankNum + airportNum + n;
	    labelData[otherIndex] = {
	        'value': 1,
		'name': '其他原因' ,
		'itemStyle':{
		    'normal': {
		        'color': "#22ab39"
		    }
	        }
	    };
	    seriesData.name = '其他原因';
	}
	seriesData.data = labelData;
    }
        console.log(seriesData);
	return seriesData;
}
var seriesData = makeLabelData(staticData);
option2.series.push(seriesData);
myChart2.setOption(option2);

4、效果图：

另外，由于单独用echarts实现，这种效果不太好实现，所以用了两张图叠在了一起。