Echarts横向堆叠柱状图和markLine怎么使用

发布时间：2022-06-06 10:38:57 作者：zzz
来源：亿速云阅读：281

Echarts横向堆叠柱状图和markLine怎么使用

Echarts 是一个由百度开源的数据可视化库，它提供了丰富的图表类型和灵活的配置选项，能够帮助开发者快速构建出美观、交互性强的数据可视化图表。本文将详细介绍如何在 Echarts 中使用横向堆叠柱状图（Horizontal Stacked Bar Chart）以及如何结合 markLine 来实现更复杂的数据展示。

1. 横向堆叠柱状图简介

横向堆叠柱状图是一种将多个数据系列在水平方向上堆叠显示的柱状图。每个柱子的长度代表数据的大小，而柱子内部的堆叠部分则代表不同系列的数据。这种图表常用于展示多个类别的数据在不同维度上的分布情况。

2. 基本配置

首先，我们需要引入 Echarts 库，并创建一个容器来放置图表。以下是一个简单的 HTML 结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Horizontal Stacked Bar Chart with markLine</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script>
        // 在这里编写 Echarts 配置
    </script>
</body>
</html>

3. 配置横向堆叠柱状图

接下来，我们将在 script 标签中编写 Echarts 的配置代码。以下是一个简单的横向堆叠柱状图的配置示例：

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

var option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['系列1', '系列2', '系列3']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: ['类别1', '类别2', '类别3', '类别4', '类别5']
    },
    series: [
        {
            name: '系列1',
            type: 'bar',
            stack: '总量',
            data: [120, 132, 101, 134, 90]
        },
        {
            name: '系列2',
            type: 'bar',
            stack: '总量',
            data: [220, 182, 191, 234, 290]
        },
        {
            name: '系列3',
            type: 'bar',
            stack: '总量',
            data: [150, 232, 201, 154, 190]
        }
    ]
};

myChart.setOption(option);

3.1 配置解析

tooltip: 配置提示框，trigger: 'axis' 表示触发方式为坐标轴触发，axisPointer: { type: 'shadow' } 表示鼠标悬停时显示阴影。
legend: 配置图例，data 中的每一项对应一个系列的名称。
grid: 配置图表的位置和大小，containLabel: true 表示包含坐标轴的标签。
xAxis: 配置 X 轴，type: 'value' 表示 X 轴为数值轴。
yAxis: 配置 Y 轴，type: 'category' 表示 Y 轴为类目轴，data 中的每一项对应一个类目。
series: 配置数据系列，type: 'bar' 表示柱状图，stack: '总量' 表示将多个系列堆叠在一起，data 中的每一项对应一个数据点。

4. 使用 `markLine` 添加标记线

markLine 是 Echarts 中用于在图表中添加标记线的功能。我们可以通过 markLine 来标记某些特定的数据点或范围。以下是如何在横向堆叠柱状图中使用 markLine 的示例：

var option = {
    // 其他配置保持不变...
    series: [
        {
            name: '系列1',
            type: 'bar',
            stack: '总量',
            data: [120, 132, 101, 134, 90],
            markLine: {
                data: [
                    { type: 'average', name: '平均值' },
                    { yAxis: '类别3', name: '标记线' }
                ]
            }
        },
        {
            name: '系列2',
            type: 'bar',
            stack: '总量',
            data: [220, 182, 191, 234, 290]
        },
        {
            name: '系列3',
            type: 'bar',
            stack: '总量',
            data: [150, 232, 201, 154, 190]
        }
    ]
};

4.1 配置解析

markLine: 配置标记线，data 中的每一项表示一条标记线。
- { type: 'average', name: '平均值' }: 表示在系列1的数据上添加一条表示平均值的标记线。
- { yAxis: '类别3', name: '标记线' }: 表示在 Y 轴的 类别3 处添加一条标记线。

5. 完整示例

将上述配置整合在一起，完整的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Horizontal Stacked Bar Chart with markLine</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script>
        var myChart = echarts.init(document.getElementById('main'));

        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['系列1', '系列2', '系列3']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value'
            },
            yAxis: {
                type: 'category',
                data: ['类别1', '类别2', '类别3', '类别4', '类别5']
            },
            series: [
                {
                    name: '系列1',
                    type: 'bar',
                    stack: '总量',
                    data: [120, 132, 101, 134, 90],
                    markLine: {
                        data: [
                            { type: 'average', name: '平均值' },
                            { yAxis: '类别3', name: '标记线' }
                        ]
                    }
                },
                {
                    name: '系列2',
                    type: 'bar',
                    stack: '总量',
                    data: [220, 182, 191, 234, 290]
                },
                {
                    name: '系列3',
                    type: 'bar',
                    stack: '总量',
                    data: [150, 232, 201, 154, 190]
                }
            ]
        };

        myChart.setOption(option);
    </script>
</body>
</html>

6. 总结

通过本文的介绍，我们了解了如何在 Echarts 中配置横向堆叠柱状图，并使用 markLine 来添加标记线。Echarts 提供了丰富的配置选项，开发者可以根据实际需求灵活调整图表的样式和功能。希望本文能帮助你在实际项目中更好地使用 Echarts 进行数据可视化。

Echarts横向堆叠柱状图和markLine怎么使用

Echarts横向堆叠柱状图和markLine怎么使用

1. 横向堆叠柱状图简介

2. 基本配置

3. 配置横向堆叠柱状图

3.1 配置解析

4. 使用 markLine 添加标记线

4.1 配置解析

5. 完整示例

6. 总结

相关阅读

4. 使用 `markLine` 添加标记线