echarts中实现多个label

先来个效果图

如果你刚好需要实现这种效果，那么可以瞅一瞅了

我要开始水文了

如图所示，图中顶部部分文字乍一看好像是独立于柱状图，显示在最顶上，其实它也是由柱状图模拟而成. 只是吧图形相关属性做了隐藏，视觉上达到独立于图外

代码正文来了

{
  // 不给name赋值，legend不会显示
  // name:'',
  type: 'bar',
  // 隐藏当前数据在tootip中的显示，外层需要给tootip才能生效
  tooltip: {
    show: false
  },
  emphasis: {
    focus: 'series'
  },
  label: {
    show: true,
    // label位置显示内部靠下
    position: 'insideBottom',
    color: '#fff',
    fontSize: 12,
    formatter: (params) => {
      // 此处是重点，根据自己的需求，获取需要显示的总数
      // return sum[params.name];
      return '';
    }
  },
  itemStyle: {
    // 底色保持跟图形背景色一致，达到视觉上像独立于外面
    color: '#090C15'
  },
  // 放在相关的组上
  stack: 'a',
  // 数值随便给就行，为了宽度最小建议给1，这样渲染出来就不会占什么位子
  data: [1, 1]
}

通过js将上文的相关配置项放到series中相应的位置即可，如：是一条的堆叠柱状图，直接push在最后即可，多条的堆叠柱状图，需注意要放在显示的堆叠图的最上面一个

总结下吧

echarts本身是没提供显示多个label的，但通过相关技巧，是可以实现类似效果的，只看你能不能想到了