创建highcharts vue组件

Question

在我的页面中我需要显示许多图表，所以我想创建一个 Highcharts 组件并在我的 .vue 文件中的 v-for cicle 中使用它。 我怎么能做到这一点？这是我所做的： 在我的 .vue 页面中，我有：

    <v-flex ma-3 v-for="(el,index) in Items">
            <my-chart-component                                      
               :series="el.series"
               :xlabels="el.Labels"
               :height="'300px'"
               width="100%"
             ></my-chart-component>
     </v-flex>

在我的组件内部：

 <template>
    <chart
            :series="mySeries"
            :xlabels="myXlabels"
            :options="myChartOptions"
            :height="height"
            width="100%"
    ></chart>
</template>

<script>

    import VWidget from '@/components/VWidget';
    import {Chart} from 'highcharts-vue'
    import Highcharts from 'highcharts/highcharts';
    import loadExporting from 'highcharts/modules/exporting';
    import brokenAxis from 'highcharts/modules/broken-axis';

    export default {
        name: 'my-chart-component',
        components: {
            VWidget,
            Chart,
            Highcharts,
            loadExporting,
            brokenAxis,
        },
        props: {
            mySeries:Array,
            myXlabels:Array,
            height:String
        },
        data() {
            return {
                myChartOptions: {
                    chart: {
                        type: 'column'
                    },
                    legend: {
                        align: 'left',
                        verticalAlign: 'top',
                        layout: 'vertical',
                        x: 100,
                        y: 30,
                        floating: true
                    },
                    navigation: {
                        buttonOptions: {
                            enabled: true
                        }
                    },
                    credits: {
                        enabled: false
                    },
                    xAxis: {
                        xAxis: {
                            categories: props.myXlabels
                        },
                    },
                    yAxis: [{
                        title: {
                            text: '%',
                            align: 'middle',
                            rotation: 0,
                        },
                        type: 'linear',
                    }],
                    plotOptions: {
                        column: {
                            stacking: 'normal',
                            dataLabels: {
                                enabled: true,
                            }
                        },
                        series: {
                            pointWidth: 15,
                            borderWidth: 0,
                            dataLabels: {
                                enabled: false,
                                format: '{point.y:.0f}%'
                            },
                            cursor: 'pointer',
                            point: {
                                events: {
                                    click: ''
                                }
                            }
                        }
                    },
                    exporting: {
                        sourceWidth: 1000,
                        sourceHeight: 600,
                    },
                    tooltip: {
                        shared: true,
                        valueSuffix: ' %',
                        followPointer: false,
                    },
                    title: {
                        text: '',
                        align: 'left',
                        margin: 30
                    },
                    colors: [
                        '#00c104',
                        '#d45087',

                    ],
                    series: props.mySeries
                },
            };
        },
        created(){
            loadExporting(Highcharts);
        },
        methods: {

        }
    };

</script>

现在，我在控制台中有很多错误，我有这个错误：

data() 中的错误：“ReferenceError：未定义道具” 在 在 src/components/MyChartComponent.vue

然后 [Vue 警告]：属性或方法“myChartOptions”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保此属性在数据选项或基于类的组件中是反应性的 看来我无法通过道具传递chartOptions，我该如何解决这个问题？ 谢谢

Answer 1

您传递给子组件的道具应在子组件中命名为道具。

如果 props 被称为 mySeries、myXlabels 和 height，那么你应该像 :my-series、:my-xlabels 和 :height 一样传递它。

<v-flex ma-3 v-for="(el,index) in Items">
  <my-chart-component                                      
    :my-series="el.series"
    :my-xlabels="el.Labels"
    :height="'300px'"
    width="100%"
  ></my-chart-component>
</v-flex>

Answer 2

需要定义

<script>
    export default {
        props: {
          Items: Array,
        },
    }
</script>

然后需要将你的变量从父 vue 页面传递到这个页面或组件中：

<MegaMenu :categories="categories"/>