echarts柱状图顶部设置倾斜并且展示数字

将下面代码直接复制粘贴在此运行就能查看效果Apache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。https://echarts.apache.org/examples/zh/editor.html?c=area-pieces&code=MYewdgzgLgBAtgTwMoAsCGAHApjAvDAbwCgYYAPALhgAYAaEmBKuhgdwEsATKFKgRgDMMAPTDAL6mBd2KIBfANxFRMQBt-gNiVAZ7qBy-UBG6UVCRYASTDAANuzBZOAJRAgAZgCE0AJzwwswdM6gQAdAHNnTBR2YF8sMigsME5UTCwACmJSCHRsKkQ47HpSACMAV3YTTgAFNB4qO3zjKHZwGATgKDJaGFT4gEpCBlJFYDQwADc0CEAYf_bsQHozQDm5YHzoEDhAAnlAU0VAELcemD1ocgBBMnYIEpBzWHwJrF8yfcPj0_lSUm3YYGo3AG0Lq9avhABdB6PZ5bPgfL5kGAAWhgfAA7D80pcEFCYdQAZtgcAAEwfa4HI4nMBQd5olFw1p426E4l8P7ox5bcA7YBCfDvSkE04kv4Um6convWn0oHNTakXxwECDLAAFRAjWo3Nar0Ffw6YpgvjMFjljT4SpBqvVDPF2tl8uxBsttONJq15nNjQEVudNo1vlMIAgWDKPASHUB0hkAaIHi8PgCQQwITCziw_kOUWcWUSAHIjKYHdZbI4XKnWhmzdn7E5nCGQBhavV8MkYLk0MAANaBEDVTgAYRAJhAzioqYAxHwsAJYQBWABs-YYoG7vZg7wHuSxsKwABZV6meQwoLYTLUMFRaykUCBWFQoM58lgco8L-x_P4sHPU2h8VOGa-qacn4eNVAEOkMCpu0nCnqmmzSDeTzgHYDrnpe16bFEkRIP-JhYL-JowHY4BQEg7AAF4YTCq4QVB2E9nA5RJlQCQYC4aBwBAXS4AAfN0WHDK4UAuG49FBEx3KAgyPCHL4rA9o2MoATg-A8c4vhgIxWDCY8cZQPkzhgDA8mKcpMAANRATAfaGUBAA8uTOMIrGpmZunDCYV6qUGpCQQw6GPjEmG3hWVCjuR7BRHAADqXAVDC46BcFAASWD3igUBUAAHOR6F2ElQHANESbvo89GcJw5j-Mw5HIXhaHEUeQJdj2fb9nYjV5QyOFEvhRH8Ku5GkAVRVgCV85Yq0dA0MNfxkZsnDlGgVALpwWCSnwfBYlim4MO5pCBFwPnQUSaDmAAMmguRYCY8FXmlWAZaVmy5CAUA7nAN0Mhw3C8EBfDUNQACkzUwCg8X-IlfbJaOv3rTeHI7TpMl9v0UT-D2CB_Z-EAHXBHEmqkp7nYhWFmqhCDodDL3he9fDdTVs59s4_i5AkWKjgFMCM8zrPDb4o4dOBWGuY8G2PKjR0nWdmMMtjZ46QhlPfs4jnPSazj3eUxECCwWHlYTxNiyaM51UBDVNZTpCtXhhHEctGp8255EQBgZhQOjFgk20J6S3YaAmN6lME5VLvQdTQG0_T7Ms0zrSh9QvgCNzxsw4BqZTaklh_aTb38FbE0fviMqhI2LsS5UnvelnjxTTxs1bgyBHodKoufRDDAIHy0P_gnjlXn9SlwMRqZ_XA5gK6QqO502Bdu0XXtYKXw_4sLp0u5rfs6wyevPobdip48pvtRbWKZwyAspPbQVO1VGqF1LF0ar7RPn1hAf66mwcM-HYds2_Ucx1vpBt73ScA04D_GAr0IpR1hAffm5EhYY2qseHG2Fi54xNLfbWcCqZPxfqOIaMJBAR1HNQbmkCbabG7rKCIFU74uzXvVRqm9KY73NvwccEFG4pCfOwLAEBZqbHQX_OG8xHpbzIX2eai1lqrRlsFLW98H53WcPNZwnZA6LmXGuDccd5GKLCunGEccaEGyXCudcwCwCUU9v7R4Winw6IinwDUbkraUzjDEJ8Bhgq0X4oxCArRMDsBYuxdBu0djdnhnUbS-A_EelsAohI7wokd0SIQ3xGB2C-ESQkPgHQ1SqVXkyWAZBQnlHCW4KJoAeycDiQkz2V4EjJJoDkhxMB1KaW0kE28sMgKFizDYEseY47HniJYj8qSBmPDIAANRqcRapTkkkdDGaQBAUy5lUFmbUrJizyBUCKVWMA3IzKfS2UwGAuzwmqi2RyO4RJZqFJAGE8AByjJHPIGcx5QomkkIfo8aAVCV4P1giYUWFhWDuE8C4CMgRgihF8GfFwABxIIRUcp1OGmivR85Pkmnad8-wdhvSZXVt8h-BiBwADEyW7GoKuVaWLD5bNIDih-eKCX8AZRg58wc0CoroLyohxKTTW2JWqLZ0AlaNl7v2Ix6iebEqFYfXJMAj5l2mpXGe_z-FAXrM4LeJhjoL3-aQMxzgqKiyZZfC818BUYC9EFcJfYdwYGAY_dejUvpfWdRRNqTCWZEtxY1Vl84upQk-lXYlOETXUR_NhaoTQSl0QYkxLoTLSDsDsA0LxTF0nTJgOxQhhqH4tK0jATNfhEmKt5u4KeBasJFu0n3CtgqsXyv5k4jU2rbHky6hqIKC0ZGWNJReAYdsXA5VlfSv8u59yWItQhNtWFy4zUGgATlaMlEaAhg3LlaEzcah8GDjTkLofJhA9j4h-BwrhSq3AVj2fIb0zhOEQAACLTQ-AwaqElnCNklPNB1FC-B_WypAeYnZqiZSxMuthOsv0_pAH-oC5VJEYmiBAUDrYbkwHXdBz9klf293KgIIDqH0PgaoJunDmxYP4f_ZEDRKGQMQDA5h5clGXp4fgwRiho5iOMeY5lJm60iDog5L4RdbgH1PtfTxCUmAEgJF7XAAJMBFPiQ4_NEMkmuHcjE2-84l6X3TVkxgeTinlOqeA2hpjGGoABiAA

