How to visualize a v-chart in an v-for where each object is the data of the v-chart?

Question

I want to generate dynamically some v-charts from Echarts in a v-for.

The data for the v-or is comming from the vuex store and is correct.

I get a dictionary, where each entry is an object

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

I want to visualise each object bar as an chart, but my code wont't work. I doesn't get a fault. I only get an empty v-chart.

<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

As in document, you need to pass data and name as options to v-chart

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

You can use methods to format data:

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