echarts bar图表实现多个label显示

在ECharts中，Bar 图表支持在每个柱子上添加多个标签来显示详细信息。为了实现这个功能，你需要在数据配置中包含每个柱子对应的 label 数据，并设置适当的 options。以下是基本步骤：

1. **初始化 ECharts 实例**:
首先，引入 echarts.js 文件并创建一个新的实例。

var myChart = echarts.init(document.getElementById('main'));

2. **设置 Bar 图表数据**:
定义一个包含 x 轴值、y 轴值以及对应的 label 的数据数组。

var data = {
  categories: ['A', 'B', 'C', 'D', 'E'], // 柱子类别
  values: [10, 20, 30, 40, 50], // 柱子高度
  labels: [
    { value: 'Label A1', position: 'left' },
    { value: 'Label B2', position: 'right' },
    { value: 'Label C3', position: 'top' },
    { value: 'Label D4', position: 'bottom' },
    { value: 'Label E5', position: 'inner top' }
  ]
};

3. **配置 Bar 图表选项**:
设置 `series` 中的数据项，包括 `type` 为 `bar` 和 `data` 为上面定义的数据数组，同时配置 `label` 的相关属性。

var option = {
  xAxis: {
    data: data.categories
  },
  yAxis: {},
  series: [{
    type: 'bar',
    data: data.values,
    itemStyle: {
      normal: {
        label: {
          show: true,
          position: 'insideTop', // 可以自定义位置，如上面示例中的 'inner top'
          formatter: function (params) {
            return params.name + '<br>' + params.data.labels[params.dataIndex].value;
          } // 格式化函数返回完整的标签内容
        }
      }
    }
  }]
};

4. **渲染图表**:
将配置好的选项应用到图表上。

myChart.setOption(option);