Как визуализировать v-диаграмму в v-для, где каждый объект является данными v-диаграммы?

Question

Я хочу динамически генерировать некоторые v-charts из Echarts в v-for.

Данные для v-or поступают из хранилища vuex и являются правильными.

Я получаю словарь, где каждая запись является объектом

bar{ title:'somCoolTitle', data:[d1,d2,d3,d4], ...}.

Я хочу визуализировать каждую панель объектов в виде диаграммы, но мой код не будет работать. Я не понимаю ошибки. Я получаю только пустой V-график.

<template>
    <div v-for="(chart, index) in charts" v-bind:key="index">
        <v-chart
            v-bind:data="chart.bar.data"
            v-bind:name="chart.bar.title"
            v-bind:options="{responsive: false, maintainAspectRatio: false}"
        </v-chart>
    </div> 
</template>

Answer 1

Как и в документе , вам необходимо передать данные и имя в качестве параметров в v-chart

<div v-for="(chart, index) in charts" v-bind:key="index">
    <v-chart
        v-bind:options="getChartOption(chart)"
    </v-chart>
</div> 

Вы можете использовать методы для форматирования данных:

methods: {
    getChartOption(chart) {
        return {
            title: {
                text: chart.bar.title
            },
            responsive: false,
            maintainAspectRatio: false,
            series: [
                {
                    name: chart.bar.title,
                    type: 'bar',
                    data: chart.bar.data
                }
            ],
        }
    }
}