使用 vue.js 绑定顶点图表中的不同系列

Question

我试图在 Vue.js 中使用 for 创建 N 个不同的条形图，但很明显，我用这种方式创建了 N 个具有相同数据系列的图表。我想创建这个 N 图表，在每个图表中绑定不同的系列。我这样试过：

<apexchart type="bar" height="100%" :options="chartOptionsRealTime" :series="seriesRealTime[0]"></apexchart>

系列如下：

seriesRealTime: [{
            name: 'first',
            data: [2.3, 3.1, 4.0, 10.1, 4.0, 3.6, 3.2, 2.3, 1.4, 0.8, 0.5, 0.2]
        },
        {
            name: 'second',
            data: [2.3, 3.1, 4.0, 10.1, 4.0, 3.6, 3.2, 2.3, 1.4, 0.8, 0.5, 0.2]
        },
        {
            name: 'second',
            data: [2.3, 3.1, 4.0, 10.1, 4.0, 3.6, 3.2, 2.3, 1.4, 0.8, 0.5, 0.2]
        }],

但 :series="seriesRealTime[0]" 不起作用。

我想用名为“first”的系列创建第一个图表，用名为“second”的系列创建第二个图表，等等... 有办法解决吗？

Answer 1

文档中可以看到https://apexcharts.com/docs/options/series/

Accepts an array of [name, data] object...

所以你需要传递一个数组

<apexchart type="bar" height="100%" :options="chartOptionsRealTime" :series="[seriesRealTime[0]]"></apexchart>

使用 vue.js 绑定顶点图表中的不同系列

Bind different series in apex chart using vue.js for

html

javascript

charts

vue.js

apexcharts