Question

在我的页面中，我需要显示许多图表，因此我想创建一个Highcharts组件，并在v-for柱子的.vue文件中使用它。我怎么能做到这一点？这是我所做的：在我的.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”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保该属性在data选项中或对于基于类的组件都是反应性的看来我无法通过props传递chartOptions，我该如何解决？谢谢

Answer 1

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

如果道具被称为mySeries，myXlabels和height，则应该像:my-series，:my-xlabels和:height这样传递道具。 / p>

<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"/>

创建highcharts vue组件

2 个答案: