Echarts堆叠柱状图显示百分比

效果图

js代码

//各行业企业分布情况
function showBar1 (x,data) {


	var chart = echarts.init(document.getElementById('bar2'))
	chart.setOption(
		{
			tooltip: {
				trigger: 'axis',
				axisPointer: {            // 坐标轴指示器，坐标轴触发有效
					type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
						
				},
				formatter:function(datas){
					var res = datas[0].name + '<br/>', val;
					let percent = '';
					if(datas[0].value=='0'){
						percent = 0;
					}
					else{
						percent = ((datas[1].value / datas[0].value) * 100).toFixed(2);
					}
					let dotColor0 = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + datas[0].color + '"></span>'
					let dotColor1 = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + datas[1].color + '"></span>'

					res += dotColor0 + datas[0].seriesName  + ": " + datas[0].value  + '</br>';
					res += dotColor1 + datas[1].seriesName  + ": " + datas[1].value  + '</br>';
					res += '覆盖率: '  + percent + '%' + '</br>'
					return res; 

				}
			},
			legend: {
				data: ['企业数', '安责险企业数'],
				textStyle: {
					color: '#97B8C9',
					fontSize: 16

				},
				left: '50%',
				top: '10%',

			},
			grid: {
				top: '30%',
				left: '3%',
				right: '5%',
				bottom: '15%',
				containLabel: true
			},
			dataZoom: [
				{
					show: true,
					bottom: '4%',
					start: 0,
					end: 70,
					height: 20,
					backgroundColor: 'rgba(9,75,127,0.2)',
					fillerColor: '#094B7F',
					borderColor: '#094B80',
					textStyle: {
						color: '#97B8C9'
					}
				}

			],
			xAxis: [
				{
					type: 'category',
					data: x,
					splitLine: {
						lineStyle: {
							color: '#07274D'
						}
					},
					axisLine: {
						lineStyle: {
							color: '#07274D'
						}
					},
					axisTick: {
						lineStyle: {
							color: '#1178C9'
						}
					},
					axisLabel: {
						interval: 0,
						textStyle: {
							color: '#97B8C9',
							fontSize: 14
						},
						formatter: function (v) {
							if (v.length > 5) {
								return v.substring(0, 5) + '...';
							}
							return v;

						}
					}
				}
			],
			yAxis: [
				{
					type: 'value',
					axisLabel: {
						textStyle: {
							color: '#97B8C9',
							fontSize: 16
						}
					},
					axisLine: {
						show: true,
						lineStyle: {
							color: '#07274D'
						}
					},
					axisTick: {
						lineStyle: {
							color: '#1178C9'
						}
					},
					splitLine: {
						show: false
					}
				}
			],
			series: [
				{
					name: '企业数',
					type: 'bar',
					 barGap: '-100%', // Make series be overlap
					// barWidth: '50%',
					yAxisIndex: 0,
					data: data.entNum,
					itemStyle: {
						normal: {
							color: '#199ed8'
						}
					},
					label: {
						normal: {
							show: true,
							position: 'top',
							fontSize: 16
						}
					},barWidth : 35
				},
				{
					name: '安责险企业数',
					type: 'bar',
					yAxisIndex: 0,
					data: data.entBxNum,
					itemStyle: {
						normal: {
							color: '#008000'
						}
					},
					label: {
						normal: {
							show: true,
							position: 'top',
							fontSize: 16
						}
					},barWidth : 35
				}

			]

		}
	)
	$(window).resize(function () {
			chart.resize()
		}
	)
	return chart

}