在数据可视化领域，ECharts 是一款非常流行的 JavaScript 库，它可以帮助我们轻松创建各种图表，包括水球图。水球图以其独特的 3D 效果，能够直观地展示数据的比例关系，非常适合用来展示市场份额、占比等。下面，我将一步步教你如何使用 ECharts 制作一个具有 3D 效果的水球图。

准备工作

在开始之前，请确保你已经安装了 ECharts。你可以通过以下命令进行安装：

npm install echarts --save

或者，如果你使用的是 CDN，可以直接在 HTML 文件中引入 ECharts：

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>

创建基本的水球图

首先，我们需要创建一个基本的 HTML 结构，并引入 ECharts：

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
    <script type="text/javascript">
        // ECharts 图表初始化
        var myChart = echarts.init(document.getElementById('container'));
        // 配置图表选项
        var option = {
            // ... (后续配置项)
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

添加水球图配置

接下来，我们需要在 option 对象中添加水球图的配置。ECharts 提供了 gauge 类型的图表，可以用来创建水球图。以下是水球图的基本配置：

var option = {
    series: [
        {
            type: 'gauge',
            startAngle: 90,
            endAngle: -270,
            pointer: {
                show: false
            },
            progress: {
                show: true,
                overlap: false,
                roundCap: true,
                clip: false,
                itemStyle: {
                    color: '#3ed1fd'
                },
                percentage: 50 // 占比，这里以 50% 为例
            },
            axisLine: {
                lineStyle: {
                    color: [[0.2, '#3ed1fd'], [0.8, '#3ed1fd'], [1, '#3ed1fd']],
                    width: 20
                }
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                show: false
            },
            anchor: {
                show: false
            },
            title: {
                show: false
            },
            detail: {
                valueAnimation: true,
                formatter: '{value}%',
                color: 'auto'
            }
        }
    ]
};

添加 3D 效果

为了给水球图添加 3D 效果，我们可以使用 ECharts 的 effectScatter 系列来实现。以下是添加 3D 效果的配置：

var option = {
    series: [
        {
            type: 'gauge',
            // ... (其他配置项)
        },
        {
            type: 'effectScatter',
            coordinateSystem: 'gauge',
            zlevel: 0,
            rippleEffect: {
                brushType: 'stroke'
            },
            symbolSize: 10,
            itemStyle: {
                color: '#f4e925',
                shadowBlur: 10,
                shadowColor: '#333'
            },
            data: [
                {
                    value: 50,
                    symbol: 'circle',
                    symbolSize: 30
                }
            ]
        }
    ]
};

完整代码

将上述代码整合到 HTML 文件中，你就可以看到一个具有 3D 效果的水球图了。以下是完整的代码：

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('container'));
        var option = {
            series: [
                {
                    type: 'gauge',
                    startAngle: 90,
                    endAngle: -270,
                    pointer: {
                        show: false
                    },
                    progress: {
                        show: true,
                        overlap: false,
                        roundCap: true,
                        clip: false,
                        itemStyle: {
                            color: '#3ed1fd'
                        },
                        percentage: 50
                    },
                    axisLine: {
                        lineStyle: {
                            color: [[0.2, '#3ed1fd'], [0.8, '#3ed1fd'], [1, '#3ed1fd']],
                            width: 20
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    anchor: {
                        show: false
                    },
                    title: {
                        show: false
                    },
                    detail: {
                        valueAnimation: true,
                        formatter: '{value}%',
                        color: 'auto'
                    }
                },
                {
                    type: 'effectScatter',
                    coordinateSystem: 'gauge',
                    zlevel: 0,
                    rippleEffect: {
                        brushType: 'stroke'
                    },
                    symbolSize: 10,
                    itemStyle: {
                        color: '#f4e925',
                        shadowBlur: 10,
                        shadowColor: '#333'
                    },
                    data: [
                        {
                            value: 50,
                            symbol: 'circle',
                            symbolSize: 30
                        }
                    ]
                }
            ]
        };
        myChart.setOption(option);
    </script>
</body>
</html>

通过以上步骤，你就可以轻松制作一个具有 3D 效果的水球图了。希望这篇文章能帮助你更好地理解 ECharts 水球图的使用方法。