echarts柱状图悬浮显示值

要实现echarts柱状图悬浮显示值，可以使用echarts的tooltip组件。具体步骤如下：

1. 在option中配置tooltip组件，设置trigger为'axis'，axisPointer为'type:shadow'：

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  // 其他配置项
};

2. 在series中配置itemStyle，设置normal状态下的样式和emphasis状态下的样式：

option = {
  series: [{
    name: '柱状图',
    type: 'bar',
    itemStyle: {
      normal: {
        color: '#409EFF',
        label: {
          show: true,
          position: 'top'
        }
      },
      emphasis: {
        color: '#67C23A',
        label: {
          show: true,
          position: 'top'
        }
      }
    },
    data: [10, 20, 30, 40, 50]
  }],
  // 其他配置项
};

其中，normal表示正常状态下的样式，emphasis表示鼠标悬停时的样式。在样式中设置label.show为true，表示显示标签；设置label.position为'top'，表示标签显示在柱状图的顶部。

3. 在data中添加label属性，设置每个柱子的标签：

option = {
  series: [{
    name: '柱状图',
    type: 'bar',
    itemStyle: {
      normal: {
        color: '#409EFF',
        label: {
          show: true,
          position: 'top'
        }
      },
      emphasis: {
        color: '#67C23A',
        label: {
          show: true,
          position: 'top'
        }
      }
    },
    data: [
      { value: 10, label: '10' },
      { value: 20, label: '20' },
      { value: 30, label: '30' },
      { value: 40, label: '40' },
      { value: 50, label: '50' }
    ]
  }],
  // 其他配置项
};

在data中每个柱子的数据项中添加label属性，设置标签值。这样，当鼠标悬停在柱状图上时，就会显示对应柱子的标签值了。

完整代码示例如下：

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    name: '柱状图',
    type: 'bar',
    itemStyle: {
      normal: {
        color: '#409EFF',
        label: {
          show: true,
          position: 'top'
        }
      },
      emphasis: {
        color: '#67C23A',
        label: {
          show: true,
          position: 'top'
        }
      }
    },
    data: [
      { value: 10, label: '10' },
      { value: 20, label: '20' },
      { value: 30, label: '30' },
      { value: 40, label: '40' },
      { value: 50, label: '50' },
      { value: 60, label: '60' },
      { value: 70, label: '70' }
    ]
  }]
};