水球图，也被称为环形图或饼图的一种变体，因其独特的外观和易于理解的视觉表达，在数据可视化领域越来越受欢迎。ECharts 是一个使用 JavaScript 实现的开源可视化库，它可以帮助我们轻松创建各种图表，包括水球图。本文将手把手教你如何使用 ECharts2 制作一个简单的水球图。

环境准备

在开始之前，请确保你的开发环境中已经安装了 Node.js 和 npm（Node.js 包管理器）。然后，按照以下步骤操作：

  1. 创建项目目录：在命令行中输入 mkdir waterball-chart && cd waterball-chart 创建一个名为 waterball-chart 的项目目录，并进入该目录。
  2. 初始化 npm：在命令行中输入 npm init -y 初始化 npm。
  3. 安装 ECharts：在命令行中输入 npm install echarts --save 安装 ECharts。

制作水球图

1. HTML 结构

首先，我们需要创建一个 HTML 文件来展示我们的水球图。创建一个名为 index.html 的文件，并添加以下内容：

<!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/4.9.0/echarts.min.js"></script>
    <script src="main.js"></script>
</body>
</html>

这里，我们创建了一个 container 元素来放置我们的水球图，并引入了 ECharts 的 CDN 链接和我们的 JavaScript 文件 main.js。

2. JavaScript 代码

接下来，我们需要编写 JavaScript 代码来配置水球图。在 main.js 文件中，添加以下代码：

// 基于准备好的dom，初始化echarts实例
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: '#4585EC'
                },
                percentage: 50 // 这里设置为50%，你可以根据实际数据修改这个值
            },
            axisLine: {
                lineStyle: {
                    width: 20,
                    color: [
                        [0.7, '#4585EC'],
                        [1, '#F4F4F4']
                    ]
                }
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                show: false
            },
            title: {
                show: false
            },
            detail: {
                valueAnimation: true,
                formatter: '{value}%',
                color: 'auto'
            }
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

在这段代码中，我们创建了一个 gauge 类型的图表，并设置了它的起始角度、结束角度、指针样式、进度条样式、轴线样式等。percentage 属性表示进度条的百分比，你可以根据实际数据修改这个值。

3. 预览效果

保存 index.html 和 main.js 文件，并在浏览器中打开 index.html 文件。你应该能看到一个水球图，进度条的百分比设置为 50%。

总结

通过以上步骤，你已经学会了如何使用 ECharts2 制作一个简单的水球图。你可以根据实际需求调整图表的样式和数据，使你的数据可视化更加美观和易于理解。希望这篇文章能帮助你入门 ECharts2 的水球图制作，祝你学习愉快！