echarts做出来的饼图，想要饼图中数据是数据库引进来的

技术小白 · 发表于 2016-10-28 00:35:07

本帖最后由技术小白于 2016-10-28 00:41 编辑

下面是我用wex5应用echarts做出来的饼图，想要饼图中数据是sql数据库引进来的，求大神赐教，急急急！

cc_day · 发表于 2016-10-28 09:03:16

把值取出来，赋值给饼图

// 获得百度echarts实例
var mychart = echarts.init(this.getElementByXid('main'));
var option = {
baseOption : {
backgroundColor : '#F3F3F3',
tooltip : {
trigger : 'item',
// triggerOn :
// 'click',//提示框触发的条件，可选：'mousemove'鼠标移动时触发。'click'鼠标点击时触发。
// position : 'top',//提示框浮层的位置，默认不设置时位置会跟随鼠标的位置。
// formatter : "{a} <br/>{b} : {c}" + "天" + "({d}%)"
formatter : function(params, ticket, callback) {
var a = params.seriesName;
var b = params.name;
var c = params.value;
var num = c * 100 / self._allday;
var r = /^[-+]?\d*$/;
if (num != "Infinity" && !isNaN(num) && num != "-Infinity") {
if (!r.test(num)) {
var length = num.toString().split(".");
length = length[1].length;
if (length > 4) {
num = num.toFixed(3);
}
}
} else {
num = 0;
}
var percent = a + "<br/>" + b + ":" + c + "天" + "(" + num + "%)";
return percent;
}
},
toolbox : {
show : true,
itemSize : 17,
color : '#009900',
feature : {
restore : {
show : true,
title : '还原',
},
},
},
legend : {
itemGap : 15,
itemHeight : 13,
x : 'center',
y : 'bottom',
data : [ '正常', '迟到', '请假', '缺勤', '早退' ],
// data : [ 'normalCase.stateName', 'lateCase.stateName',
// 'leaveCase.stateName', 'absenteeismCase.stateName',
// 'tardyCase.stateName' ],
},
series : [ {
name : '本月全勤',
type : 'pie',
radius : [ 30, 0 ],
center : [ '50%', '45%' ],
legendHoverLink : false,// 是否启用图例hover时的联动高亮
hoverAnimation : false,// 是否开启hover在扇形上放大动画效果
label : {
normal : {
show : true,
position : 'center',
formatter : '{c}',
textStyle : {
fontSize : '20',
fontWeight : 'bold',
color : '#000000'
},
},
},
data : [ {
value : self._allday,// 全勤天数
name : '全勤',
itemStyle : {
normal : {
color : '#FFFFFF'
}
}
} ],
}, {
name : '考勤报表',
type : 'pie',
radius : [ 30, 80 ],
center : [ '50%', '45%' ],
selectedMode : 'single',// 单选
selectedOffset : 10,// 选中扇区的偏移距离
legendHoverLink : true,// 是否启用图例hover时的联动高亮
hoverAnimation : true,// 是否开启hover在扇形上放大动画效果
minAngle : 30,// 最小的扇区角度，用于防止某个值太小导致扇区太小，影响交互
avoidLabelOverlap : true,// 防止标签重叠，默认开启
label : {
normal : {
show : true,
position : 'inside',
formatter : '{c}',
},
emphasis : {
show : true,
textStyle : {
fontSize : '30',
fontWeight : 'bold',
}
},
},
data : [ {
value : normalCase.countNum,// normalCase.countNum
name : '正常',// normalCase.stateName
itemStyle : {
normal : {
color : '#00a2ee',
},
emphasis : {
color : '#00a2ee',
},
},
}, {
value : leaveCase.countNum,// leaveCase.countNum
name : '请假',// leaveCase.stateName
itemStyle : {
normal : {
color : '#009966',
},
emphasis : {
color : '#009966',
},
},
}, {
value : lateCase.countNum,// lateCase.countNum
name : '迟到',// lateCase.stateName
itemStyle : {
normal : {
color : '#FF9933',
},
emphasis : {
color : '#FF9933',
},
},
}, {
value : tardyCase.countNum,// tardyCase.countNum
name : '早退',// tardyCase.stateName
itemStyle : {
normal : {
color : '#CC6633',
},
emphasis : {
color : '#CC6633',
},
},
}, {
value : absenteeismCase.countNum,// absenteeismCase.countNum
name : '缺勤',// absenteeismCase.stateName
itemStyle : {
normal : {
color : '#CC0000',
},
emphasis : {
color : '#CC0000',
},
},
} ],
itemStyle : {
emphasis : {
shadowBlur : 20,
shadowOffsetX : 0,
shadowColor : 'rgba(0, 0, 0, 0.5)'
}
},
} ],
},
media : [ {
query : {
maxWidth : 300
},
option : {
legend : {
x : 'left',
top : 'auto',
orient : 'vertical' // 纵向布局。
},
series : [ {
radius : [ 30, 0 ],
center : [ '70%', '50%' ]
}, {
radius : [ 30, 80 ],
center : [ '70%', '50%' ]
} ]
}
} ]
};
mychart.setOption(option);
mychart.on('click', function(data) {
if (data.name == '正常') {
// 正常暂不做任何操作
} else {
self.listFilter(data.name);
}
});
};

复制代码

技术小白 · 发表于 2016-11-6 09:44:18

cc_day 发表于 2016-10-28 09:03
把值取出来，赋值给饼图

谢谢

Masion · 发表于 2016-11-14 17:14:23

可以参考下我发的帖子

使用echarts报表转换显示数据库中已有数据
http://bbs.wex5.com/forum.php?mod=viewthread&tid=108757
(出处: 起步软件技术论坛)

ycw31869 · 发表于 2016-12-6 12:30:17

cc_day 发表于 2016-10-28 09:03
把值取出来，赋值给饼图

请问normalCase.countNum的定义在哪

zcbwz · 发表于 2017-2-24 14:12:28

cc_day 发表于 2016-10-28 09:03
把值取出来，赋值给饼图

bex5.2.7怎么加入echarts图表？
一直都没能成功，求大神帮帮忙

		自动登录	找回密码
密码			注册

[处理中1] echarts做出来的饼图，想要饼图中数据是数据库引进来的

点评

评分