vue里用axios给highcharts饼图data赋值的格式(解决饼图渲染不出的问题)

data的里 chartOptions的写法

 chartOptions: {
                    chart: {
                        // plotBackgroundColor: null,
                        // plotBorderWidth: null,
                        // plotShadow: false,
                        type: 'pie',
                        // options3d: {
                        //     enabled: true,
                        //     alpha: 45,
                        //     beta: 0
                        // },
                    },
                    title: {
                        text: '<br />岩心陈列馆岩心区块分布数据统计'
                    },
                    tooltip: {
                        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            depth: 35,
                            dataLabels: {
                                enabled: true,
                                format: '{point.name}',
                                // style: {
                                //      color: (highcharts.theme && highcharts.theme.contrastTextColor) || 'black'
                                // }
                            }
                        }
                    },
                    series: [{
                        type: 'pie',
                        name: '所占百分比(%)',
                        data: [],
                    }]
                },

在axios里赋值的格式:

 _this.$set(_this.chartOptions.series[0],"data",response.data);

使用this.$set来触发vue的更新机制,重新渲染视图,然后给series[0]赋值,因为series[0]这个才代表data,
下列错误的写法:

 _this.$set( _this.chartOptions.series,"data",response.data);

因为series这个数组包含了其余的内容。而series[0]才代表为data

hxy

hxy

秦 夏

留下你的评论

快留下你的小秘密吧