highcharts绘制3D图表

2024-02-07 15:13:59
最近做项目中需求要求3D图表展现,开始比较懵逼,后来网上找的了highcharts图表,之前都是用的百度的echarts做平面图
一、基本介绍

二、绘制一个饼图的

1、效果图如下
2、具体代码
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
    <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
    <!--3d图表需要的2d就不需要-->
    <script src="https://img.hcharts.cn/highcharts/highcharts-3d.js"></script>
    <!-- <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script> -->
    <!-- <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script> -->
    <!-- 颜色的可以不引入,单独自己设置颜色 -->
    <!-- <script src="https://img.hcharts.cn/highcharts/themes/sand-signika.js"></script> -->
</head>
<body>
    <div id="container" style="height: 400px;width:400px;"></div>
    <script>
        $(function () {
            $('#container').highcharts({
                chart: {
                    backgroundColor:'#e5e5e5',
                    type: 'pie',
                    options3d: {
                        enabled: true,
                        alpha: 45,
                        beta: 0
                    }
                },
                // 设置导出按钮
                exporting:{
                    // 不显示出来
                    enabled:false
                },
                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}'
                        }
                    }
                },
                // 版权
                credits:{
                    enabled:false
                },
                series: [{
                    type: 'pie',
                    name: '浏览器占比',
                    data: [
                        {
                            name:'Firefox',
                            y:25.0,
                            id:'fox',
                            color:'#630',
                            // 文字提示
                            dataLabels:{
                                enabled:false
                            }
                        },
                        ['IE', 26.8],
                        {
                            name: 'Chrome',
                            y: 12.8,
                            sliced: true,
                            selected: true
                        },
                        ['Safari', 8.5],
                        ['Opera', 6.2],
                        ['Others', 0.7]
                    ]
                }]
            });
        });
    </script>
</body>
</html>
码农公寓

一、基本介绍

二、绘制一个饼图的

相关文章
