Датчик Highchart не отображает минимальное / максимальное значение в Vue. js

Question

У меня странная проблема. Я показываю данные из базы данных neo4j на высоких диаграммах. Я могу получить данные, но когда я пытаюсь поместить их на графики, некоторые из них не отображаются. Вот мой код датчика

CustomGauge. vue

<template>
  <highcharts :options="chartOptions"></highcharts>
</template>

<script>
import { Chart } from "highcharts-vue";

export default {
  name: "CustomGuage",
  components: {
  highcharts: Chart
  },
  props: ["data", "title",   "range1", "range2", "min", "max"],
  data() {
    return {
  chartOptions: {
    chart: {
      type: "gauge",

      // plotBackgroundColor: null,
      // plotBackgroundImage: null,
      // plotBorderWidth: 0,
      // plotShadow: false,

      //marginBottom: 170,
    },

     credits: {
      enabled: false
    },

    title: {
      text: this.title,
      align: "left"
    
    },

    pane: {
      startAngle: -150,
      endAngle: 150,
      size: 200,
      background: {
         borderWidth: 0
        }
    },

    // the value axis
    yAxis: {
      min: this.min,
      max: this.max,
      // tickPixelInterval: 30,
      // tickWidth: 2,
      // tickColor: "#666",
      plotBands: [
        {
          from: 0,
          to: this.range1,
          color: "#55BF3B" // green
        },
        {
          from: this.range1,
          to: this.range2,
          color: "#DDDF0D" // yellow
        },
        {
          from: this.range2,
          to: 1000,
          color: "#DF5353" // red
        }
      ]
    },

    series: [
      {
        data: this.data
        // tooltip: {
        //   valueSuffix: " km/h"
        // }
      },
      // // {
      // //   data: this.target,
      // //   dataLabels: {
      // //     enabled: true,
      // //     format: "Target: {y}%",
      // //     verticalAlign: "bottom",
      // //     borderWidth: 0
      // //     //useHTML: true,
      // //   },
       
      // }
    ]
  }
};
},
 watch: {
data(newVal) {
  this.chartOptions.series[0].data = newVal;
 }
 }

};

Я определяю свою диаграмму следующим образом

<CustomGuage :title="gaugeTitle1" :data="gaugeData1" :min="gauge1min" :max="gauge1max" :range1="gauge1Range1" :range2="gauge1Range2" />

Я инициализирую его в data () вот так -

  gaugeTitle1: [],
  gaugeData1: [],
  gauge1Range1: [],
  gauge1Range2: [],
  gauge1min: [],
  gauge1max: [],

Используя коннектор neo4j- vuejs, я получаю данные следующим образом -

const session19 = this.$neo4j.getSession(); 
// KPI 1
 session19
    .run(
      "match (n:proj) where exists(n.min) return n.name as title,n.min as min,n.max as max,n.range1 
    as range1,n.range2 as range2,n.target AS target, n.current as data"
    )
    .then((res) => {
      // KPI 1-------------------------
      this.data1 = res.records[0].get("data");
      var a = JSON.parse(this.data1);
      this.gaugeData1.push(a);
      console.log(a)

      this.min1 = res.records[0].get("min");
      var b = JSON.parse(this.min1);
      this.gauge1min = b;
      console.log(this.gauge1min)

      this.max1 = res.records[0].get("max");
      var c = JSON.parse(this.max1);
      this.gauge1max = c;
      console.log(this.gauge1max)

      this.title1 = res.records[0].get("title");
      this.gaugeTitle1.push(this.title1)
      console.log(this.gaugeTitle1);
    })
  
    .then(() => {
      session.close();
    });

Получение данных работает нормально, я проверил в консоли. Странно, если я комментирую / раскомментирую или изменяю что-то в CustomGauge. vue, диаграммы отображаются отлично, отлично отображает все из базы данных. Но как только я обновлюсь sh страница исчезла. Может ли кто-нибудь мне помочь. заранее спасибо за помощь

Answer 1

Вероятно, проблема с реактивностью.

Вместо

this.chartOptions.series[0].data = newVal;

Попробуйте

this.$set(this.chartOptions.series[0], 'data', newVal)