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

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

先来一个效果图

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

需要源码或vue重构，请转文章https://blog.csdn.net/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>
            <span class="icon-item">罪犯</span>
        </div>

        <!-- ** 列表 ** -->
        <div id="regionDistribution" class="region-distribution-list" data-control="Compo