const myShape = {
  x: 0,
  y: 0,
  width: 13 //间距
};
// 绘制左侧面
const InclinedRoofBar = echarts.graphic.extendShape({
  shape: myShape,
  buildPath: function (ctx, shape) {
    // canvas，shape是从custom传入的
    const xAxisPoint = shape.xAxisPoint;
    const c0 = [shape.x, shape.y];
    const c1 = [shape.x - 17, shape.y - 10];
    const c2 = [xAxisPoint[0] - 17, xAxisPoint[1]];
    const c3 = [xAxisPoint[0], xAxisPoint[1]];
    ctx
      .moveTo(c0[0], c0[1])
      .lineTo(c1[0], c1[1])
      .lineTo(c2[0], c2[1])
      .lineTo(c3[0], c3[1])
      .closePath();
  }
});
echarts.graphic.registerShape('InclinedRoofBar', InclinedRoofBar);
option = {
  backgroundColor: '#1e3756',
  color: ['#b27e44'],
  tooltip: {
    show: true,
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    confine: true,
    textStyle: {
      fontSize: 14
    },
    formatter: (params) => {
      var tar = params[0];
      this.workType = tar.name;
      return tar.name + ' : ' + '<br/>' + tar.value;
    }
  },
  legend: {
    top: 5,
    itemWidth: 16,
    itemHeight: 8,
    left: 'center',
    padding: 0,
    textStyle: {
      color: '#fff',
      fontSize: 14,
      padding: [2, 0, 0, 0]
    },
    data: ['demo1122']
  },
  grid: {
    containLabel: true,
    left: 0,
    bottom: 0,
    width: '100%',
    height: '85%'
  },
  xAxis: {
    type: 'category',
    axisLine: {
      show: true,
      lineStyle: {
        width: 1,
        color: 'rgb(255, 255, 255, 0.5)'
      }
    },
    axisLabel: {
      show: true,
      interval: 0,
      rotate: 30,
      textStyle: {
        color: '#fff',
        fontSize: 12
      }
    },
    splitLine: {
      show: false,
      lineStyle: {
        color: 'rgb(255, 255, 255, 0.3)',
        type: 'dashed',
        width: 1
      }
    },
    axisTick: {
      show: false
    },
    data: [],
    zlevel: 10
  },
  yAxis: {
    type: 'value',
    name: '',
    min: 0,
    axisTick: {
      show: false
    },
    axisLabel: {
      textStyle: {
        color: '#fff',
        fontSize: 12
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: 'rgb(255, 255, 255, 0.3)',
        type: 'dashed',
        width: 0.7
      }
    },
    axisLine: {
      show: false,
      lineStyle: {
        color: 'rgb(52, 113, 250)'
      }
    },
    nameTextStyle: {
      color: '#fff',
      fontSize: 16
    }
  },
  series: [
    {
      type: 'custom',
      name: 'demo1122',
      itemStyle: {
        borderColor: '#b27e44',
        borderWidth: 1,
        color: '#b27e44',
        normal: {
          borderWidth: 1
        }
      },
      renderItem: (params, api) => {
        const location = api.coord([api.value(0), api.value(1)]);
        const xlocation = api.coord([api.value(0), 0]);
        return {
          type: 'InclinedRoofBar',
          shape: {
            api,
            xValue: api.value(0),
            yValue: api.value(1),
            x: location[0] + 10,
            y: location[1],
            xAxisPoint: [xlocation[0] + 10, xlocation[1]]
          },
          style: {
            fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#FFA042'
              },
              {
                offset: 1,
                color: 'rgba(0,0,0,0)'
              }
            ]),
            stroke: '#b27e44'
          }
        };
      },
      data: []
    },
    {
      type: 'bar',
      label: {
        normal: {
          show: true,
          position: 'top',
          color: '#ff0000',
          fontSize: 20,
          offset: [4, -10],
          formatter: function (params) {
            if (params.value > 0) {
              return params.value;
            } else {
              return '';
            }
          }
        }
      },
      barWidth: 14,
      itemStyle: {
        color: 'transparent'
      },
      tooltip: {
        show: true
      },
      data: [29, 80, 34, 27, 55]
    }
  ]
};
const { xAxis, series } = option;
seriesData = [
  {
    workmode: 'text1',
    censusCount: 29
  },
  {
    workmode: 'text2',
    censusCount: 80
  },
  {
    workmode: 'text3',
    censusCount: 34
  },
  {
    workmode: 'text4',
    censusCount: 27
  },
  {
    workmode: 'text5',
    censusCount: 55
  }
];
xAxis.data = seriesData.map((item) => item.workmode);
series[0].data = seriesData.map((item) => item.censusCount);

