使用highcharts实现3D饼图

最新推荐文章于 2026-01-12 08:30:00 发布

原创最新推荐文章于 2026-01-12 08:30:00 发布 · 949 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#echarts #vue.js

本文介绍了如何在Vue.js应用中使用highcharts库来实现3D饼图。首先，需要通过npm安装highcharts、highcharts-3d和highcharts-vue。接着，将highcharts-3d集成到highcharts中，并在项目中引入Highcharts。数据结构包含'name'和'y'属性，用于表示饼图的名称和数值。最后，确保设置图表容器的大小以避免错误。

1.安装

install highcharts --save

install highcharts-3d

install highcharts-vue

可以全局挂载也可以在要使用的页面中挂载

import Highcharts from "highcharts/highcharts";

import highcharts3d from "highcharts/highcharts-3d";

highcharts3d(Highcharts);

queryPie(legend,series) {
            const data = [];
            //装图形容器的id    EchartsPie
            var chart = Highcharts.chart("EchartsPie", {
                chart: {
                type: "pie",
                backgroundColor: "none",
                margin: [-50, 0, 60, -360],//饼图位置控制
                options3d: {
                    enabled: true,
                    alpha: 48, //整体倾斜度
                    beta: 0, //向左倾斜为正  向右倾斜为负
                },
                },
                title: {
                text: "",
                },
                tooltip:{
                    enabled:true
                },
                //1、 这时候设置的图例是不显示的
                legend: {
                    shadow: false,
                    layout: "horizontal",
                    align: "right", // 水平方向位置
                    verticalAlign: "top", // 垂直方向位置
                    x: 50, // 距离x轴的距离
                    y: 0, // 距离Y轴的距离
                    symbolPadding: 10,
                    symbolHeight: 10,
                    symbolRadius:50,//图例圆角弧度
                    itemStyle: {
                        fontSize: '12px',
                        color: '#91B0CD'
                    },
                },
                colors: ["#FFAD2E", "#9933FF", "#68C2FF", '#50FB50','#4E6EFA','#9A6803','#179F96','#67CCCC','#D1E4FF','#FF3232'],//饼图颜色数组
                plotOptions: {
                pie: {
                    allowPointSelect:true,
                    //用来控制饼图的大小
                    size: "40%",
                    depth: 16, //3d饼图的高度
                    showInLegend: true, //重点图例显示
                    dataLabels: { //图例标签隐藏
                        enabled: false
                    }
                },
                },
                series: [
                {
                    type: "pie",
                    name: "",
                    data: series,//数据
                    label:{
                        normal:{
                        show:false
                        },
                    },
                    labelLine:{
                        normal:{
                        show:false
                        }
                    },
                },
                ],
            });
            document.getElementsByClassName('highcharts-no-tooltip')[0].setAttribute("transform","translate(138,10)") //修改图例位置
        },

数据格式为：