echarts如何做出多条进度条的效果

最新推荐文章于 2025-07-15 09:53:16 发布

山野里的小菊花

最新推荐文章于 2025-07-15 09:53:16 发布

阅读量2.3w

点赞数

CC 4.0 BY-SA版权

分类专栏： echarts 原生js css3 echarts柱状图

本文链接：https://blog.youkuaiyun.com/liuxin00020/article/details/81873548

本文介绍如何利用echarts和弹性盒子布局实现多条进度条效果。通过两端对齐的方式分割数据，借助柱状图进行绘制，并通过绝对定位实现自适应布局。详细步骤包括准备DOM元素和编写JS部分，适合IE9+浏览器。完整源码和vue重构需求，请参考链接：https://blog.youkuaiyun.com/liuxin00020/article/details/90608944。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原理：弹性盒子布局，两端对齐方式将数据分割在两端，重点用echarts柱状图，绝对定位，翻页一次，echarts柱状图重新加载一次

先来一个效果图

如何做出如图所示的效果呢，虽然核心是echarts柱状图，但是还需要配合css样式，才能完成，做的是自适应的，宽高都是100%，只适用于IE9+

需要源码或vue重构，请转文章https://blog.youkuaiyun.com/liuxin00020/article/details/90608944

1、准备dom元素

<!-- ***** 区域分布 ***** -->
<div class="screen">
    <!-- **** 标题 **** -->
    <div class="screen-title">区域分布</div>

    <!-- **** 内容 **** -->
    <div class="screen-content region-distribution">

        <!-- ** 方格标注 ** -->
        <div class="icon-box">
            <span class="icon-item">警察</span>
            <