highcharts实现立体3D饼状图

      最近做一个h5活动页，设计师给我设计出了一个3D饼状图，我当时觉得没啥，觉得强大的echarts应该能做出来的，因为公司的项目涉及到图表的都用的echarts，但是后来去echarts官网一查，没这个功能，或者说做不出这样的效果，所以就想想用别的框架，后来就发现了highcharts，其实两个做图表方面都差不多，一个是国产的一个是进口的，而且两个做图标的效果也是有一定区别的，echarts用canvas做的，而highcharts使用svg实现的，各有各的优点吧！兼容性方面来说应该是highcharts比较强，展示效果的话echarts比较好，废话不多说了，开始贴demo代码吧！

$(function () {
    Highcharts.setOptions({
        colors: ['#FF4C4C', '#00AAD2']
    });
    $('#container').highcharts({
        chart: {
            type: 'pie',
            options3d: {
                enabled: true,
                alpha: 55,//调整立体倾斜角度
                beta: 0
            }
        },
        title: {
            text: ''
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: false,
                cursor: 'pointer',
                depth: 95,//调整立体高度
                dataLabels: {
                    enabled: true,
                    format: '{point.name}:{point.percentage:.1f}%',
                    backgroundColor:'#ffffff',
                    borderColor:'#333333',
                    borderRadius:4,
                    borderWidth: 2,
                    fontSize:50
                }
            }
        },
        series: [{
            type: 'pie',
            name: '浏览器占比',
            data: [
                {
                    y: 10,
                    name: "线下消费",
                    color: "#00AAD2"
                }, {
                    y: 90,
                    name: "线上消费",
                    color: "#FF4C4C"
                }
            ]
        }]
    });
});

大概效果图如下：

PS：很多参数都是可以去调的，就是需要自己研究API再加上调试，API传送门：

https://www.hcharts.cn/demo/highcharts