ApexChart横向条形图VueJS中为Y轴添加超链接的问题

你的代码无法实现预期效果的核心原因是ApexCharts默认不会解析标签中的HTML内容，需要手动开启HTML解析权限，同时调整formatter的返回写法。

修正后的代码示例 #

yaxis: {
  tickAmount: 4,
  enabled: true,
  labels: {
    // 开启HTML解析，这是关键配置
    allowHTML: true,
    formatter: function(value, timestamp, opts) {
      // 使用模板字符串简化写法，直接返回HTML标签
      return `<a href="${value}">${value}</a>`;
    },
    style: {
      colors: "#000000",
      fontSize: "10px",
      opacity: 0.6
    }
  },
},

关键说明 #

• allowHTML: true：必须在labels配置中添加该属性，否则ApexCharts会把返回的HTML字符串当作纯文本渲染，无法生成可点击的链接。
• 字符串写法优化：用ES6模板字符串（反引号``）可以避免引号转义的麻烦，也能让代码更易读；如果使用普通字符串，需要转义内部引号，比如'<a href=\"' + value+ '\">' + value + '</a>'。
• 链接地址有效性：确保value是完整有效的URL（如带http/https前缀），否则会跳转到当前域名下的相对路径，可能不符合你的跳转需求。

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