Использование amCharts в монтированном Vue.js задерживает компонент - PullRequest
Новая
       6

Использование amCharts в монтированном Vue.js задерживает компонент

0 голосов
/ 04 декабря 2018

Я добавил amCharts в свой компонент, используя это руководство в своих документах здесь https://www.amcharts.com/docs/v4/getting-started/integrations/using-vue-js/. Код скопирован из их документации и создает диаграмму в mounted hook

  mounted() {
    let chart = am4core.create(this.$refs.chartdiv, am4charts.XYChart)
    chart.paddingRight = 40
    chart.legend = new am4charts.Legend()
    chart.cursor = new am4charts.XYCursor()
    let data = []
    let visits = 10
    for (let i = 1; i < 366; i++) {
      visits += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10)
      data.push({ date: new Date(2018, 0, i), name: "name" + i, value: visits })
    }
    chart.data = data

    let dateAxis = chart.xAxes.push(new am4charts.DateAxis())
    dateAxis.renderer.grid.template.location = 0

    let valueAxis = chart.yAxes.push(new am4charts.ValueAxis())
    valueAxis.tooltip.disabled = true
    valueAxis.renderer.minWidth = 35

    let series = chart.series.push(new am4charts.LineSeries())
    series.name = "Sales"
    series.dataFields.dateX = "date"
    series.dataFields.valueY = "value"
    series.strokeWidth = 2
    series.fillOpacity = 0.4
    series.stacked = true
    series.tooltipText = "{valueY.value}"

    let scrollbarX = new am4charts.XYChartScrollbar()
    scrollbarX.series.push(series)
    chart.scrollbarX = scrollbarX
    this.chart = chart
  },

Диаграмма отображается хорошо, и все, кроме компонента, теперь отображаются с большой задержкой в ​​1 секунду.Я удалял приведенные выше строки кода одну за другой, чтобы увидеть, какая часть вызывает эффект, и именно эта часть: 

let series = chart.series.push(new am4charts.LineSeries())
series.name = "Sales"
series.dataFields.dateX = "date"
series.dataFields.valueY = "value"
series.strokeWidth = 2
series.fillOpacity = 0.4
series.stacked = true
series.tooltipText = "{valueY.value}"

Есть идеи, как загрузить диаграмму асинхронно или в чем здесь проблема?

ОБНОВЛЕНИЕ

Я добавил это, и это помогает, хотя и некрасиво ... 

mounted() {
  self = this
  setTimeout(function(){ self.createGraph() }, 10)
}
...