echarts 3D环状饼图

最新推荐文章于 2026-05-31 14:23:15 发布

原创

最新推荐文章于 2026-05-31 14:23:15 发布 · 4.4k 阅读

标签

#echarts #javascript #html

本文介绍如何利用Echarts库制作引人注目的3D环状饼图，详细阐述配置项和JavaScript代码实现，适用于网页数据可视化展示。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style lang="">
        #pie3D {
     
     
            width: 500px;
            height: 300px;
        }
    </style>
</head>

<body>
    <div id="pie3D"></div>
    <script src="./echarts.js"></script>
    <script src="./echarts-gl.js"></script>
    <script>
        // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
        function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, height) {
     
     

            // 计算
            let midRatio = (startRatio + endRatio) / 2;

            let startRadian = startRatio * Math.PI * 2;
            let endRadian = endRatio * Math.PI * 2;
            let midRadian = midRatio * Math.PI * 2;

            // 如果只有一个扇形，则不实现选中效果。
            if (startRatio === 0 && endRatio === 1) {
     
     
                isSelected = false;
            }

            // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
            k = typeof k !== 'undefined' ? k : 1 / 3;

            // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
            let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
            let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;

            // 计算高亮效果的放大比例（未高亮，则比例为 1）
            let hoverRate = isHovered ? 1.05 : 1;

            // 返回曲面参数方程
            return {
     
     

                u: {
     
     
                    min: -Math.PI

最低0.47元/天解锁文章