echarts 横向柱状图 顶部数字显示两个值

Echarts横向柱状图是一种数据可视化方式，可以将数据以直观、易懂的方式呈现给用户。该图形的顶部数字可以显示两个值，方法如下：

1. 设置顶部数字的样式。如下面的代码所示，可以通过 textStyle 属性来设置数字的样式，包括文字颜色、字体大小、字体类型等。

itemStyle: {
normal: {
color: '#60906D',
},
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
},
label: {
normal: {
show: true,
position: 'inside',
textStyle: {
color: '#fff',
fontSize: 14,
fontFamily: 'Microsoft YaHei',
},
},
}

2. 显示两个值。可以通过 formatter 属性来对顶部数字进行格式化，使其显示两个值。如下面代码所示，可以将提示框中的字段值转化成一个数组，然后在格式化函数中获取这个数组中的两个值并进行显示。

tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
formatter: function (params) {
var res = params[0].name + '<br/>';
for (var i = 0, l = params.length; i < l; i++) {
var arr = params[i].value;
res +=
'<br/>' +
params[i].seriesName +
'：' +
arr[0] +
', ' +
arr[1] +
'<br/>';
}
return res;
},
}

以上就是如何在Echarts横向柱状图中通过设置样式和格式化来实现顶部数字显示两个值的方法。