highCharts 3D饼图

提示： 如果使用jQ渲染highCharts 需jQ引入在highChars前面否则无法渲染

     <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> 
    </script> 
    <script src="./js/highcharts.js"></script>
    <script src='./js/highcharts-3d.js'></script>

原生js渲染只引入highCharts文件即可

 <script src="./js/highcharts.js"></script>
//若不需要3D效果可以不引入此文件
  <script src='./js/highcharts-3d.js'></script>

渲染3D饼图实例:

 <div id ="container" style ="min-width: 800px; height: 600px ; margin: 0 auto "></div>
 <script>  
var chart = Highcharts.chart('container', {
    chart: {
        type: 'pie',
        options3d: {
            enabled: true,
            alpha:60,
             beta:0
        }
    },
    title: {
        text: '2014年某网站不同浏览器访问量占比'
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            depth: 35,
            dataLabels: {
                enabled: true,
                format: '{point.name}'
            }
        }
    },
    series: [{
        type: 'pie',
        name: '浏览器占比',
        data: [
            ['Firefox',   45.0],
            ['IE',       26.8],
            {
                name: 'Chrome',
                y: 12.8,
                sliced: true,
                selected: true
            },
            ['Safari',    8.5],
            ['Opera',     6.2],
            ['Others',   0.7]
        ]
    }]
});

 </script>   

上面例子是直接引用官网实例

运行效果