Vue ApexCharts 动态更新数据系列

Question

如何更新ApexCharts系列中的数据 我使用ApexCharts创建了以下Vue 组件。该组件从一堆这些组件所在的父级获取更新。更新后的值是通过 props 传入的。

<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，我可以看到数据在ApexCharts组件内发生变化，但视图没有更新。

如果我查看ApexCharts文档，我会看到有一种方法可以更新系列

updateSeries (newSeries, animate)

但我需要一个实例来调用updateSeriesfrom。如果我使用模板机制，则无法引用该模块。

解决此问题的最佳方法是什么？

Answer 1

您需要ref用于更新系列。

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

<script>
export default {
  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);
    },
  },
};
</script>

Answer 2

如果您使用的是 VUE，图表会在您更新系列时自动更新。

检查文档：

Vue ApexCharts - 如何更新图表

无需调用 updateSeries()

Answer 3

我遇到了同样的问题，这可以很容易地纠正，如下所示：

\n

 updateChart() {\n    this.series = [{ data: [100, 155, 200]}]\n}\n

\n

这是如何更新 VueApexCharts 中的选项或系列的清晰示例：

\n

https://codesandbox.io/s/qzjkzmzxoj?file=/src/components/Chart.component.vue:1307-1312

\n

文档在这一部分提到了它：

\n

重要提示：更新选项时，即使需要更新嵌套属性，也请确保更新最外面的属性。

\n

\xe2\x9c\x85 执行此操作

\n

 updateChart() {\n    this.series = [{ data: [100, 155, 200]}]\n}\n

\n