之前寫了一個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 class="region">{{item.region}}</span>
<div class="bg-bar"><span></span><span></span></div>
<div class="num-box">
<span class="policeNum">{{item.policeNum}}</span>
|
<span class="criminalNum">{{item.criminalNum}}</span>
</div>
</div>
<!-- ** 柱狀圖 ** -->
<div class="bar-graph">
<div id="regionBar"></div>
</div>
</div>
</div>
</div>
<script src="js/EchartsProcessBar.js"></script>
</body>
</html>
3、js代碼
import Vue from 'vue/dist/vue.js'
import echarts from 'echarts';
import {list} from '../asset/list.json'
Vue.prototype.$echarts = echarts;
let app = new Vue({
el: '#app',
data: {
list: list, // 模擬數據
newList: [], // 用於分頁顯示數據
pageCount: 8, // 每頁顯示的個數
},
created() {
this.newList = this.list.slice(0, this.pageCount); // 初始化第一頁數據
},
mounted() {
this.loadBar(this.newList); // 加載echarts
this.autoPlay(); // 自動翻頁
},
methods: {
// echarts柱狀圖加載
loadBar(list) {
let regions = [], policeNums = [], criminalNums = [];
// 遍歷數據列表，封裝echarts的數據格式
list.map((item) => {
regions.unshift(item.region); // 地區
policeNums.unshift(item.policeNum); // 警察人數
criminalNums.unshift(item.criminalNum); // 罪犯人數
});
// 若末尾頁不足8條，則填充0，防止樣式錯亂
let len = regions.length;
for (let i = 0; i < 8 - len; i++) {
regions.unshift(0);
policeNums.unshift(0);
criminalNums.unshift(0);
}
// echarts數據綁定開始
let chartDom = this.$echarts.init(document.getElementById("regionBar"));
chartDom.setOption({
color: ["#f5a623", "#fff"],
grid: [{//外框
top: '6.2%',
left: '0',
right: '0',
bottom: '6.4%',
containLabel: false,
}],
calculable: true,
tooltip: {
trigger: 'axis'
},
xAxis: [{
type: 'value',
splitLine: {show: false},
axisLabel: {show: false},
axisTick: {show: false},//不顯示刻度
axisLine: {show: false},
boundaryGap: false,//座標軸兩邊留白策略
}],
yAxis: [{
type: 'category',
boundaryGap: false,
position: 'top',
data: regions,
splitLine: {show: false},
axisLabel: {show: false},
axisTick: {show: false},//不顯示刻度
axisLine: {show: false},
}],
series: [
{
type: 'bar',
data: policeNums,
barWidth: 2,
},
{
type: 'bar',
data: criminalNums,
barWidth: 2,
barGap: '6px' // 兩個數據之間，間隔5px
}
]
});
},
// 自動翻頁
autoPlay() {
let playTime = 2000, // 播放間隔事件
timer = null,
page = 1,
totalPage = this.list.length % this.pageCount == 0 ? this.list.length / this.pageCount : parseInt(this.list.length / this.pageCount) + 1; // 總頁數，每頁顯示8條
// 播放函數
const play = () => {
page++;
if (page > totalPage) {
page = 1;
}
this.newList = this.list.slice((page - 1) * this.pageCount, page * this.pageCount); // 截取數組，用於展示當前頁的數據
this.loadBar(this.newList); // 重新加載柱狀圖
}
// 定時任務，翻頁
timer = setInterval(play, playTime);
// 鼠標懸浮事件，移上去，暫停定時任務
this.$el.onmouseover = (event) => {
clearInterval(timer);
};
// 鼠標移開，播放繼續
this.$el.onmouseleave = (event) => {
timer = setInterval(play, playTime);
}
},
}
});
4、scss代碼
* {
padding: 0;
border: 0;
margin: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
border: 0;
padding: 0;
margin: 0;
font-size: 16px;
font-family: '微軟雅黑 Light'
}
.screen {
width: 100%;
height: 100%;
background-color: rgb(4, 24, 70);
color: #fff;
border: 2px solid rgb(24, 59, 137);
padding: 20px;
}
.screen-title {
width: 100%;
height: 10%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
position: relative;
&:after {
content: '';
width: 100%;
height: 1px;
background: linear-gradient(to right, transparent, rgb(31, 70, 161), transparent);
position: absolute;
bottom: 0;
left: 0;
}
}
.screen-content {
width: 100%;
height: 90%;
}
.icon-box {
width: 100%;
height: 50px;
line-height: 50px;
text-align: right;
}
.icon-item {
margin-left: 10px;
display: inline-flex;
align-items: center;
text-indent: 5px;
&:before {
content: '';
width: 8px;
height: 8px;
background-color: #fff;
}
&:first-child::before {
background-color: rgb(245, 167, 30);
}
}
.region-distribution-list {
width: 100%;
height: calc(100% - 50px);
display: flex;
flex-direction: column;
position: relative;
}
.list-item {
width: 100%;
height: 12.5%;
display: flex;
align-items: center;
justify-content: space-between;
}
.region {
width: 100px;
}
.bg-bar {
flex: 1;
span {
width: 100%;
height: 6px;
display: block;
background-color: rgb(1, 13, 48);
margin-bottom: 8px;
&:last-child {
margin-bottom: 0;
}
}
}
.num-box {
width: 100px;
display: flex;
justify-content: center;
}
.policeNum {
padding-right: 10px;
color: rgb(245, 167, 30);
width: 50%;
text-align: right;
}
.criminalNum {
padding-left: 10px;
width: 50%;
}
.bar-graph {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
padding: 0 100px;
#regionBar {
width: 100%;
height: 100%;
}
}