炫意html5
最早CSS3和HTML5移动技术网站之一

echarts如何单独设置bar图label位置?

@Kener-林峰 你好,想跟你请教个问题:echarts如何单独设置bar图label位置?具体就是根据数值的大小来设置是否在bar图里显示label

回答

设置柱子(bar)代表的数值显示的位置,由 label 的属性 position 决定, 比如:

  • position: ‘top’, //在支柱上方显示,
  • position:’inside’ //在支柱之内显示,

下列案例,根据数值的大小来决定是否在bar图里显示 label, 比如只显示数值大于 50 柱子的数值。

<html> 
<head>
	<meta charset="utf-8">
	<title>Histogram</title>
</head>
<body>
	<div id="main" style="width:600px;height:300px"></div>
	<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
	<script type="text/javascript">
		require.config({
			paths: {
				echarts: 'http://echarts.baidu.com/build/dist'
			}
		});
		require(
			[
				'echarts',
				'echarts/chart/bar' 
			],
			function(ec) {
				var myChart = ec.init(document.getElementById('main'));
 
				var option = {
					tooltip: {
						show: true
					},
					xAxis: [{
						type: 'category',
						data: ["5", "6", "7", "8", "9","10","11","12"],
						position : 'bottom', 
						name : '月份'
					}
					],
					yAxis: [{
						type: 'value',
						name: '单位(%)'
					}],
					series: [{
						"name": "完成率",
						"type": "bar",
						"data": [88, 47 , 45, 34, 66,78,88,90],
						itemStyle: {	
							normal: {
								label: {
									show: true,
									position: 'top', //在上方显示
									  formatter:function(param){
										if (param.value>50) return param.value;
										else return '';
									},
									textStyle: { //数值样式
										color: 'black',
										fontSize: 16					
									},
								 
								}
							}
						},
					}]
				}; 
				myChart.setOption(option);
			}
		);
	</script>
</body>
</html>

引用来自“tcxu”的评论

设置柱子(bar)代表的数值显示的位置,由 label 的属性 position 决定, 比如:

  • position: ‘top’, //在支柱上方显示,
  • position:’inside’ //在支柱之内显示,

下列案例,根据数值的大小来决定是否在bar图里显示 label, 比如只显示数值大于 50 柱子的数值。

<html> 
<head>
	<meta charset="utf-8">
	<title>Histogram</title>
</head>
<body>
	<div id="main" style="width:600px;height:300px"></div>
	<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
	<script type="text/javascript">
		require.config({
			paths: {
				echarts: 'http://echarts.baidu.com/build/dist'
			}
		});
		require(
			[
				'echarts',
				'echarts/chart/bar' 
			],
			function(ec) {
				var myChart = ec.init(document.getElementById('main'));
 
				var option = {
					tooltip: {
						show: true
					},
					xAxis: [{
						type: 'category',
						data: ["5", "6", "7", "8", "9","10","11","12"],
						position : 'bottom', 
						name : '月份'
					}
					],
					yAxis: [{
						type: 'value',
						name: '单位(%)'
					}],
					series: [{
						"name": "完成率",
						"type": "bar",
						"data": [88, 47 , 45, 34, 66,78,88,90],
						itemStyle: {	
							normal: {
								label: {
									show: true,
									position: 'top', //在上方显示
									  formatter:function(param){
										if (param.value>50) return param.value;
										else return '';
									},
									textStyle: { //数值样式
										color: 'black',
										fontSize: 16					
									},
								 
								}
							}
						},
					}]
				}; 
				myChart.setOption(option);
			}
		);
	</script>
</body>
</html>

万分感谢,我一直在把position的值设为function去操作,一直无法实现,有没有可能不是控制显示隐藏值而是控制label值得位置在inside还是top

炫意HTML5 » echarts如何单独设置bar图label位置?

CSS3教程HTML5教程