echart柱状图上面数值不显示

要让 ECharts 柱状图上的数值显示出来，可以在 `series` 中的每个数据项中添加 `label` 属性，并设置 `show` 属性为 `true`，如下所示：

option = {
  // ... 其他配置
  series: [{
    type: 'bar',
    data: [10, 20, 30, 40, 50],
    label: {
      show: true,
      position: 'top' // 可以设置显示位置
    }
  }]
};

在上面的代码中，`label` 属性中的 `position` 属性可以设置显示位置，可以选择在柱子的顶部、中间或者底部显示数值。如果需要更加详细的控制，可以使用 `formatter` 属性自定义数值显示内容。

相关问题

echart柱状图设置柱子上显示柱子的数值

在ECharts中创建柱状图并显示每个柱子上的数值，通常需要结合`dataLabels`选项来实现。数据标签可以将指定的数据值添加到图形上，如柱子、折线等上方或下方。以下是基本步骤：

1. 首先，在配置`series`时，为你要显示数值的柱子设置`type`为`bar`，这是柱状图的基础。

var option = {
    series: [{
        name: '销量', // 标题
        type: 'bar', // 柱状图
        data: [5, 20, 36, 10, 10, 20], // 数据数组
        dataLabels: { // 显示数据标签
            show: true,
            position: 'top', // 数据标签的位置，可以选择'top'、'bottom'、'inside'等
            formatter: function (params) { // 自定义数据格式化函数
                return params.data; // 返回柱子的数值
            }
        }
    }]
};

2. `formatter`函数用于定制数据标签的内容，这里直接返回了柱子的数值。

3. 最后，你可以通过`echarts.setOption(option)`来初始化图表，并显示带数值的数据标签。

vue echart柱状图怎么在每条柱上面显示数值

要在 Vue Echarts 柱状图的每条柱上显示数值，可以通过设置 Echarts 的标签（label）属性来实现。以下是一个示例代码：

在 Vue 组件中的模板部分：

<template>
  <div>
    <div ref="chart" style="width: 600px; height: 400px;"></div>
  </div>
</template>

在 Vue 组件中的脚本部分：

import echarts from 'echarts';

export default {
  mounted() {
    // 假设原始数据为 data，其中 data 为对象数组，每个对象包含 name 和 value 属性
    const data = [
      { name: 'A', value: 10 },
      { name: 'B', value: 30 },
      { name: 'C', value: 20 },
    ];

    // 创建 Echarts 实例
    const chart = echarts.init(this.$refs.chart);

    // 设置图表配置项
    const options = {
      xAxis: {
        type: 'category',
        data: data.map(item => item.name),
      },
      yAxis: {
        type: 'value',
      },
      series: [{
        type: 'bar',
        data: data.map(item => ({
          value: item.value,
          label: {
            show: true,
            position: 'top',
          },
        })),
      }],
    };

    // 渲染图表
    chart.setOption(options);
  },
};

在上述示例中，我们在设置柱状图的数据时，将每个柱的值和标签一起设置。通过设置 `label` 属性的 `show` 为 `true`，并指定 `position` 为 `'top'`，即可在每条柱的顶部显示数值。

请注意，上述示例仅供参考，具体的实现方式可能会根据你的具体需求和数据结构有所不同。