在条形图顶部设置值-echarts

Question

如何在 e-charts / ngx-echarts 库中的条形图顶部设置值？让我知道是否存在相同的属性，我无法找到任何属性？

我想要的结果：

到目前为止我能够实现的结果：

组件：-

import {Component, Input, OnInit} from '@angular/core';

declare var echarts: any;
@Component({
 selector:'app-bar-chart',
 templateUrl:'./bar-chart.component.html',
 styleUrls:['./bar-chart.component.css'],
})


export class BarChartComponent implements OnInit{

public barChartData;

ngOnInit() {
let dataAxis = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K','L'];
let data = [200, 180, 190, 233, 219, 203, 110, 250, 160, 130, 120, 263];
this.barChartData  ={
  xAxis: {
    data: dataAxis,
    axisLabel: {
      textStyle: {
        color: 'black'
      }
    },
    axisTick: {
      show:true
    },
    axisLine: {
      show: true
    },
    z: 10
  },
  yAxis: {

    axisLine: {
      show: true
    },
    axisTick: {
      show: false
    },
    handle: {
      show: true
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: 'black'
      }
    }
  },
  tooltip:{
    trigger: 'axis',
    showTip: false,
  },

  series: [
    { // For shadow
      name: 'Total Revenue Cost',
      type: 'bar',
      value: true,
      itemStyle: {
        normal: { color: 'black' }
      },
      barGap: '-100%',
      barCategoryGap: '12%',

      animation: false
    },
    {
      name: 'Total Revenue Cost',
      type: 'bar',
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1,
            [
              { offset: 0, color: '#83bff6' },
              { offset: 0.5, color: '#188df0' },
              { offset: 1, color: '#188df0' }
            ]
          )
        },
        emphasis: {
          name: 'Total Revenue Cost',
          color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1,
            [
              { offset: 0, color: '#2378f7' },
              { offset: 0.7, color: '#2378f7' },
              { offset: 1, color: '#83bff6' }
            ]
          )
        }
      },
      data: data
    }
  ]
}
}
}

模板：-

<div echarts [options]="barChartData" style="height: 199px; width: 825px; margin-left: 1%; margin-top: -65px"></div>

Answer 1

可以在条形系列上配置标签，请参阅文档。

将以下内容添加到您的条形图系列中将显示其顶部的条形图的值：

label: {
    normal: {
        show: true,
        position: 'top'
      }
  }

如果您想显示一些单独的值，您可以配置formatter.