在条形图上设置值 - 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

可以在条形图系列上配置标签，请参见documentation。

在条形系列中添加以下内容将在其顶部显示条形值：

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

如果要显示一些单独的值，可以配置formatter。