echart 柱状图上同时显示数值、百分比（多1行代码）

一、先上最终呈现效果图，是否符合君之所求。

二、这一行代码

代码位置：option->series->label

formatter: function(params) {
	return legendData4[params.dataIndex] + '(' + ((legendData4[params
		.dataIndex] /sum4*100)).toFixed(2) + '%)'
}

三、完整代码

DOM代码：

<!--左2 GO-->
<div class="area2">
	<div class="item">
		<div class="tit">
			界别情况
		</div>
		<div class="char" id="char4"></div>
	</div>
</div>

CSS代码：

.area2 {
	width: 100%;
	height: 410px;
	display: flex;
	border-right: 1px solid #1ac9ff;
	margin-top: 20px;
	position: relative;
	.item {
		position: relative;
		padding-left: 30px;
		width: calc(100% - 380px);
		.char {
			width: 100%;
			height: 400px;
		}
		.tit {
			position: absolute;
			top: 10px;
			left: 40px;
			color: #1ac9ff;
			font-size: 18px;
			padding-left: 20px;
		}

	}

}

echart柱状图代码：

let legendData4 = [348, 903, 497, 174, 348, 903, 497, 174, 348, 903, 497, 174, 348, 903, 497, 348,
	903, 497, 174, 348, 903, 497, 174, 348, 903, 497, 174, 348, 903, 497, 174
]
//ES6 强大求和求积
const sum4 = legendData4.reduce((accumulator, currentValue) => {
	return accumulator + currentValue;
});

let option4 = {
	grid: {
		left: '10px',
		right: '60px',
		bottom: '3%',
		containLabel: true
	},
	xAxis: {
		type: 'value',
		boundaryGap: [0, 0.01],
		splitLine: {
			show: false //去掉网格线
		},
		//设置坐标轴字体颜色和宽度
		axisLine: { //这是x轴文字颜色
			show: false,
			lineStyle: {
				color: "#bff7ff",
			}
		},
		axisLabel: {
			show: false,
			interval: 0,
			rotate: 45 // 角度
		}
	},
	yAxis: {
		type: 'category',
		data: ['其他 ', '新的社会阶层人士', '非公有制经济', '公有制经济', '团体', '医药卫生', '司法机关', '党派机关', '人大政协机关', '科学技术',
			'出版传媒', '文化艺术', '普通教育', '高等教育'
		],
		axisTick: { //隐藏刻度
			show: false
		},
		splitLine: {
			show: false //去掉网格线
		},
		//设置坐标轴字体颜色和宽度
		axisLine: { //这是x轴文字颜色
			show: false, //去掉Y轴
			lineStyle: {
				color: "#bff7ff",
			}
		}
	},
	series: [{
			name: '学历界别',
			type: 'bar',
			barWidth: 10,
			data: legendData4,
			label: {
				show: true, //开启显示
				position: 'right', //数值展示的位置
				textStyle: {
					color: '#00ffff',
					fontSize: 13
				},
				//echartjs 2.0 设置显示的数据 echartjs 3.0更简易formatter: '{c},({d}%)'
				formatter: function(params) {
					return legendData4[params.dataIndex] + '(' + ((legendData4[params
						.dataIndex] /sum4*100)).toFixed(2) + '%)'
				}
			},
			itemStyle: {
				emphasis: {
					barBorderRadius: 7
				},
				normal: {
					barBorderRadius: 7,
					//这里是重点
					color: function(params) {
						//注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
						var colorList = ['#006492', '#01d9d8', '#0086ce', '#b78bef', '#006492',
							'#01d9d8', '#0086ce', '#b78bef', '#01d9d8', '#0086ce',
							'#b78bef', '#006492',
							'#01d9d8', '#0086ce', '#b78bef', '#01d9d8', '#0086ce',
							'#b78bef', '#006492',
							'#01d9d8', '#0086ce', '#b78bef'
						];
						var index;
						//给大于颜色数量的柱体添加循环颜色的判断
						if (params.dataIndex >= colorList.length) {
							index = params.dataIndex - colorList.length;
							return colorList[index];
						}
						return colorList[params.dataIndex];
					}
				}
			}
		},
	]
};

以上百分比和数组同时显示问题够用，图表依赖，dom获取这些基础操作就按自身配置的就行。

其他大数据静态模板

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

VUE大数据前端模板【1920*1080】https://www.zeropo.com.cn

↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