Highcharts 3D饼图（1）上手使用配置

最新推荐文章于 2024-05-16 08:42:31 发布

元気欣

最新推荐文章于 2024-05-16 08:42:31 发布

阅读量1.5k

点赞数 1

本文链接：https://blog.csdn.net/kkk_xxx/article/details/109380972

版权

Highcharts 3D饼图快递公司数据可视化 pie chart

关键词由CSDN通过智能技术生成

在这里插入图片描述

引入Highcharts文件

在index.html 页面引入

 <script src="http://code.highcharts.com/highcharts.js"></script>
 <script src="http://code.highcharts.com/highcharts-3d.js"></script>

准备一个呈现图表的盒子

<div id="DispatchProportion"></div> 
<!--可以在这个DOM容器中指定其大小,建议在底部设置样式，单位为百分比方便做适配操作-->

准备配置项

官网： https://www.highcharts.com.cn/demo/highcharts#3d.

let option = {
                chart: {
                    type: "pie",
                    backgroundColor: "rgba(0, 0, 0, 0)",//去掉白色背景
                    marginTop:10,//上边距
                    options3d: {
                        enabled: true,//3D启用
                        alpha: 50,//内旋转角度
                        beta: 0,//外选择角度
                    },
                },
                title: {
                    text: "",
                },
                plotOptions: {//数据列配置
                    pie: {
                        borderColor: "#000",
                        borderWidth: 1,
                        allowPointSelect: true,//是否允许选中点
                        cursor: "pointer",//同css
                        depth: 24,//3D饼图的厚度
                        dataLabels: {//数据标签
                            enabled: true, //是否启用
                            format: "{point.name}",
                            style: { //样式配置
                                textOutline: "none", //去掉文字白边
                                color: "rgba(45,153,255,1)",
                                fontSize: 11,
                            },
                        },
                    },
                },
                series: [ //数据列
                    {
                        type: "pie",
                        data: [
                            ["邮政包裹", 30],
                            ["圆通快递", 20],
                            ["京东快递", 30],
                            ["申通快递", 50],
                            ["德邦物流", 20],
                            ["天天快递", 20],
                            ["其他", 30],
                            ["顺丰快递", 10],
                            ["中通快递", 30],
                            ["韵达快递", 20],
                        ],
                    },
                ],
            };
// 图表初始化函数
        Highcharts.chart("DispatchProportion", option);