echarts横向柱状图显示百分比

要在 ECharts 中显示横向柱状图的百分比，可以使用 ECharts 的 formatter 函数来对数值进行格式化。下面是一个简单的示例代码：

var option = {
  xAxis: {
    type: 'value',
    axisLabel: {
      formatter: '{value}%'
    }
  },
  yAxis: {
    type: 'category',
    data: ['A', 'B', 'C']
  },
  series: [{
    type: 'bar',
    data: [50, 75, 90],
    label: {
      show: true,
      position: 'right',
      formatter: '{c}%'
    }
  }]
};

在上面的代码中，xAxis 的 axisLabel.formatter 使用了 `{value}%` 的格式化字符串来显示百分比。而在 series 中，使用了 label 的 formatter 选项来对柱状图的数值进行格式化。`{c}%` 表示将 label 中的数值 `{c}` 加上百分号 `%`。

通过这种方式，就可以在 ECharts 中显示横向柱状图的百分比了。

相关问题

echarts横向柱状图顶部怎么显示百分比

你可以通过设置tooltip的formatter属性来在echarts横向柱状图顶部显示百分比。具体步骤如下：
1. 在tooltip的formatter属性中设置一个函数，参数为params数组。
2. 在函数中使用params数组的value属性获取柱状图的值。
3. 计算百分比，可以通过将当前值除以总值并乘以100来得到百分比。
4. 将百分比拼接到tooltip的返回字符串中，即可在顶部显示百分比。

以下是一个示例代码：

option = {
    // 其他配置项...
    tooltip: {
        formatter: function(params) {
            var percent = (params.value / totalValue * 100).toFixed(2); // 计算百分比
            return params.name + ': ' + params.value + ' (' + percent + '%)';
        }
    },
    // 其他配置项...
};

// 其他代码...

echarts横向柱状图柱子顶部怎么显示百分比

要在ECharts横向柱状图的柱子顶部显示百分比，你可以通过自定义label来实现。具体步骤如下：

1. 首先，在每个柱子的series配置项中，设置`label.show`为`true`，表示显示标签。
2. 接着，在`label`配置项中，设置`formatter`为一个回调函数，用于格式化标签文本。
3. 在`formatter`回调函数中，可以使用`params.value`获取柱子的值，然后根据需要进行格式化，并返回格式化后的文本。

以下是一个示例代码片段来演示如何实现：

option = {
    // 其他配置项...
    series: [{
        type: 'bar',
        data: [30, 50, 70, 60, 90],
        label: {
            show: true,
            formatter: function(params) {
                var percent = ((params.value / 100) * 100).toFixed(2); // 计算百分比并保留两位小数
                return percent + '%';
            }
        }
    }]
};