本文介绍了如何使用Echarts库设计员工信息看板，包括饼图、柱状图、子浮云和折线图的展示，同时讨论了布局和兼容性问题，提供了相关代码示例。
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的div
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);//给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","
最低0.47元/天 解锁文章
扫一扫
3075
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
