之前写了一个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