ECharts 极坐标柱状图教程：自定义标签位置与样式，轻松实现数据可视化」「前端数据可视化：ECharts 极坐标柱状图实战，附完整代码与详细注释」「ECharts 极坐标柱状图入门：从零开始实

最新推荐文章于 2025-05-07 15:45:09 发布

原创最新推荐文章于 2025-05-07 15:45:09 发布 · 1.1k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #echarts #信息可视化

echarts图表从入门到精通专栏收录该内容

22 篇文章

订阅专栏

效果图

在这里插入图片描述

🌟【定制化开发服务，让您的项目领先一步】🌟

如有需求，直接私信留下您的联系方式。谢谢。
我的邮箱：2351598671@qq.com

正文

1. 前言

在前端开发中，数据可视化是一个非常重要的领域。ECharts 作为一款由百度开源的数据可视化工具，凭借其强大的功能和灵活的配置，成为了许多开发者的首选。本文将带领大家学习如何使用 ECharts 实现极坐标柱状图，并重点讲解如何自定义标签的位置与样式。

2. 极坐标柱状图简介

极坐标柱状图是将柱状图的数据展示在极坐标系中的一种图表类型。它的 X 轴是角度轴，Y 轴是半径轴。每个柱子的长度表示数据的大小，角度表示数据的分类。这种图表适合展示周期性数据（如小时、月份）或方向性数据（如风向）。

3. 实现步骤

3.1 初始化 ECharts 实例

首先，我们需要初始化一个 ECharts 实例，并绑定到一个 DOM 容器上。

var myChart = echarts.init(document.getElementById('main'));

3.2 配置标题

通过 title 配置项，我们可以为图表添加标题。

title: [
    {
        text: 'Tangential Polar Bar Label Position (middle)' // 标题内容
    }
]

3.3 配置极坐标系

在 ECharts 中，极坐标系的配置通过 polar 属性实现。我们需要设置极坐标系的半径范围。

polar: {
    radius: [30, '80%'] // 极坐标系的半径范围，30 是最小半径，80% 是最大半径
}

3.4 配置角度轴与半径轴

角度轴：通过 angleAxis 配置项设置角度轴的最大值和起始角度。
半径轴：通过 radiusAxis 配置项设置半径轴的类型和数据。

angleAxis: {
    max: 4, // 角度轴的最大值
    startAngle: 75 // 起始角度，75 度表示从右上角开始
},
radiusAxis: {
    type: 'category', // 半径轴的类型为类目轴
    data: ['a', 'b', 'c', 'd'] // 半径轴的类目数据
}

3.5 配置数据系列与标签

通过 series 配置项，我们可以添加柱状图的数据，并为其设置标签。

series: {
    type: 'bar', // 图表类型为柱状图
    data: [2, 1.2, 2.4, 3.6], // 柱状图的数据
    coordinateSystem: 'polar', // 使用极坐标系
    label: {
        show: true, // 显示标签
        position: 'middle', // 标签位置在柱子中间
        formatter: '{b}: {c}' // 标签内容格式：类目名称 + 数据值
    }
}

4. 完整代码示例（带详细注释）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts 极坐标柱状图示例</title>
    <!-- 引入 ECharts 的 CDN 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>
</head>
<body>
    <!-- 创建一个 div 容器，用于放置 ECharts 图表 -->
    <div id="main" style="width: 600px;height:400px;"></div>

    <script>
        // 初始化 ECharts 实例，绑定到 id 为 'main' 的 DOM 元素上
        var myChart = echarts.init(document.getElementById('main'));

        // 配置项
        var option = {
            // 标题配置
            title: [
                {
                    text: 'Tangential Polar Bar Label Position (middle)' // 标题内容
                }
            ],
            // 极坐标系配置
            polar: {
                radius: [30, '80%'] // 极坐标系的半径范围，30 是最小半径，80% 是最大半径
            },
            // 角度轴配置
            angleAxis: {
                max: 4, // 角度轴的最大值
                startAngle: 75 // 起始角度，75 度表示从右上角开始
            },
            // 半径轴配置
            radiusAxis: {
                type: 'category', // 半径轴的类型为类目轴
                data: ['a', 'b', 'c', 'd'] // 半径轴的类目数据
            },
            // 数据系列配置
            series: {
                type: 'bar', // 图表类型为柱状图
                data: [2, 1.2, 2.4, 3.6], // 柱状图的数据
                coordinateSystem: 'polar', // 使用极坐标系
                label: {
                    show: true, // 显示标签
                    position: 'middle', // 标签位置在柱子中间
                    formatter: '{b}: {c}' // 标签内容格式：类目名称 + 数据值
                }
            }
        };

        // 将配置项应用到图表中，渲染图表
        myChart.setOption(option);
    </script>
</body>
</html>

代码解析（逐行注释）

HTML 部分：
- <div id="main" style="width: 600px;height:400px;"></div>：创建一个 div 容器，用于放置 ECharts 图表。
JavaScript 部分：
- var myChart = echarts.init(document.getElementById('main'));：初始化 ECharts 实例。
- title：配置图表标题。
- polar：配置极坐标系，设置半径范围。
- angleAxis：配置角度轴，设置最大值和起始角度。
- radiusAxis：配置半径轴，设置类型和数据。
- series：配置数据系列，设置柱状图类型、数据、标签等。
  - label：为柱子添加标签，显示类目名称和数据值。