|
发表于 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);
- }
- });
- };
复制代码 |
评分
-
查看全部评分
|