echart 柱状图 背景柱状顶部通过label显示值

效果图

代码

<template>
    <div id="eTask" style="height: 10rem; border: 1px solid red" ></div>
<template/>

<script setup>
  import { onMounted, ref } from 'vue';
  import * as echarts from 'echarts';

  const echartPlanTask = () => {
    const chartDom = document.getElementById('eTask');
    const myChart = echarts.init(chartDom);
    let option;

  option = {
    dataset: [
      {
        dimensions: ['tType', 'tValue', 'tBackgroudValue'],
        source: [
          ['稳定性测试', 41, 52],
          ['性能测试', 52, 52],
          ['冒烟测试', 20, 52],
        ],
      },
      {
        transform: {
          type: 'sort',
          config: { dimension: 'tValue', order: 'asc' },
        },
      },
    ],
    grid: {
      height: '70%',
      top: 20,
      left: 70,
    },
    xAxis: {
      axisLabel: {
        show: false,
      },
      splitLine: {
        show: false,
      },
    },
    yAxis: {
      type: 'category',
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: { interval: 0 },
    },
    series: [
      {
        type: 'bar',
        barWidth: '70%',
        barCategoryGap: '10%',
        itemStyle: {
          borderRadius: 10,
        },
        label: {
          show: true,
          position: 'inside',
        },
        encode: { x: 'tValue', y: 'tType' },
        datasetIndex: 1,
      },
      {
        type: 'bar',
        barWidth: '70%',
        barCategoryGap: '10%',
        z: -1,
        barGap: '-100%',  //背景柱状偏移
        itemStyle: {
          color: '#fff',
          borderRadius: 10,
        },
        label: {
          show: true,
          position: 'right',
        },
        encode: { x: 'tBackgroudValue', y: 'tType', label: 'tValue' },  //背景柱状通过label 显示 tVuale
        datasetIndex: 1,
      },
    ],
  };

  option && myChart.setOption(option);
};


  onMounted(() => {
    echartPlanTask();
  });
</script>