小编Bik*_*der的帖子

Vue ApexCharts 动态更新数据系列

如何更新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() …
Run Code Online (Sandbox Code Playgroud)

vue.js apexcharts

5
推荐指数
3
解决办法
1万
查看次数

标签 统计

apexcharts ×1

vue.js ×1