echarts-员工看板排版设计

简述：echats是百度打造的一个纯javascript的图标库，兼容大部分浏览器，对手机端的H5也页面展示效果也不错，可以提供直观，生动，可交互，可高度个性化定制数据的可视化视图，赋予用户对数据进行挖掘，整合，分析的能力。

应用

使用echarts的饼图，柱状图，子浮云，折线图做的一个员工信息展示
废话不多说，直接上效果图

代码

这里在布局上唠叨一下，我使用的是3*3+2*1的布局；flex布局兼容谷歌，但是在旧版IE上不兼容，为了解决这个问题，布局改成了百分比。以下是h5,及css样式

 <div class="body-css"><div class="item"> </div>//3*3个item,这里只列出一个
</div>

.body-css{
width:1440px;/*在ie上等比分需要具体的宽高，可以使用Jquery在js加载的时候自动计算*/
height:1061px
background:#000910;
color:white;
overflow-x:hidden;
overflow-y:auto;
}
.item{width:31.4%;
height:30.4%;
background:#30445C;
margin:10px;
float:left;
}

以下谈谈我对图形的处理

1.饼图：看图片效果直接上代码

/* * 饼图  * *///这里在对json处理的时候传了name，integral,bgColor,unit
function createPie(name,integral,bgColor,unit){var pie = {tooltip : {trigger : 'item',formatter :function(params) {var htmlStr=tipStr(params.seriesName,params.name+unit, null,params.color);return htmlStr;}},series : [ {name : name,//'总培训积分',type : 'pie',radius : [ '50%', '70%' ],startAngle : 225,avoidLabelOverlap : false,itemStyle : {},// 里层颜色label : {normal : {show : true,position : 'center',textStyle: {color: 'white'}},emphasis : {// 强调show : true,textStyle : {fontSize : '15',fontWeight : 'bold',color : 'white',}}},labelLine : {normal : {show : false}},data : [ {value : 3,name : integral,//'120分',itemStyle : {color : bgColor,borderColor : 'white',borderWidth : '3'}}, {value : 1,name : '',itemStyle : {normal : {color : 'rgba(0,0,0,0)'}}} // 透明度]} ]};return pie;
}
function tipStr(titile,name,value,color){var htmlStr='',node='<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:'+ color + ';"></span>';if(value!=null){htmlStr=htmlStr+node+titile+"<br/><span style='margin-left:15px;'>"+name + '：' + value+"</span>"; }else{htmlStr=htmlStr+node+titile+"<br/><span style='margin-left:15px;'>"+name+"</span>";}return htmlStr;
}

2.折线图

 /** 折线图 * */
function createLine(flag,model,nodeBorder,nodeColor){var  line = {title : {text : flag=="31"?model.name:"",textStyle : {color : 'white'}},tooltip : {trigger : 'axis',formatter : function(params) {var value = params[0].value, text, color = params[0].color,// 图例颜色htmlStr,i=0;var name=params[0].name;if(flag=="23"){// name=name.substring(0,2)+"-"+name.substring(2,4);htmlStr=tipStr(params[0].seriesName,name,value+model.unit,color);}   if(flag=="31"){for( i=0;i<model.integralArray.length;i++){if (value == model.integralArray[i]) {text=model.growthlLabel[i];}}htmlStr=tipStr(params[0].seriesName,name,text,color);}return htmlStr;}},toolbox : {show : false,// 工具feature : {dataZoom : {yAxisIndex : 'none'},dataView : {readOnly : false},magicType : {type : [ 'line', 'bar' ]},restore : {},saveAsImage : {}}},xAxis : {// 时间type : 'category',boundaryGap : false,data : model.yearsArray,axisLine : {show : true,lineStyle : {color : 'white'// 颜色}},axisLabel : {show : true}},grid : {x:50,},yAxis : {// 事件type : 'value',axisLabel : {margin : 2,show : false,},axisLine : {// 颜色show : false,lineStyle : {color : 'white'}},splitLine : {show : false},formatter : function(value) {var i, texts = [];if(flag=="23"){for( i=0;i<model.integralArray.length;i++){texts.push(model.integralArray[i]);}}if(flag=="31"){for( i=0;i<model.integralArray.length;i++){if (value == model.integralArray[i]) {texts.push(model.growthlLabel[i]);}}}return texts;}},series : [// 数据{name : model.name,type : 'line',data : model.integralArray,symbolSize : 12,// 拐点大小symbol : 'circle',itemStyle : {// 节点颜色normal : {color : nodeColor,//'#00B9F9',borderColor : nodeBorder,//'#055185',lineStyle : {// 折线颜色color : nodeBorder,//'#055185'}}}} ]};return line;
}

3.柱状图

 /** 柱状图* */
function createBar(model,colorList){var bar = {tooltip : {trigger: 'axis',formatter :function(params) {var htmlStr=tipStr(params[0].seriesName,params[0].name, params[0].value+model.unit,params[0].color);return htmlStr;}},xAxis : {type : 'category',data : model.yearsArray,axisLabel : {color : 'white'},splitLine : {// 分隔线show : false},axisLine : {// 颜色show : true,lineStyle : {color : 'white'}}},yAxis : {type : 'value',axisLabel : {show : false,},axisLine : {// 颜色show : false},splitLine : {show : false}},series : [ {name:model.name,data : model.integralArray,//[ 120, 200, 150, 80, 70, 110, 130 ],type : 'bar',itemStyle : {normal : {color : function(params) {// 首先定义一个数组//return colorList[params.dataIndex];//需要提出来var number=params.dataIndex+1,index=0;if(number%8==0){index=number/8-1;}else{index=number%8-1;}return colorList[index];//需要提出来}}}} ]};return bar;
}

4.子浮云

/** 3-2 字符云* labelModule:为请求后台传过来的json信息*/
function callBackLabelMdl(labelModule){var personLabel = echarts.init(document.getElementById('personLabel')),// 从前台获取id为personLabel的divcharacterClouds = {//创建字符云tooltip : {show : true,formatter :function(params) {var htmlStr=tipStr(params.seriesName,params.name,null,params.color);return htmlStr;}},series : [ {name : labelModule.name,type : 'wordCloud',size : [ '100%', '100%' ],//textRotation :[ 0, 45, 90, 0 ],rotationRange: [-60, 60],textPadding : 10,drawOutOfBound: true,autoSize : {enable : true,minSize : 1},data :labelModule.labelList,textStyle : {normal : {color:function(params){return 'rgb(' + [Math.round(Math.random() * 160),Math.round(Math.random() * 160),Math.round(Math.random() * 160)].join(',') + ')';}},emphasis: {shadowBlur: 10,shadowColor: 'white'}}} ]};personLabel.setOption(characterClouds);//给div设置option
}

5.以下是后台json数据

    ["userBaseModule":{"name":"BABY","WorkNumber":"05922","Rank":"初级研发工程师","secrecyRank":"C级","station":"xxx岗位","department":"xxx系统部","mail":"155588787@qq.com","extension":"0592-445","imgPath":"./image/by.jpg",//照片需要下载提供绝对路径},"trainModule"：{"name":"总培训积分","totalIntegral":"120分","yearsArray":["2012","2013","2014","2015","2016","2017","2018"],"integralArray":["780","755","725","735","745","725","780"]},tripModule：{"name":"总出差次数","totalSecond":"62次","yearsArray":["2012","2013","2014","2015","2016","2017","2018"],"integralArray":["100","90","80","50","80","60","100"]},//21"userDelModule":{"sex":"女","age":"23岁","workYears":"2年","graduation":"上海财经大学","education":"本科","ranks":"经理"},overtimeModule:{"name":"总加班时数","totalTime":"560小时","yearsArray":["2012","2013","2014","2015","2016","2017","2018"],"integralArray":["600","500","400","300","500","300","600"]},achievementsModule:{"name":"2018周绩效总分","totalAchievements":"76分","yearsArray":["0604","06011","0618","0625","0702","0709","0716"],"integralArray":["40","20","30","40","20","30","50"]},"growthModule":{//31  后台需要考虑，轨迹->等级"name":"成长路径","yearsArray":["2014","2015","2016","2017","2018"],"integralArray":["1","2","3","4","5"]，"growthlLabel":["职场小白","人力资源部人事专员","人力资源部人事主办","人力资源部人事副经理",""人力资源部人事经理"]},"labelModule":{"name":"人才标签","labelList":[{"name":"颜值爆表","value":"5000"},{"name":"团结","value":"3000"},{"name":"勤奋","value":"4000"},{"name":"努力","value":"3434"},{"name":"知识管理","value":"5454"},{"name":"乐观","value":"1231"},{"name":"友好","value":"3433"},{"name":"邻家姐姐","value":"6555"},{"name":"运动","value":"3333"},{"name":"测试能手","value":"1111"},{"name":"歌唱女神","value":"2222"},{"name":"管理","value":"3344"}]},"annualRankModule":{//暂定"name":"年度与阶段考核等级","annualArray":[{"name":"第一阶段","value":"500"},{"name":"第二阶段","value":"400"},{"name":"第三阶段","value":"300"},{"name":"本年度绩效等级","value":"600"}],"formatLabel":["A","B","C","A+"]},"tutorTeachingNum":{//4.1导师带教人次"name":"导师带教人次","totalNum":"30","unit":"人次","yearsArray":["2012","2013","2014","2015","2016","2017","2018"],"integralArray":["60","50","40","30","50","30","60"]},"rewardsPunishments":{//4.2奖惩总次数"name":"奖惩总次数","unit":"次","totalRewards":"100",//总奖励"totalPunishments":"20",//总惩罚"yearsArray":["2012","2013","2014","2015","2016","2017","2018"],"rewardsArray":["60","50","40","30","50","30","60"],//奖励总次数"punishmentsArray":["2","3","4","0","1","2","3"]//惩罚总次数}]

6 页面代码如下

<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><link rel="stylesheet" href="./css/ie.css"><title>员工看板</title>
</head>
<body class="body-css" id="body"><div class="main-container"><!-- 11 --><div class="item" id="userBas"><div class="left-css-1"><img id="imgPath" class="img-css"></div><div class="right-css-1"><div class="row"> 姓名：<label id="name"></label></div><div class="row"> 工号：<label id="workNumber"></label></div><div class="row"> 职级：<label id="rank"></label></div><div class="row"> 岗位：<span id="station" class="label-long"></span></div><div class="row"> 部门：<span id="department" class="label-long"></span></div><div class="row"> 邮箱：<span id="mail" class="label-long"></span></div><!-- <div class="row"> 分机：<label id="extension"></label></div> --><div class="row"> 保密等级：<label id="secrecyRank"></label></div></div></div><!-- 12 总培训积分--><div class="item"><div class="circle-css"><div id="trainScore" style="width: 100%;height: 50%;margin-top:60px;" ></div><div class="pie-label">总培训积分</div></div><div class="bar-css"><div id="trainYear" style="width: 100%;height: 100%;" ></div></div></div><!-- 13总出差次数--><div class="item"><div class="circle-css"><div id="tripCount" style="width: 100%;height: 50%;margin-top:60px;" ></div><div class="pie-label">总出差次数</div></div><div class="bar-css"><div id="tripYear" style="width: 100%;height: 100%;" ></div></div></div><!-- 21--><div class="item"><div class="block-rl-item"><div class="block-label user-font-label-css">性别</div> <div id="sex" class="block-label user-font-css"></div></div><div class="block-rl-item"><div class="block-label user-font-label-css">年龄</div><div id="age" class="block-label user-font-css"></div></div><div class="block-b-item"><div class="block-label user-font-label-css">入司年限</div><div id="workYears" class="block-label user-font-css"></div></div><div class="block-r-item"><div class="block-label user-font-label-css">毕业院校</div><div id="graduation" class="block-label user-font-css"></div></div><div class="block-r-item"><div class="block-label user-font-label-css">学历</div><div id="education" class="block-label user-font-css"></div></div><div class="block-item"><div class="block-label user-font-label-css">职称</div><span id="ranks" class="block-ranks user-font-css"></span></div></div><!-- 2.2 总加班时长数 --><div class="item"><div class="circle-css"><div id="workTime" style="width: 100%;height: 50%;margin-top:60px;" ></div><div class="pie-label">总加班时数</div></div><div class="bar-css"><div id="workYear" style="width: 100%;height: 100%;" ></div></div></div><!-- 23 2018周绩效总分--><div class="item"><div class="circle-css"><div id="achievementsScore" style="width: 100%;height: 50%;margin-top:60px;" ></div><div class="pie-label">2018周绩效总分</div></div><div class="bar-css"><div id="achievementsYear" style="width: 100%;height: 100%;" ></div></div></div><!-- 31成长路径 --><div class="item"><div id="growthPath" style="width: 100%;height: 100%;" class="padding-medium-css"></div></div><!-- 32 导师带教人次--><div class="item"><div class="circle-css"><div id="tutorTime" style="width: 100%;height: 50%;margin-top:60px;" ></div><div class="pie-label">总带教人次</div></div><div class="bar-css"><div id="tutorYear" style="width: 100%;height: 100%;" ></div></div></div><!-- 33 奖惩总次数--><div class="item"><div class="circle-css"><div id="testTime" style="width: 100%;height: 50%;margin-top:60px;" ></div><div class="pie-label">奖惩总次数</div></div><div class="bar-css"><div id="testYear" style="width: 100%;height: 100%;" ></div></div></div><!-- 41 人才标签--><div class="item-half-width"><div class="person-label">人才标签</div><div class="person-labels" id="personLabel"></div></div><!-- 42 年度阶段等级考核--><div class="item-half-width"><div class="annual-label">年度阶段等级考核</div><div class="annual-pie" id="annualPie"><div style="width: 100%;height: 100%;" id="annualCheck"></div></div></div></div><script src="./js/echarts.js"></script><script src='./js/echarts-wordcloud.js'></script><script src="./js/jquery.min.js"></script><script type="text/javascript" src="./staff/staffKB.js"></script>
</body></html>

7 staffKB.js如下

//定义对象实体
var userBaseModule=null, trainModule=null, tripModule=null,userDelModule=null, overtimeModule=null, achievementsModule=null,growthModule=null, labelModule=null, annualRankModule=null,tutorTeachingNum=null, rewardsPunishments=null;var colorList = ['#E10000', '#FF4500', '#F7A400', '#84B600','#E10000', '#E83B00', '#FAA800','#93C700'];
var defineSrc="./user.png",  postUrl="jsonServlet",annualPieRadius=60;//30
/*** ajax加载数据* */
$(function (){var userid = $("#userid").val();if($('#hrmResourceID').val()!=""&&$('#hrmResourceID').val()!="null"){userid = $('#hrmResourceID').val();}var myuserid = $("#userid").val();var seclevel = $("#seclevel").val();
//  alert(userid);initStyle();
//  alert($("#userid").attr("data-loginid"));//echarts.showLoading();    //数据加载完之前先显示一段简单的loading动画//发动请求$.ajax({type:'post',url:postUrl,dataType:"json",data:{userid:userid,myuserid:myuserid,seclevel:seclevel,loginid:$("#userid").attr("data-loginid")},success:function(result){//echarts.hideLoading();    //隐藏加载动画var resultModel=eval(result);if(resultModel.userBaseModule!=null){//1-1userBaseModule=resultModel.userBaseModule;callBackUserBs(userBaseModule);}if(resultModel.trainModule!=null){trainModule=resultModel.trainModule;callBackTrainMdl(trainModule);}if(resultModel.tripModule!=null){tripModule=resultModel.tripModule;callBacktripMdl(tripModule);}if(resultModel.userDelModule!=null){//2-1userDelModule=resultModel.userDelModule;callBackuserDel(userDelModule);}if(resultModel.overtimeModule!=null){overtimeModule=resultModel.overtimeModule;callBackOvtMdl(overtimeModule);}if(resultModel.achievementsModule!=null){achievementsModule=resultModel.achievementsModule;callBackAcmMdl(achievementsModule);}if(resultModel.growthModule!=null){//3-1growthModule=resultModel.growthModule;callBackgrowthMdl(growthModule);}if(resultModel.labelModule!=null){labelModule=resultModel.labelModule;callBackLabelMdl(labelModule);}if(resultModel.annualRankModule!=null){annualRankModule=resultModel.annualRankModule;callBackAnrMdl(annualRankModule);}if(resultModel.tutorTeachingNum!=null){tutorTeachingNum=resultModel.tutorTeachingNum;callBackturMdl(tutorTeachingNum);}if(resultModel.rewardsPunishments!=null){rewardsPunishments=resultModel.rewardsPunishments;callBackrewMdl(rewardsPunishments);}
//          if(resultModel.rewardsPunishments1!=null){//              rewardsPunishments1=resultModel.rewardsPunishments1;
//              callBackrewMdl1(rewardsPunishments1);
//          }},error:function(){//alert("您当前没有权限访问");},fail:function(res){//console.log(res);}})
})/** 1-1 回调用户信息*/
function callBackUserBs(userBaseModule){var basePath=$("#basePath").val();$('#name').text(userBaseModule.name);$('#workNumber').text(userBaseModule.workNumber);$('#rank').text(userBaseModule.rank);$('#secrecyRank').text(userBaseModule.secrecyRank);$('#station').text(userBaseModule.station);$('#station').attr("title",userBaseModule.station);$('#mail').text(userBaseModule.mail);$('#mail').attr("title",userBaseModule.mail);$('#secrecyRank').text(userBaseModule.secrecyRank);$('#department').text(userBaseModule.department);$('#department').attr("title",userBaseModule.department);//$('#extension').text(userBaseModule.extension);if(userBaseModule.imgPath==null || userBaseModule.imgPath==''){$('#imgPath').attr('src',basePath+defineSrc);}else{$('#imgPath').attr('src',userBaseModule.imgPath);}
}
/** 1-2 回调培训积分*/
function callBackTrainMdl(trainModule){var trainScore = echarts.init(document.getElementById('trainScore')),// 总培训积分trainYear = echarts.init(document.getElementById('trainYear'));var trainPie= createPie(trainModule.name,trainModule.totalIntegral,"#FF9000",trainModule.unit),trainBar=createBar(trainModule,colorList);trainScore.setOption(trainPie);trainYear.setOption(trainBar);
}
/** 1-3 回调出差次数*/
function callBacktripMdl(tripModule){var tripCount = echarts.init(document.getElementById('tripCount')),// 出差tripYear = echarts.init(document.getElementById('tripYear'));var  trainPie= createPie(tripModule.name,tripModule.totalSecond,"#049131",tripModule.unit);var trainBar=createBar(tripModule,colorList);tripCount.setOption(trainPie);tripYear.setOption(trainBar);
}/** 2-1 回调用户信息详情*/
function callBackuserDel(userDelModule){$('#sex').text(userDelModule.sex);$('#age').text(userDelModule.age);$('#workYears').text(userDelModule.workYears);$('#graduation').text(userDelModule.graduation);$('#education').text(userDelModule.education);$('#ranks').text(userDelModule.ranks);//判断毕业院校的信息是不不是太长if(userDelModule.graduation.length>7){$('#graduation').removeClass('block-label');$('#graduation').attr("style","width:100%;height:50%;");if(userDelModule.graduation.length>14){$('#graduation').attr("style","line-height:50px;white-space:nowrap;overflow: hidden;text-overflow: ellipsis;");$('#graduation').attr("title",userDelModule.graduation);}}//判断职称是否太长if(userDelModule.ranks.length>7){$('#ranks').removeClass('block-label');$('#ranks').attr("style","width:100%;height:50%;");if(userDelModule.ranks.length>14){$('#ranks').attr("style","line-height:50px;white-space:nowrap;overflow: hidden;text-overflow: ellipsis;");$('#ranks').attr("title",userDelModule.ranks);}}
}
/** 2-2 回调总加班时长*/
function callBackOvtMdl(overtimeModule){var workTime = echarts.init(document.getElementById('workTime')),// 加班workYear = echarts.init(document.getElementById('workYear'));var workPie= createPie(overtimeModule.name,overtimeModule.totalTime,"#0068BB",overtimeModule.unit);var trainBar=createBar(overtimeModule,colorList);workTime.setOption(workPie);workYear.setOption(trainBar);
}
/** 2-3 回调周绩效总分*/
function callBackAcmMdl(achievementsModule){var achievementsScore = echarts.init(document.getElementById('achievementsScore')),// 绩效achievementsYear = echarts.init(document.getElementById('achievementsYear'));//年度考核var  achievementsPie= createPie(achievementsModule.name,achievementsModule.totalAchievements,"#FE3347",achievementsModule.unit);var achievementsLine=createLine("23",achievementsModule,"#055185","#00B9F9");achievementsScore.setOption(achievementsPie);achievementsYear.setOption(achievementsLine);
}
/** 3-1 回调成长路径*/
function callBackgrowthMdl(growthModule){var growthPath = echarts.init(document.getElementById('growthPath'));var growthLine=createLine("31",growthModule,"#EB3702","#EB3702");growthPath.setOption(growthLine);
}
/** 3-2 字符云*/
function callBackLabelMdl(labelModule){var personLabel = echarts.init(document.getElementById('personLabel')),// 人才标签characterClouds = {tooltip : {show : true,formatter :function(params) {var htmlStr=tipStr(params.seriesName,params.name,null,params.color);return htmlStr;}},series : [ {name : labelModule.name,type : 'wordCloud',size : [ '100%', '100%' ],//textRotation :[ 0, 45, 90, 0 ],rotationRange: [-60, 60],textPadding : 10,drawOutOfBound: true,autoSize : {enable : true,minSize : 1},data :labelModule.labelList,textStyle : {normal : {color:function(params){return 'rgb(' + [Math.round(Math.random() * 160),Math.round(Math.random() * 160),Math.round(Math.random() * 160)].join(',') + ')';}},emphasis: {shadowBlur: 10,shadowColor: 'white'}}} ]};personLabel.setOption(characterClouds);
}
/** 3-3 年度阶段登记考核* */
function callBackAnrMdl(annualRankModule){var annualCheck = echarts.init(document.getElementById('annualCheck')),colorList=['#00A8E7','#CCF200','#FF8B00','#52D901'];var option = {tooltip : {trigger: 'item',formatter :function(params) {var i,text="";for( i=0;i<annualRankModule.annualArray.length;i++){if (params.value == annualRankModule.annualArray[i].value) {text=annualRankModule.formatLabel[i];}}var htmlStr=tipStr(params.seriesName,params.name,text,params.color);return htmlStr;}},calculable : false,//外围边框calculableColor:'white',series : [{name:annualRankModule.name,//'面积模式',type:'pie',radius : [10, annualPieRadius],center : ['50%', '50%'],//图标位于中心的相对位置roseType : 'area',x: '50%',               // for funnelmax: annualPieRadius,                // for funnelsort : 'ascending',     // for funneldata:annualRankModule.annualArray,itemStyle : {borderColor : 'white',borderWidth : 2,color : function(params) {// 首先定义一个数组//'red','yellow','pink','blue'return colorList[params.dataIndex];//需要提出来}}}]};annualCheck.setOption(option);
}/** 4-1 导师带教人次*/
function callBackturMdl(tutorTeachingNum){var tutorTime = echarts.init(document.getElementById('tutorTime')),// 加班tutorYear = echarts.init(document.getElementById('tutorYear'));var workPie= createPie(tutorTeachingNum.name,tutorTeachingNum.totalNum,"#FF9000",tutorTeachingNum.unit);var trainBar=createBar(tutorTeachingNum,colorList);tutorTime.setOption(workPie);tutorYear.setOption(trainBar);
}/** 4-2 奖惩总次数*/
function callBackrewMdl(rewardsPunishments){var rewardsCheck = echarts.init(document.getElementById('testYear'));var rewardsPie = echarts.init(document.getElementById('testTime'));var pie = {tooltip : {trigger : 'item',},series : [ {name : rewardsPunishments.name,//'总培训积分',type : 'pie',radius : [ '50%', '70%' ],startAngle : 225,avoidLabelOverlap : false,itemStyle : {},// 里层颜色label : {//标签normal : {show : false,//position : 'inner',//center，默认外面textStyle: {color: 'white'}},emphasis : {// 强调的时候显示标签或者线条颜色show : false,textStyle : {fontSize : '10',fontWeight : 'bold',color : 'white',}}},labelLine : {normal : {show : false}},data : [ {value : rewardsPunishments.totalRewards,name : '总奖励',//'120分',itemStyle : {color : '#FF0033',borderColor : 'white',borderWidth : '3'}}, {value : rewardsPunishments.totalPunishments,name : '总惩罚',itemStyle : {color : '#003399',borderColor : 'white',borderWidth : '3'}} // 透明度]} ]};rewardsPie.setOption(pie);// colorList=['#005D73','#FFC300'];var option = {tooltip : {trigger: 'axis',},xAxis : {type : 'category',data : rewardsPunishments.yearsArray,axisLabel : {color : 'white'},splitLine : {// 分隔线show : false},axisLine : {// 颜色show : true,lineStyle : {color : 'white'}}},yAxis : {type : 'value',axisLabel : {show : false,},axisLine : {// 颜色show : false},splitLine : {show : false}},series : [ {name:"总奖励",data : rewardsPunishments.rewardsArray,//[ 120, 200, 150, 80, 70, 110, 130 ],type : 'bar',itemStyle : {normal : {color : function(params) {// 首先定义一个数组//return colorList[params.dataIndex];//需要提出来var number=params.dataIndex+1,index=0;if(number%8==0){index=number/8-1;}else{index=number%8-1;}return colorList[index];//需要提出来}}}},{name:"总惩罚",data : rewardsPunishments.punishmentsArray,//[ 120, 200, 150, 80, 70, 110, 130 ],type : 'bar',itemStyle : {normal : {color : function(params) {// 首先定义一个数组//return colorList[params.dataIndex];//需要提出来var number=params.dataIndex+1,index=0;if(number%8==0){index=number/8-1;}else{index=number%8-1;}return colorList[index];//需要提出来}}}   } ]};rewardsCheck.setOption(option);
}
/** 饼图* */
function createPie(name,integral,bgColor,unit){var pie = {tooltip : {trigger : 'item',formatter :function(params) {var htmlStr=tipStr(params.seriesName,params.name+unit, null,params.color);return htmlStr;}},series : [ {name : name,//'总培训积分',type : 'pie',radius : [ '50%', '70%' ],startAngle : 225,avoidLabelOverlap : false,itemStyle : {},// 里层颜色label : {normal : {show : true,position : 'center',textStyle: {color: 'white'}},emphasis : {// 强调show : true,textStyle : {fontSize : '15',fontWeight : 'bold',color : 'white',}}},labelLine : {normal : {show : false}},data : [ {value : 3,name : integral,//'120分',itemStyle : {color : bgColor,borderColor : 'white',borderWidth : '3'}}, {value : 1,name : '',itemStyle : {normal : {color : 'rgba(0,0,0,0)'}}} // 透明度]} ]};return pie;
}
/** 柱状图* */
function createBar(model,colorList){var bar = {tooltip : {trigger: 'axis',formatter :function(params) {var htmlStr=tipStr(params[0].seriesName,params[0].name, params[0].value+model.unit,params[0].color);return htmlStr;}},xAxis : {type : 'category',data : model.yearsArray,axisLabel : {color : 'white'},splitLine : {// 分隔线show : false},axisLine : {// 颜色show : true,lineStyle : {color : 'white'}}},yAxis : {type : 'value',axisLabel : {show : false,},axisLine : {// 颜色show : false},splitLine : {show : false}},series : [ {name:model.name,data : model.integralArray,//[ 120, 200, 150, 80, 70, 110, 130 ],type : 'bar',itemStyle : {normal : {color : function(params) {// 首先定义一个数组//return colorList[params.dataIndex];//需要提出来var number=params.dataIndex+1,index=0;if(number%8==0){index=number/8-1;}else{index=number%8-1;}return colorList[index];//需要提出来}}}} ]};return bar;
}
/** 折线图* */
function createLine(flag,model,nodeBorder,nodeColor){var  line = {title : {text : flag=="31"?model.name:"",textStyle : {color : 'white'}},tooltip : {trigger : 'axis',formatter : function(params) {var value = params[0].value, text, color = params[0].color,// 图例颜色htmlStr,i=0;var name=params[0].name;if(flag=="23"){// name=name.substring(0,2)+"-"+name.substring(2,4);htmlStr=tipStr(params[0].seriesName,name,value+model.unit,color);}   if(flag=="31"){for( i=0;i<model.integralArray.length;i++){if (value == model.integralArray[i]) {text=model.growthlLabel[i];}}htmlStr=tipStr(params[0].seriesName,name,text,color);}return htmlStr;}},toolbox : {show : false,// 工具feature : {dataZoom : {yAxisIndex : 'none'},dataView : {readOnly : false},magicType : {type : [ 'line', 'bar' ]},restore : {},saveAsImage : {}}},xAxis : {// 时间type : 'category',boundaryGap : false,data : model.yearsArray,axisLine : {show : true,lineStyle : {color : 'white'// 颜色}},axisLabel : {show : true}},grid : {x:50,},yAxis : {// 事件type : 'value',axisLabel : {margin : 2,show : false,},axisLine : {// 颜色show : false,lineStyle : {color : 'white'}},splitLine : {show : false},formatter : function(value) {var i, texts = [];if(flag=="23"){for( i=0;i<model.integralArray.length;i++){texts.push(model.integralArray[i]);}}if(flag=="31"){for( i=0;i<model.integralArray.length;i++){if (value == model.integralArray[i]) {texts.push(model.growthlLabel[i]);}}}return texts;}},series : [// 数据{name : model.name,type : 'line',data : model.integralArray,symbolSize : 12,// 拐点大小symbol : 'circle',itemStyle : {// 节点颜色normal : {color : nodeColor,//'#00B9F9',borderColor : nodeBorder,//'#055185',lineStyle : {// 折线颜色color : nodeBorder,//'#055185'}}}} ]};return line;
}
/** 字符云样式* */
function createRandomItemStyle() {var r=Math.round(Math.random() * 160),g=Math.round(Math.random() * 160),b=Math.round(Math.random() * 160);return {normal : {color : 'rgb('+ [ r,g,b ].join(',') + ')'}};
}
/** tipHtml* */
function tipStr(titile,name,value,color){var htmlStr='',node='<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:'+ color + ';"></span>';if(value!=null){htmlStr=htmlStr+node+titile+"<br/><span style='margin-left:15px;'>"+name + '：' + value+"</span>"; }else{htmlStr=htmlStr+node+titile+"<br/><span style='margin-left:15px;'>"+name+"</span>";}return htmlStr;
}
/** 初始化屏幕宽高* */
function initStyle(){var height=client().height;var widowHeight=height+height/3;$("#body").css("width",client().width);$("#body").css("height",widowHeight-60);var itemHeight=Math.floor((height-60)/3);var margin=(itemHeight-16*7-5)/14;margin=Math.floor(margin);$(".row").attr("style","margin:"+margin+"px");annualPieRadius=Math.floor((itemHeight-90)/2);$(".item").attr("style","height:"+itemHeight+"px");$(".item-half-width").attr("style","height:"+itemHeight+"px");
}
/** 获取屏幕可视区域的宽高* */
function client(){if(window.innerHeight !== undefined){return {"width": window.innerWidth,"height": window.innerHeight}}else if(document.compatMode === "CSS1Compat"){return {"width": document.documentElement.clientWidth,"height": document.documentElement.clientHeight}}else{return {"width": document.body.clientWidth,"height": document.body.clientHeight}}
}

echarts-员工看板排版设计相关推荐

文字如何实现完美UI？文本排版设计告诉你
2019独角兽企业重金招聘Python工程师标准>>> 一部手机,电量充足,网络通畅,就足以让我们打发一天的时光,尽情沉浸在手机时代的缤纷世界里.这个信息资源无穷尽的手机网络世界,是 ...
《众妙之门——网页排版设计制胜秘诀》——3.4 展现品牌视觉的同时保持网页的可读性...
本节书摘来自异步社区<众妙之门--网页排版设计制胜秘诀>一书中的第3章,第3.4节,作者: [德]Smashing Magazine 译者: 侯景艳 , 范辰更多章节内容可以访问云栖社区 ...
阿拉伯语排版设计_针对说阿拉伯语的用户的测试和设计
阿拉伯语排版设计 Let me start off with some data to put things into perspective "Why?" 让我从一些数据入手,以 ...
左右布局图文排版设计灵感案例
图文排版一直都是各个领域设计师的一项基本功.合理地安排图片和文字的关系,明确文字间的层级关系,并在视觉上给人舒适和谐的感觉,这一直是设计师们的追求. 集设网www.ijishe.com设计师交流社区精 ...
在集设|参透海报设计中提取排版设计灵感
排版是设计的基本,尤其是一直在做国内设计作品的设计师,多看优秀中文海报比起看国外作品的收获可能会更多,在集设分享的海报设计作品都可以作为临摹练习之用,没时间的话,也可以研究这些海报的排版分布.一些技法 ...
ppt模板目录页如何排版设计？
我们在ppt模板制作中,目录页作为不可或缺的一部分,要足够的吸引力才可以,ppt模板目录页如何排版设计?ppt家园今天来介绍一下目录页的排版设计技巧. 模板入口:https://www.pptjia ...
UI设计中的排版设计技巧
不知道大家有没有遇到过这样的情况,在排版的时候咔咔一顿操作,图形字母四处飞,试了一遍又一遍,但最后却发现效果并不咋地!反正我是经常遇到这种情况,其实原因就在于我并没有理清思路,如果我能把排版的思路想清 ...
20P18 Pr预设模板300个现代商务婚礼简洁迷你创意文字标题排版设计动画
20P18 Pr预设模板300个现代商务婚礼简洁迷你创意文字标题排版设计动画预设信息: 适用软件:Premiere Pro CC 2019 或更高版本分辨率:无限制使用插件:无需外置插件模板格 ...
计算机专业海报排版设计,我研究了2000张大神海报，终于总结出这个排版技巧...
原标题:我研究了2000张大神海报,终于总结出这个排版技巧电商美工要怎么去设计海报页面,怎么去排版布局页面呢?一张海报最重要要是哪些方面要注意?对于设计师来说设计出一张好的作品最重要的是什么?那当然 ...

echarts-员工看板排版设计

echarts-员工看板排版设计

应用

代码

echarts-员工看板排版设计相关推荐

最新文章

热门文章