Question

我想从v-charts中的Echarts动态生成一些v-for。

v-or的数据来自vuex存储，并且是正确的。

我得到了一个字典，其中每个条目都是一个对象

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

我想将每个对象栏可视化为图表，但是我的代码无法正常工作。我没有错。我只得到一个空的图表。

<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

与document中一样，您需要将数据和名称作为选项传递给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
                }
            ],
        }
    }
}

如何在v-for中可视化一个v-chart，其中每个对象都是该v-chart的数据？

1 个答案: