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