vue апексчарты обновляют серию динамически - PullRequest
Новая
       23

vue апексчарты обновляют серию динамически

0 голосов
/ 14 января 2020

Как я могу обновить данные из серии для apexchart, который я создал после vue компонента, используя apexcharts Этот компонент обновляется от родительского элемента, где расположена группа этих компонентов. Обновленные значения поступают через подпорки. 

<template>
  <div>
    <apexchart type="line" width="1000px" :options="options" :series="series"></apexchart>
  </div>
</template>

<script>
import Vue from "vue";
import VueApexCharts from "vue-apexcharts";

Vue.use(VueApexCharts);
Vue.component("apexchart", VueApexCharts);

export default {
  name: "EnergyConsumption",
  props: {
    channel1: Number,
    channel2: Number,
  },
  data() {
    return {
      options: {
        chart: {
          id: "vuechart-example"
        },
        xaxis: {
          categories: ["Channel 1", "Channel 2"]
        }
      },
      series: [
        {
          name: "series-1",
          data: [this.channel1, this.channel2]
        }
      ]
    };
  },
  methods: {
    updateSeries() {
      this.series[0].data = [this.channel1, this.channel2];
    }
  },
  watch: {
    channel1: function(_channel1) {
      this.updateSeries();
      //   this.series[0].data[0] = _channel1;
    }
  }
};
</script>

с помощью vue devtools. Я вижу, что данные изменяются внутри компонента Apexchart, но представление не обновляется.

Если я загляну в документацию по apexcharts, то у меня появится способ обновить серию 

updateSeries (newSeries, animate)

, но мне нужен экземпляр для вызова updateSeries. если я использую шаблонный механизм, у меня не будет ссылки на этот модуль.

Как лучше всего решить эту проблему?

1 Ответ

2 голосов
/ 15 января 2020

Вам необходимо использовать ref для обновления серии. 

<apexchart ref="realtimeChart" type="line" height="200" :options="chartOptions" :series="series" />



data () {
    return {
      series: [{
        name: 'Desktops',
        data: [10, 41, 35, 51, 49, 62, 69, 91, 99]
      }],
      chartOptions: {
        colors: ['#FCCF31', '#17ead9', '#f02fc2'],
        chart: {
          height: 350
        },
        grid: {
          show: true,
          strokeDashArray: 0,
          xaxis: {
            lines: {
              show: true
            }
          }
        },
        stroke: {
          curve: 'straight',
          width: 5
        },
        // grid: {
        //   padding: {
        //     left: 0,
        //     right: 0
        //   }
        // },
        dropShadow: {
          enabled: true,
          opacity: 0.3,
          blur: 5,
          left: -7,
          top: 22
        },
        dataLabels: {
          enabled: false
        },
        title: {
          text: 'Line',
          align: 'left',
          style: {
            color: '#FFF'
          }
        },
        xaxis: {
          categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
          labels: {
            style: {
              colors: '#fff'
            }
          }
        },
        yaxis: {
          labels: {
            style: {
              color: '#fff'
            }
          }
        }
      }
    }
  },
  mounted () {
    this.setDataLineChart()
  },
  methods: {
    getRandomArbitrary (min, max) {
      return Math.floor(Math.random() * 99)
    },
    setDataLineChart () {
      setInterval(() => {
        this.series[0].data.splice(0, 1)
        this.series[0].data.push(this.getRandomArbitrary(0, 99))
        this.updateSeriesLine()
      }, 3000)
    },
    updateSeriesLine () {
      this.$refs.realtimeChart.updateSeries([{
        data: this.series[0].data
      }], false, true)
    }
  }
...