Echart-饼状图（圆环）pie

以上是类似图

// 定义图表缩放
var clientWidth = document.documentElement.clientWidth;
var chartScale = clientWidth / 720;

var blueRich = {
	total: {
		color: "#fff",
		fontSize: 34 * chartScale,
		align: 'center'
	},
	white: {
		color: "#fff",
		align: 'center',
		fontSize: 22 * chartScale,
		padding: [8 * chartScale, 0]
	},
	hr: {
		borderColor: '#bb5566',
		width: '100%',
		borderWidth: 2 * chartScale,
		height: 0,
	},
	e: {
		// lineHeight: 10,
		height:10* chartScale
	},
}
var chartColor = ['#40D8C6','#27BCE7', '#4649D3', '#15CEB9','#2F99FF', '#71B5F5','#439CF3','#35B7DC','#42D7E9','#439FF8','#58A6EF','#5456D9'];
var pieData = [{
	value: 2154,
	name: '北山街道'
}, {
	value: 3854,
	name: '河东街道'
}, {
	value: 3515,
	name: '文山步行街'
}, {
	value: 3515,
	name: '井冈山大学'
}, {
	value: 3854,
	name: '吉安职业技术学院'
}, {
	value: 2154,
	name: '测试'
}]
var bluePieOption = {
		backgroundColor: 'transparent',
		grid: {
			top: '10%',
			bottom: '10%',
			left: '10%',
			right: '10%',
			containLabel: true
		},
		color:chartColor,
		graphic: [{
			type: 'text',
			left: 'center',
			top: '52%',
			style: {
				text: '1110',
				textAlign: 'center',
				fill: '#fff',
				width: 30,
				height: 30,
				fontSize: 30 * chartScale,
				fontFamily: "Microsoft YaHei"
			}
		},{
			type: 'text',
			left: 'center',
			top: '60%',
			style: {
				text:'合计',
				textAlign: 'center',
				fill: '#fff',
				width: 30,
				height: 30,
				fontSize: 28 * chartScale,
				fontFamily: "Microsoft YaHei"
			}
		}],
		series: [{
			type: 'pie',
			radius: ['45%', '65%'], //将内半径设大显示成圆环图
			center: ['50%', '60%'],
			data: pieData.sort(function(a, b) {
				return b.value - a.value;
			}),
			label: {
			    formatter: function(params) {
			        return (
						// "{b|"+params.name +" }\n{hr|}\n{c|" +params.percent.toFixed(1) +"%}"+" " +"{e|●}"
						"{b|"+params.name +" }\n{hr|}\n{e|●}{c|" +params.percent.toFixed(1) +"%}"
			        );
			    },
				verticalAlign: 'middle',
			    padding: [10, -60],
			    // height: 24 * chartScale,
				rich: {
			        b: {
						lineHeight: 18,
						color: "#fff",
						align: 'center',
						fontSize:18 * chartScale
			        },
			        c: {
						lineHeight: 18,
						color: "#fff",
						align: 'center',
						fontSize:18 * chartScale
			        },
			        e: {
						// lineHeight: 10,
						height:10* chartScale
			        },
					hr: {
						borderColor: '#bb5566',
						width: '100%',
						borderWidth: 2 * chartScale,
						height: 0,
					}
			    }
			},
			labelLine: {
			  normal: {
				show:false,
			    length: 10,
			    length2: 60
			  }
			}
		}]
	};

	var bluePie = echarts.init(document.getElementById('chart'));
	bluePie.setOption(bluePieOption);