重构echarts多条进度条实现（vue+gulp）

最新推荐文章于 2024-05-31 11:37:45 发布

山野里的小菊花

最新推荐文章于 2024-05-31 11:37:45 发布

阅读量2.9k

点赞数 3

分类专栏： echarts柱状图 echarts vue

本文链接：https://blog.csdn.net/liuxin00020/article/details/90608944

版权

本文介绍了使用Vue和Gulp重构之前的Echarts多条进度条组件的过程，提供了源码链接和效果展示。通过JSON数据驱动，利用Echarts柱状图和CSS绝对定位实现，支持IE9+浏览器。

摘要由CSDN通过智能技术生成

之前写了一个echarts实现多条进度条，并定时翻页的组件，现在用vue+gulp重构了一下，稍后会贴出源码地址，很抱歉，之前没有贴出css，让某些伙伴不知所措。

点击我查看效果
如果需要源码：https://github.com/liuxin00020/test
或者在本人的资源里面下载

效果图如下：

1、实现的方式

一样的json数据列表首先构成左右两边的数据显示，中间用echarts柱状图，绝对定位实现，只支持IE9+

2、html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>echarts 实现多条进度条</title>
    <link rel="stylesheet" href="css/processbar.css">
</head>
<body>
<div id="app" class="screen">
    <!-- **** 标题 **** -->
    <div class="screen-title">区域分布</div>

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

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

        <!-- ** 列表 ** -->
        <div class="region-distribution-list">
            <div class="list-item" v-for="(item,index) in newList" :key="index">
                <span

最低0.47元/天解锁文章

山野里的小菊花

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
重构echarts多条进度条实现（vue+gulp）

之前写了一个echarts实现多条进度条，并定时翻页的组件，现在用vue+gulp重构了一下，稍后会贴出源码地址，很抱歉，之前没有贴出css，让某些伙伴不知所措。点击我查看效果如果需要源码：https://github.com/liuxin00020/test 或者在本人的资源里面下载效果图如下：1、实现的方式一样的json数据列表首先构成左右两边的数据显示，中间用echa...
复制链接

扫一扫