炫意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位置?

Java基础教程Android基础教程