背景
我们经常在网上看到各种绚烂的数据展示仪表板，例如：
那我们如何实现这种效果了？
本文将讲叙如何利用vue-grid-layout和echarts制作数据可视化仪表板。
这是最终的效果图，
工具
vue-grid-layout：基于vue的栅格拖动布局组件。
echarts：一款用于图表可视化的插件，可以用来制作各种图表。
JavaScript：
代码
说明：以下代码只供参考，由于进行了一部分删减调整，直接拷贝肯定是不能够运行的。
<!DOCTYPE html> <html> <head> <title>仪表板</title> <script src="./js/vue.js" type="text/javascript"></script> <script src="./js/vue-grid-layout.umd.min.js" type="text/javascript"></script> <script src="./js/echarts.min.js"></script> <script src="./js/chart-style.js"></script> <script> var board = new Vue({ el: '#dashboard', data: { editFlag: true, //是否是编辑态 layout: [], //初始化卡片数组 layoutMap: [], //卡片二维地图 resizeTimer: null, layoutColNum: 12 //列 }, methods:{ layoutReadyEvent:function(){ this.initBoard(); this.layoutMap = this.genereatePlaneArr(this.layout); }, // 当插件内容布局发生变化后 获取现在的二维地图树 layoutUpdatedEvent: function() { // console.log("Updated"); this.layoutMap = this.genereatePlaneArr(this.layout); }, //调整卡片大小 resizedEvent:function (index) { if (this.resizeTimer) clearTimeout(this.resizeTimer); var _this = this; this.resizeTimer = setTimeout(function () { var mychart = _this.layout[index]['myChart']; mychart.resize(); }, 100); }, //调整卡片大小 windowResizeEvent:function(){ if (this.resizeTimer) clearTimeout(this.resizeTimer); var _this = this; this.resizeTimer = setTimeout(function () { for(var i = 0; i<_this.layout.length; i++){ var mychart = _this.layout[i]['myChart']; mychart.resize(); } }, 100); }, //仪表板初始化 initBoard:function(){ for(var i = 0; i<this.layout.length; i++){ this.queryChartData(i, i*200); } }, //删除卡片 deleteChartUnit:function (index) { this.layout.splice(index,1); }, //修改卡片参数 editChartUnit:function(index){ // console.log(index); this.layout[index].paramList = newParamList; this.layout[index].showFlag = "0"; this.$nextTick(() => {this.queryChartData(index, 0);}); }, //添加卡片 addChartUnit:function(){ var item = {}; item.chartUnitCname = "图一"; item.chartType = "line"; item.chartData = []; item.showFlag = '0'; item.x = 0; item.y = 0; item.w = 6; item.h = 4; item.i = uuid(32, 36); var itemW = item.w; var itemH = item.h; var addItem = item; if(this.layoutMap.length){ // console.log(this.layoutMap.length); for(let r = 0 , rLen =this.layoutMap.length ; r < rLen; r++){ for(let c = 0; c <= (this.layoutColNum-itemW); c++){ let res = this.regionalTest(c, r, itemW,rLen>(r+itemH)?itemH:rLen-r ); if(res.result){ // 更新添加数据内容 addItem.x = res.x; addItem.y = res.y; c = this.layoutColNum+1; r = rLen+1; }else{ c = res.offsetX; } } } } // 更新二维数组地图 for(let itemR = 0 ; itemR < itemH ; itemR++){ for(let itemC = 0 ; itemC < itemW ; itemC++){ // 如果没有该行，初始化 if(!this.layoutMap[addItem.y+itemR]){ this.layoutMap[addItem.y+itemR] = new Array(this.layoutColNum); for(let i = 0 ;i < this.layoutColNum ; i++){ this.layoutMap[addItem.y+itemR][i] = 0; } } // 标记点 this.layoutMap[addItem.y+itemR][addItem.x+itemC] = 1; } } // console.log(this.layoutMap); // 添加数据 this.layout.push(addItem); this.$nextTick(() => {this.queryChartData(this.layout.length-1, 0);}); }, //获取后台数据 queryChartData : function (index, time) { setTimeout( () => { //防止同时请求对后台造成压力 this.layout[index].chartData = {"dataX":['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], "dataY":[150, 230, 224, 218, 135, 147, 260]}; this.drawChart(index); }, time); }, //绘图-echarts drawChart:function (index) { var elementId = this.layout[index].i; var chartData = this.layout[index].chartData; if(chartData.status == 1 ){ this.layout[index].showFlag = "1"; this.$nextTick(() => { var chartType = this.layout[index].chartType; var myChart = echarts.init(document.getElementById(elementId)); myChart.clear(); if(chartType === 'line'){ var option = { xAxis: { type: 'category', data: chartData.dataX }, yAxis: { type: 'value' }, series: [ { type: 'line' } ] }; //设置样式 myChart.setOption(option); //设置数据 myChart.setOption({ series: { data: chartData.dataY } }); } this.layout[index]['myChart'] = myChart; }) }else { this.layout[index].showFlag = "-1"; } }, //卡片地图 regionalTest: function (x,y,w,h) { // 定义返回 x,y 偏移 及 是否有空位置 let offsetX = 0,offsetY = 0,res = true; // 按区域循环检测 二维数组地图 for(let r = 0; r < w ;r++){ for(let c = 0; c <= h ;c++){ let point = this.layoutMap[y+r]?this.layoutMap[y+r][x+c]:0; // 如该点被占据 记录偏移值 if(point===1){ res = false; offsetX = offsetX>(x+c)?offsetX:x+c; offsetY = offsetY>(y+r)?offsetY:y+r; } } } return { result: res, offsetX: offsetX, x: x, y: y }; }, //卡片地图 genereatePlaneArr: function (data) { var map = []; if(Array.isArray(data)){ for(var i = 0; i<data.length; i ++){ var one = data[i]; // 循环行 for(var r = one.y ; r < ( one.y + one.h ) ; r++){ // 循环列 for(var c = one.x ; c < ( one.x + one.w) ; c++){ // 检修当前行是否存在 if(!map[r]){ map[r] = new Array(this.layoutColNum); for(let i = 0 ; i < this.layoutColNum ; i++){ map[r][i] = 0; } } // 占据为1 map[r][c] = 1; } } } } return map; }, //比较卡片参数是否发生调整 compareParams: function (oldParamList, newParamList ) { if(oldParamList.length == 0){ return true; }else { for (var i=0; i<oldParamList.length; i++){ if(oldParamList[i].value != newParamList[i].value){ return false; } } return true; } } } }); //页面窗口改变图大小调整 window.onresize = function(){ board.windowResizeEvent(); }; //uuid function uuid(len, radix) { var chars = '0123456789abcdefghijklmnopqrstuvwxyz'.split( ''); var uuid = [], i; radix = radix || chars.length; if (len) { // Compact form for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random()*radix]; } else { // rfc4122, version 4 form var r; // rfc4122 requires these characters uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-' ; uuid[14] = '4' ; // Fill in random data. At i==19 set the high bits of clock sequence as // per rfc4122, sec. 4.1.5 for (i = 0; i < 36; i++) { if (!uuid[i]) { r = 0 | Math.random()*16; uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r]; } } } return uuid.join( '' ); } </script> <style> .isEdit { background: #efefef; background-image: linear-gradient(0deg, #f8f8f8 10px, transparent 0.1em), linear-gradient(90deg, #f8f8f8 10px, transparent 0.1em); background-size: calc(8.33333% - 2px) 100px; background-position-y: 10px; background-attachment: local, scroll; overflow-y: scroll; } .dashboard_content { align-self: stretch; height: 0; flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; position: relative; } .vue-grid-layout > div { box-shadow: 1px 1px 5px #e3e3e3; background: #FFF; } .card { width: 100%; height: 100%; display: flex; flex-flow: column nowrap; } .card-top { margin-top: 10px; font-size: 16px; flex-basis: 20px; display: flex; } .card-title { float: left; margin-left: 8px; margin-right: 8px; flex: 1; } .card-top-icon { cursor: pointer; width: 20px; margin-right: 8px; } .card-title-content { white-space: nowrap; overflow: hidden; display: inline-block; text-overflow: ellipsis; } .card-body { width: 100%; flex: 1; } .loading { width: 100px; height: 50px; margin: 0 auto; margin-top: 100px; } .loading span { display: inline-block; width: 15px; height: 15px; margin-right: 5px; border-radius: 50%; background: lightblue; -webkit-animation: load 1.04s ease infinite; } .loading span:last-child { margin-right: 0px; } @-webkit-keyframes load { 0% { opacity: 1; } 100% { opacity: 0; } } .loading span:nth-child(1) { -webkit-animation-delay: 0.13s; } .loading span:nth-child(2) { -webkit-animation-delay: 0.26s; } .loading span:nth-child(3) { -webkit-animation-delay: 0.39s; } .loading span:nth-child(4) { -webkit-animation-delay: 0.52s; } .loading span:nth-child(5) { -webkit-animation-delay: 0.65s; } </style> </head> <body> <div style="width: 100%;height:100%;"> <div id="dashboard" style="height: 100%;display: none;" v-bind:class="{ isEdit: editFlag }"> <grid-layout :layout.sync="layout" :col-num="12" :row-height="90" :is-draggable="editFlag" :is-resizable="editFlag" :is-mirrored="false" :vertical-compact="true" :margin="[10, 10]" :use-css-transforms="true" @layout-updated="layoutUpdatedEvent" @layout-ready="layoutReadyEvent"> <grid-item v-for="(item,index) in layout" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i" :max-w="12" :key="item.i" @resized="resizedEvent(index)"> <div class="card"> <div class="card-top"> <div class="card-title card-title-content"> {{item.chartUnitCname}}</div> <div v-if="editFlag" class="card-top-icon" @click="editChartUnit(index)"> <i class="fa fa-cog" aria-hidden="true" title="编辑" style="margin-right: 10px;"></i> </div> <div v-if="editFlag" class="card-top-icon" @click="deleteChartUnit(index)" style='float:right;cursor:pointer'> <i class="fa fa-trash" aria-hidden="true" title="删除" style="margin-right: 10px;"></i> </div> </div> <div class="card-body"> <div v-show="item.showFlag=='0'" class="loading"> <span></span><span></span><span></span><span></span><span></span></div> <div v-show="item.showFlag=='1'" :id="item.i" style="width: 100%;height: 100%"></div> <div v-show="item.showFlag=='-1'" style="text-align: center;font-size: 14px;"> {{item.msg}} </div> </div> </div> </grid-item> </grid-layout> </div> </div> </body> </html>
其它
卡片地图位置信息维护参考了网上前辈代码，找了好久没有找到该篇文章，就没贴文章链接了。。。
