javascript - VueJs中的 Highcharts …将状态传递给mapOptions

我现在在将vuex状态绕过vuejs组件中的mapOptions时遇到问题。

这是我的代码：

<template>
    <div>
        <highcharts :constructor-type="'mapChart'" :options="mapOptions" class="map"></highcharts>
    </div>
</template>
<script>
import { mapState } from 'vuex'
 export default {
   created() {
        this.$store.dispatch('fetchCountries')
    },
    computed:{
        ...mapState(['countries', 'title'])
    },
    data() {
        return {
            mapOptions: {
                chart: {
                    map: 'myMapName'
                },
                title: {
                    text: this.title
                },
                credits: {
                    enabled: false
                },
                legend: {
                    title: {
                        text: 'Number of Confirmed cases'
                    }
                },
                mapNavigation: {
                    enabled: true,
                    buttonOptions: {
                        verticalAlign: 'top'
                    }
                },colorAxis: {
                    min: 1,
                    max: 100000,
                    type: 'logarithmic'
                },

                series: [{
                    type: 'map',
                    data: this.countries,
                    joinBy: ['name', 'Country'],
                    name: 'Country: ',
                    minSize: 4,
                    maxSize: '12%',
                    states: {
                        hover: {
                            color: '#a4edba'
                        }
                    }
                }]
            }
        };
    }
};

我这样写title: { text: this.title}，但没有用。

我从$ store获得了标题，并且国家/地区的状态正确，但是当我将它们传递给mapOptions时，数据将不会传递。

地图将被渲染，但没有数据和标题。

你知道我该怎么解决吗？

最佳答案

data属性在计算值之前被初始化，因此要解决此问题，请尝试使mapOptions作为计算属性：

computed:{
...mapState(['countries', 'title']),
 mapOptions(){

  return {
                chart: {
                    map: 'myMapName'
                },
                title: {
                    text: this.title
                },
                credits: {
                    enabled: false
                },
                legend: {
                    title: {
                        text: 'Number of Confirmed cases'
                    }
                },
                mapNavigation: {
                    enabled: true,
                    buttonOptions: {
                        verticalAlign: 'top'
                    }
                },colorAxis: {
                    min: 1,
                    max: 100000,
                    type: 'logarithmic'
                },

                series: [{
                    type: 'map',
                    data: this.countries,
                    joinBy: ['name', 'Country'],
                    name: 'Country: ',
                    minSize: 4,
                    maxSize: '12%',
                    states: {
                        hover: {
                            color: '#a4edba'
                        }
                    }
                }]
            }}

}

关于javascript - VueJs中的 Highcharts …将状态传递给mapOptions，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/61020001/