echarts柱状图值为0时不显示以及柱状图百分比展示
在ECharts中,柱状图的显示可以通过设置label
的show
属性来控制值为0的柱子是否显示。对于显示百分比,可以在label
中设置formatter
函数来自定义显示的内容。
以下是一个简单的例子,演示了如何在ECharts柱状图中处理值为0的情况以及显示百分比:
var myChart = echarts.init(document.getElementById('main'));
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 0, 80],
type: 'bar',
label: {
show: true,
position: 'top',
formatter: function(params) {
// 只在值不为0时显示百分比
if (params.value === 0) {
return '';
} else {
// 计算百分比并保留两位小数
var total = params.seriesData.reduce(function(sum, item) {
return sum + item.value;
}, 0);
var percent = ((params.value / total) * 100).toFixed(2) + '%';
return percent;
}
}
}
}]
};
myChart.setOption(option);
在这个例子中,柱状图的数据中有一个值为0的项('C')。通过label
的formatter
函数,我们实现了只在数据不为0的情况下显示百分比。如果数据项的值为0,则不显示该项的百分比。
评论已关闭