ApexCharts水平条形图实现Y轴标签、数据标签居柱顶及全角圆角设置

柱形上方双标签展示调整 #

不需要额外渲染Y轴，保持原有自定义dataLabels的逻辑，仅调整相关偏移、位置和样式即可：

• 将plotOptions.bar.dataLabels.position修改为top，让标签默认在柱形上方渲染
• 调整dataLabels.offsetY数值到-18左右，避免标签和柱形重叠，可根据实际展示效果微调
• 新增dataLabels.style.colors设置文字为白色，适配深色背景
• 可按需修改formatter中的返回值，调整标签和数值的间距、展示格式

柱形四圆角配置 #

ApexCharts默认仅对水平条形的末端生效圆角，新增配置即可覆盖全角：

• 在plotOptions.bar下新增borderRadiusApplication: 'all'，指定圆角应用到柱形四个角
• 保持原有borderRadius: 4和backgroundBarRadius: 4配置，保证背景条和前景条圆角统一
• 该配置要求ApexCharts版本≥3.26.0，版本过低可先升级到最新稳定版

修改后完整JS代码如下：

new Vue({
  el: '#app',
  components: {
    apexchart: VueApexCharts,
  },
  data: function() {
    return {
      series: [{
        data: [12787, 11903, 4446, 163, 978, 93],
      }, ],
      chartOptions: {
        chart: {
          type: "bar",
          height: 350,
          toolbar: {
            show: false,
          },
        },
        dataLabels: {
          enabled: true,
          offsetY: -18,
          offsetX: 0,
          textAnchor: "start",
          style: {
            colors: ['#fff']
          },
          formatter: function(val, opt) {
            return opt.w.globals.labels[opt.dataPointIndex] + "  " + val
          }
        },
        fill: {
          colors: ["#E0655D"],
        },
        plotOptions: {
          bar: {
            barHeight: "15%",
            borderRadius: 4,
            borderRadiusApplication: 'all',
            horizontal: true,
            dataLabels: {
              position: "top",
            },
            colors: {
              backgroundBarColors: ["#fff"],
              backgroundBarOpacity: 0.5,
              backgroundBarRadius: 4,
            },
          },
        },
        xaxis: {
          categories: [
            "RCC With Pillar",
            "Cement Bonded Bricks/Stone",
            "Mud Bonded Bricks/Stone",
            "Wooden Pillar",
            "Not Stated",
            "Others"
          ],
          labels: {
            show: false,
          },
          axisBorder: {
            show: false,
          },
          axisTicks: {
            show: false,
          },
        },
        yaxis: {
          show: false,
        },
      },
    };
  },
})

原有CSS和HTML代码无需修改。

内容的提问来源于stack exchange，提问作者Anish