vue使用Highcharts实现3D饼图

本文实例为大家分享了vue使用Highcharts实现3D饼图的具体代码，供大家参考，具体内容如下

1.安装vue-highcharts和highcharts

npm install vue-highcharts --save
npm install highcharts --save

2.option.js

let all={
    pie:{
        chart: {
            type: 'pie',
            options3d:
                {
                    enabled: true,
                    alpha: 70,//展示顶部看到的范围
                    beta: 0
                }
        }
        ,
        title: {
            text: '2014年某网站不同浏览器访问量占比'
        }
        ,
        tooltip: {
            pointFormat: '{series.name}: {point.percentage:.1f}%'
        }
        ,
        plotOptions: {
            pie: {
                allowPointSelect: false,
                cursor: 'pointer',
                depth: 75,//3D图的高度
                dataLabels:
                    {
                        distance:50,
                        enabled: true,
                        format: '{point.name}'
                    }
            }
        }
        ,
        series: [{
            type: 'pie',
            name: '浏览器占比',
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: [
                {name: 'Firefox', y: 45.0, sliced: true,},
                {name: 'IE', y: 26.8, sliced: true,},
                {
                    name: 'Chrome',
                    y: 12.8,
                    sliced: true,//每个部分的间隙
                },
                {name: 'Safari', y: 8.5, sliced: true,},
                {name: 'Opera', y: 6.9, sliced: true,},
                {name: 'Others', y: 0.7, sliced: true,}
            ]
        }]
    }
}
export default  all

3.charts.vue

4.marry.vue

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。