Echarts 极坐标柱状图的详细配置过程

最新推荐文章于 2024-03-28 07:30:00 发布

梁辰兴

最新推荐文章于 2024-03-28 07:30:00 发布

阅读量958

点赞数 1

分类专栏： Echarts 文章标签： echarts 前端 javascript 极坐标柱状图

本文链接：https://blog.csdn.net/m0_62617719/article/details/132968583

版权

Echarts 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

文章目录

极坐标柱状图简介
配置步骤
简易示例

极坐标柱状图简介

极坐标柱状图是一种特殊的二维坐标图，它以极坐标为基础，将数据以柱状的形式展现出来。

在极坐标柱状图中，分类轴对应于角度轴，而指标轴则对应于径向轴。这种图形的优点在于能够保留直角坐标系中数据变化趋势的优点，同时以更为美观的形式展现出来。

然而需要注意的是，极坐标柱状图并不能很好地表示趋势，且在展示的数据量方面比普通柱状图更为有限。

配置步骤

Echarts 是一个基于 JavaScript 的开源可视化库，它可以帮助用户快速创建各种类型的图表。极坐标柱状图是 Echarts 中的一种图表类型，它可以将数据表示为在极坐标系上的柱状图。

以下是使用 Echarts 创建极坐标柱状图的详细配置过程：
这段代码的配置步骤如下：

创建一个HTML文件，并在头部引入ECharts的JavaScript文件，即<script src="echarts.min.js"></script>。
在HTML文件中创建一个<div>元素，用于显示图表。该元素的ID为main，宽度为600像素，高度为400像素。
在<script>标签中，使用echarts.init方法初始化图表实例，并将其赋值给变量myChart。
创建一个名为option的对象，用于配置图表的选项。
在option对象中，设置标题（title）为“极坐标柱状图”。
配置角度轴（angleAxis），设置类型为值（value），起始角度为0。
配置半径轴（radiusAxis），设置最小值为0，最大值为80。
配置极坐标系（polar），为空对象。
配置系列（series），包含一个对象，用于配置柱状图的选项。
在系列对象中，设置类型为柱状图（bar），坐标系类型为极坐标系（polar）。
配置数据（data），包含一组对象，每个对象表示一个柱状图的数据点。每个数据点包含一个值和一个名称。
配置标签（label），设置显示标签（show）为true，标签位置（position）为右侧（right），标签内容格式器（formatter）为{b}: {c}，其中{b}表示数据项的名称，{c}表示数据项的值。
配置图元样式（itemStyle），设置柱状图的颜色为红色（red）。
使用myChart.setOption(option)方法将配置选项应用于图表实例，从而渲染出极坐标柱状图。

综上所述，这段代码的配置步骤主要是创建一个极坐标柱状图，并对其进行详细的配置，包括标题、角度轴、半径轴、极坐标系、系列、数据、标签和图元样式等方面的设置。

简易示例

首先，极坐标柱状图不是ECharts的默认图表类型，但我们可以使用一些技巧来实现极坐标标签图。以下是一个使用 Echarts 创建极坐标柱状图的 HTML 示例：

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>ECharts</title>  
    <script src="echarts.min.js"></script>  
</head>  
<body>  
    <div id="main" style="width: 600px;height:400px;"></div>  
  
    <script type="text/javascript">  
        var myChart = echarts.init(document.getElementById('main'));  
        var option = {  
            title: [
              {
              text: '极坐标柱状图',
            }
          ],
            angleAxis: {  
                type: 'value',  
                startAngle: 0,  
            },  
            radiusAxis: {  
                min: 0,  
                max: 80
            },  
            polar: {},  
            series: [{  
                type: 'bar',  
                coordinateSystem: 'polar',  
                data: [  
                    {value: 10, name: '一月'},  
                    {value: 20, name: '二月'},  
                    {value: 30, name: '三月'},  
                    {value: 40, name: '四月'},  
                    {value: 50, name: '五月'},  
                    {value: 60, name: '六月'},  
                ],  
                label: {  
                    show: true,  
                    position: 'right',  
                    formatter: '{b}: {c}'  
                },  
                itemStyle: {  
                    color: 'red'  
                }  
            }],  
        };  
        myChart.setOption(option);  
    </script>  
</body>  
</html>

在上述代码中，我们首先引入了ECharts库，然后在HTML页面中创建了一个用于展示图表的div元素。在JavaScript部分，我们首先初始化了一个ECharts实例，然后定义了一个option对象，该对象定义了图表的各项配置。

在option对象中，angleAxis定义了极坐标的角度轴，radiusAxis定义了半径轴，polar是极坐标相关配置，series定义了数据系列。在数据系列中，type为’bar’表示绘制的是柱状图，coordinateSystem设置为’polar’表示使用极坐标系。data定义了每个柱子的数据和名称，label定义了标签的显示方式和格式，itemStyle定义了柱子的颜色。

注意：此代码需要先下载ECharts库（echarts.min.js）并放置在相应的位置。你可以从ECharts的官方网站下载最新版本的库文件。

在这里插入图片描述

梁辰兴

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
Echarts 极坐标柱状图的详细配置过程

极坐标柱状图是一种特殊的二维坐标图，它以极坐标为基础，将数据以柱状的形式展现出来。在极坐标柱状图中，分类轴对应于角度轴，而指标轴则对应于径向轴。这种图形的优点在于能够保留直角坐标系中数据变化趋势的优点，同时以更为美观的形式展现出来。然而需要注意的是，极坐标柱状图并不能很好地表示趋势，且在展示的数据量方面比普通柱状图更为有限。
复制链接

扫一扫