echarts条形图横向显示数据且设置label属性Echarts条形图右侧显示数据

最新推荐文章于 2024-07-04 11:38:22 发布

原创

最新推荐文章于 2024-07-04 11:38:22 发布 · 2.9k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了如何在Echarts中让条形图数据横向显示，并通过调整label属性实现在条形图右侧展示数据。通过修改label属性，可以控制数据在图表中的显示位置，达到理想的效果。

echarts条形图横向显示数据且设置label属性Echarts条形图顶端显示数据

- 默认不显示数据
- 修改label属性控制数据显示位置

默认不显示数据

在这里插入图片描述

<!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 type="text/javascript"
        src="https://cdn.jsdelivr.net/npm/echarts-nightly@5.1.2-dev.20210512/dist/echarts.min.js"></script>

<script type="text/javascript">
    var dom = document.getElementById<