在线链接：

https://echarts.apache.org/examples/zh/editor.html?c=area-pieces&code=MYewdgzgLgBAtgTwMoAsCGAHApjAvDAbwCgYYAPALhgAYAaEmBKuhgdwEsATKFKgRgDMMAPTDAL6mBd2KIBfANxFRMQBt-gNiVAZ7qBy-UBG6UVCRYASTDAANuzBZOAJRAgAZgCE0AJzwwswdM6gQAdAHNnTBR2YF8sMigsME5UTCwACmJSCHRsKkQ47HpSACMAV3YTTgAFNB4qO3zjKHZwGATgKDJaGFT4gEpCBlJFYDQwADc0CEAYf_bsQHozQDm5YHzoEDhAAnlAU0VAELcemD1ocgBBMnYIEpBzWHwJrF8yfcPj0_lSUm3YYGo3AG0Lq9avhABdB6PZ5bPgfL5kGAAWhgfAA7D80pcEFCYdQAZtgcAAEwfa4HI4nMBQd5olFw1p426E4l8P7ox5bcA7YBCfDvSkE04kv4Um6convWn0oHNTakXxwECDLAAFRAjWo3Nar0Ffw6YpgvjMFjljT4SpBqvVDPF2tl8uxBsttONJq15nNjQEVudNo1vlMIAgWDKPASHUB0hkAaIHi8PgCQQwITCziw_kOUWcWUSAHIjKYHdZbI4XKnWhmzdn7E5nCGQBhavV8MkYLk0MAANaBEDVTgAYRAJhAzioqYAxHwsAJYQBWABs-YYoG7vZg7wHuSxsKwABZV6meQwoLYTLUMFRaykUCBWFQoM58lgco8L-x_P4sHPU2h8VOGa-qacn4eNVAEOkMCpu0nCnqmmzSDeTzgHYDrnpe16bFEkRIP-JhYL-JowHY4BQEg7AAF4YTCq4QVB2E9nA5RJlQCQYC4aBwBAXS4AAfN0WHDK4UAuG49FBEx3KAgyPCHL4rA9o2MoATg-A8c4vhgIxWDCY8cZQPkzhgDA8mKcpMAANRATAfaGUBAA8uTOMIrGpmZunDCYV6qUGpCQQw6GPjEmG3hWVCjuR7BRHAADqXAVDC46BcFAASWD3igUBUAAHOR6F2ElQHANESbvo89GcJw5j-Mw5HIXhaHEUeQJdj2fb9nYjV5QyOFEvhRH8Ku5GkAVRVgCV85Yq0dA0MNfxkZsnDlGgVALpwWCSnwfBYlim4MO5pCBFwPnQUSaDmAAMmguRYCY8FXmlWAZaVmy5CAUA7nAN0Mhw3C8EBfDUNQACkzUwCg8X-IlfbJaOv3rTeHI7TpMl9v0UT-D2CB_Z-EAHXBHEmqkp7nYhWFmqhCDodDL3he9fDdTVs59s4_i5AkWKjgFMCM8zrPDb4o4dOBWGuY8G2PKjR0nWdmMMtjZ46QhlPfs4jnPSazj3eUxECCwWHlYTxNiyaM51UBDVNZTpCtXhhHEctGp8255EQBgZhQOjFgk20J6S3YaAmN6lME5VLvQdTQG0_T7Ms0zrSh9QvgCNzxsw4BqZTaklh_aTb38FbE0fviMqhI2LsS5UnvelnjxTTxs1bgyBHodKoufRDDAIHy0P_gnjlXn9SlwMRqZ_XA5gK6QqO502Bdu0XXtYKXw_4sLp0u5rfs6wyevPobdip48pvtRbWKZwyAspPbQVO1VGqF1LF0ar7RPn1hAf66mwcM-HYds2_Ucx1vpBt73ScA04D_GAr0IpR1hAffm5EhYY2qseHG2Fi54xNLfbWcCqZPxfqOIaMJBAR1HNQbmkCbabG7rKCIFU74uzXvVRqm9KY73NvwccEFG4pCfOwLAEBZqbHQX_OG8xHpbzIX2eai1lqrRlsFLW98H53WcPNZwnZA6LmXGuDccd5GKLCunGEccaEGyXCudcwCwCUU9v7R4Winw6IinwDUbkraUzjDEJ8Bhgq0X4oxCArRMDsBYuxdBu0djdnhnUbS-A_EelsAohI7wokd0SIQ3xGB2C-ESQkPgHQ1SqVXkyWAZBQnlHCW4KJoAeycDiQkz2V4EjJJoDkhxMB1KaW0kE28sMgKFizDYEseY47HniJYj8qSBmPDIAANRqcRapTkkkdDGaQBAUy5lUFmbUrJizyBUCKVWMA3IzKfS2UwGAuzwmqi2RyO4RJZqFJAGE8AByjJHPIGcx5QomkkIfo8aAVCV4P1giYUWFhWDuE8C4CMgRgihF8GfFwABxIIRUcp1OGmivR85Pkmnad8-wdhvSZXVt8h-BiBwADEyW7GoKuVaWLD5bNIDih-eKCX8AZRg58wc0CoroLyohxKTTW2JWqLZ0AlaNl7v2Ix6iebEqFYfXJMAj5l2mpXGe_z-FAXrM4LeJhjoL3-aQMxzgqKiyZZfC818BUYC9EFcJfYdwYGAY_dejUvpfWdRRNqTCWZEtxY1Vl84upQk-lXYlOETXUR_NhaoTQSl0QYkxLoTLSDsDsA0LxTF0nTJgOxQhhqH4tK0jATNfhEmKt5u4KeBasJFu0n3CtgqsXyv5k4jU2rbHky6hqIKC0ZGWNJReAYdsXA5VlfSv8u59yWItQhNtWFy4zUGgATlaMlEaAhg3LlaEzcah8GDjTkLofJhA9j4h-BwrhSq3AVj2fIb0zhOEQAACLTQ-AwaqElnCNklPNB1FC-B_WypAeYnZqiZSxMuthOsv0_pAH-oC5VJEYmiBAUDrYbkwHXdBz9klf293KgIIDqH0PgaoJunDmxYP4f_ZEDRKGQMQDA5h5clGXp4fgwRiho5iOMeY5lJm60iDog5L4RdbgH1PtfTxCUmAEgJF7XAAJMBFPiQ4_NEMkmuHcjE2-84l6X3TVkxgeTinlOqeA2hpjGGoABiAA