Javascript VueJs highstock无法正确绘制图形

这是我的VueJS代码，我使用这个库 因此，我不知道如何在绘制图形之前获取数据并将其设置为序列。或者，如果这是不可能的，我怎样才能正确地重新绘制图形？因为现在我设置了一些默认数据，然后从页面中获取数据，然后重新绘制图形，但是当它完成后，我看到了我的图形，滚动条转到左侧，并且范围非常小。那么，如何在不更改滚动条和范围选择器的情况下设置选项呢

<template>
  <highcharts :constructor-type="'stockChart'" :options="options" :updateArgs="[true, false]" ref="linerchart"></highcharts>
</template>

<script>
    import {Chart} from 'highcharts-vue'
    import Highcharts from 'highcharts'
    import stockInit from 'highcharts/modules/stock'
    stockInit(Highcharts)
    export default {
      data: () => ({
        obj: [],
        names: ['CAFF'],
        options: {
          credits: { enabled: false },
          rangeSelector: {
            selected: 1,
            inputEnabled: false,
            buttonTheme: {
                visibility: 'visible'
            }
          },
          yAxis: {
            labels: {
                formatter: function () {
                    return (this.value > 0 ? ' + ' : '') + this.value + '%';
                }
            },
            plotLines: [{
                value: 0,
                width: 2,
                color: 'silver'
            }]
          },
          plotOptions: {
            series: {
              compare: 'percent',
              showCheckbox: false,
              events: {
                checkboxClick: function (event) {
                  if (event.checked) {
                      this.show();
                  } else {
                      this.hide();
                  }
                }
              }
            }
          },
          tooltip: {
            pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> USD<br/>',
            split: true
          },
          series: [{
            name: "CAFF",
            data: [1,2,3,4,5,6]
          }]
        }
      }),
      methods: {
        linerGraph() {
          var that = this;
          this.names.forEach(function(name, i){
            axios.get('/test/account/CAFF')
            .then(response => {
              console.log(response.data)
              that.obj.push({name: name, data: response.data});
            });
          });
          this.options.series = that.obj
        },
      },
      components: {
        highcharts: Chart
      },
      mounted() {
        console.log(this.$refs.linerchart)
        this.linerGraph();
      }
    }
</script>

从“highcharts vue”导入{Chart}
从“Highcharts”导入Highcharts
从“highcharts/modules/stock”导入stockInit
stockInit（高图）
导出默认值{
数据：（）=>({
obj:[]，
姓名：['CAFF']，
选项：{
信用证：{已启用：错误}，
范围选择器：{
选定：1，
输入：错误，
按钮主题：{
可见性：“可见”
}
},
亚克斯：{
标签：{
格式化程序：函数（）{
返回（this.value>0？'+'：''）+this.value+'%；
}
},
绘图线：[{
值：0，
宽度：2，
颜色：“银色”
}]
},
打印选项：{
系列：{
比较：'百分比'，
showCheckbox:false，
活动：{
复选框单击：功能（事件）{
如果（已选中事件）{
this.show（）；
}否则{
this.hide（）；
}
}
}
}
},
工具提示：{
pointFormat:“{series.name}:{point.y}USD
”，
分裂：对
},
系列：[{
名称：“CAFF”，
数据：[1,2,3,4,5,6]
}]
}
}),
方法：{
线条图（）{
var=这个；
this.names.forEach（函数（name，i）{
get（'/test/account/CAFF'）
。然后（响应=>{
console.log（response.data）
push（{name:name，data:response.data}）；
});
});
this.options.series=that.obj
},
},
组成部分：{
海图：海图
},
安装的（）{
console.log（此.$refs.linerchart）
这个.linerGraph（）；
}
}

您应该使用其他VueJS lifecycle挂接点来运行

axios

请求，因为您试图在组件已安装时下载它（），因此请尝试在挂接点之前使用其中一个挂接点，例如

created（）

。 以下是来自以下站点的生命周期图：

---

我使用了它，但它对我没有帮助（我不记得了，但如果我将created insted Moute设置为相同的结果，或者我甚至不能使用任何this.variable，因为它未定义），因此很难推断出你到底做错了什么。您能试着准备一下将滚动条移到左侧的问题的最小示例吗？我怀疑请求的数据没有调整到您当前的数据或整个图表配置。然而，如果不仔细看一下，我不是百分之百肯定。