Javascript Highcharts-图像无法在带有vue.js包装的xAxis.labels下显示

基本上，我想实现以下目标： 将自定义图像图标放在柱形图中xAxis下的特定标签上。

这是我内置的工作示例

但是当我使用

vue highcharts v0.0.10

wrapper时，图标无法显示，这里有什么问题

我试着设置边距，或者搞乱了格式化程序，没有运气。 为什么stackoverflow需要对这个问题进行长时间的描述，仅仅因为代码非常松散

options() {
  return {
    chart: {
      type: 'column',
      backgroundColor: 'transparent',
    },
    title: {
      text: null,
    },
    subtitle: {
      text: null,
    },
    xAxis: {
      categories: ['Worst', 'Average', 'You|||', 'Best'],
      lineWidth: 0,
      minorTickLength: 0,
      tickLength: 0,
      labels: {
        formatter: function() { //eslint-disable-line
          if (this.value.includes('|||')) {
            // const avatar = this.value.split('|||')[1];
            // const name = this.value.split('|||')[0]; //eslint-disable-line
            return '<img src="http://highcharts.com/demo/gfx/sun.png" alt="" style="vertical-align: middle; width: 32px; height: 32px"/>';
          }
          return this.value;
        },
        useHTML: true,
      },
    },
    yAxis: {
      visible: false,
    },
    credits: {
      enabled: false,
    },
    colors: [this.orange, this.yellow, this.lightGreen, this.green],
    plotOptions: {
      series: {
        shadow: true,
        pointWidth: 30,
        showInLegend: false,
        colorByPoint: true,
        borderWidth: 0,
        borderRadius: 5,
        enableMouseTracking: false,
      },
    },
    series: [
      {
        data: [this.worstScore, this.averageScore, this.yourScore, this.bestScore],

      },
    ],
  };

options（）{
返回{
图表：{
键入：“列”，
背景色：“透明”，
},
标题：{
文本：空，
},
副标题:{
文本：空，
},
xAxis：{
类别：[“最差”、“一般”、“你”、“最好”]，
线宽：0，
minorTickLength:0，
长度：0，
标签：{
格式化程序：函数（）{//eslint禁用行
if（此.value.includes（“| | |”））{
//const avatar=this.value.split（“| | |”）[1]；
//const name=this.value.split（“| | | |”）[0]；//eslint禁用行
返回“”；
}
返回此.value；
},
是的，
},
},
亚克斯：{
可见：假，
},
学分：{
启用：false，
},
颜色：[这个。橙色，这个。黄色，这个。浅绿色，这个。绿色]，
打印选项：{
系列：{
影子：没错，
点宽：30，
showInLegend:false，
colorByPoint：对，
边框宽度：0，
边界半径：5，
enableMouseTracking:false，
},
},
系列：[
{
数据：[this.worstScore，this.averageScore，this.yourScore，this.bestScore]，
},
],
};

这是实际行为：

---

为什么不使用？你能不能也发布一个不工作的JSFIDLE？简而言之，pooyan JSFIDLE似乎不支持vue组件设置。我不知道如何将这个发布到jsfiddle@Core972那不是我安排的，兄弟