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的，但通過相關技巧，是可以實現類似效果的，只看你能不能想到了