<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>用户统计</title>
<link rel="stylesheet" href="/static/antv/f2.style.css" />
<script type="text/javascript" src="/static/jquery-2.2.4.min.js"></script>
<script src="/static/antv/f2.min.js"></script>
<link rel="stylesheet" href="/static/h5/css/common.css">
<style>
html,body {
margin: 0;
padding: 0;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
background: #f1f1f1;
}
.chart-wrapper {
margin: 10px;
border-radius: 10px;
}
ul {
margin: 0;
padding: 0;
}
.nav-tabs>li>a {
margin-right: 0;
border-radius: 0;
}
a {
text-align: center;
font-size: 16px;
font-weight:bold;
color: #999;
text-decoration: none;
}
.daily-record {
margin: 0 10px;
background-color: #fff;
border-radius: 10px;
}
.record-data {
display: flex;
display: -webkit-flex;
justify-content: space-between;
align-items: center;
height: 7vh;
}
.line {
margin: 0 15px;
height: 1px;
background-color: #CCCCCC;
}
.daily-title, .daily-nums {
display: inline;
font-size: 17px;
font-weight: 500;
}
.daily-title {
margin-left: 25px;
display: flex;
display: -webkit-flex;
align-items: center;
}
.daily-nums {
margin-right: 25px;
color:rgba(153,153,153,1);
}
</style>
</head>
<body>
<div class="chart-wrapper">
<canvas id="mountNode" style="width: 100%;"></canvas>
</div>
<div class="daily-record">
<div class="record-data first" onclick="user(this)" data-rolesId="0" data-orgId="{$orgId}" >
<span class="daily-title" style="color: #284a94;font-weight: 700;">用户总数</span>
<span class="daily-nums" style="color: #284a94;font-weight: 700;">{$allcount}</span>
</div>
{foreach $list as $k=>$v}
<div class="line"></div>
<div class="record-data" onclick="user(this)" data-rolesId="{$v['id']}" data-orgId="{$orgId}">
<span class="daily-title"><span style="display: inline-block;margin-right:10px;background: {$v['color']};width: 6px;height: 6px;border-radius:5px;"></span>{$v['name']}</span>
<span class="daily-nums">{$v['cost']}</span>
</div>
{/foreach}
</div>
<script>
var Util = F2.Util;
var G = F2.G;
var Group = G.Group;
function drawLabel(shape, coord, canvas) {
var center = coord.center;
var origin = shape.get('origin');
var points = origin.points;
var x1 = (points[2].x - points[1].x) * 0.75 + points[1].x;
var x2 = (points[2].x - points[1].x) * 1.8 + points[1].x;
var y = (points[0].y + points[1].y) / 2;
var point1 = coord.convertPoint({
x: x1,
y: y
});
var point2 = coord.convertPoint({
x: x2,
y: y
});
var group = new Group();
group.addShape('Line', {
attrs: {
x1: point1.x,
y1: point1.y,
x2: point2.x,
y2: point2.y,
lineDash: [0, 2, 2],
stroke: '#808080'
}
});
var text = group.addShape('Text', {
attrs: {
x: point2.x,
y: point2.y,
text: origin._origin.type + ' ' + origin._origin.cost,
fill: '#808080',
textAlign: 'start',
textBaseline: 'bottom'
}
});
var textWidth = text.getBBox().width;
var baseLine = group.addShape('Line', {
attrs: {
x1: point2.x,
y1: point2.y,
x2: point2.x,
y2: point2.y,
stroke: '#808080'
}
});
if (point2.x > center.x) {
baseLine.attr('x2', point2.x + textWidth);
} else if (point2.x < center.x) {
text.attr('textAlign', 'end');
baseLine.attr('x2', point2.x - textWidth);
} else {
text.attr('textAlign', 'center');
text.attr('textBaseline', 'top');
}
canvas.add(group);
shape.label = group;
}
var data = {:json_encode($list)};
var sum = 0;
data.map(function(obj) {
sum += obj.cost;
});
var chart = new F2.Chart({
id: 'mountNode',
pixelRatio: window.devicePixelRatio
});
chart.source(data);
var lastClickedShape;
chart.legend({
position: 'bottom',
offsetY: -5,
marker: 'circle',
align: 'center',
onClick: function onClick(ev) {
var clickedItem = ev.clickedItem;
var dataValue = clickedItem.get('dataValue');
var canvas = chart.get('canvas');
var coord = chart.get('coord');
var geom = chart.get('geoms')[0];
var container = geom.get('container');
var shapes = geom.get('shapes'); // 只有带精细动画的 geom 才有 shapes 这个属性
var clickedShape;
// 找到被点击的 shape
Util.each(shapes, function(shape) {
var origin = shape.get('origin');
if (origin && origin._origin.type === dataValue) {
clickedShape = shape;
return false;
}
});
if (lastClickedShape) {
lastClickedShape.animate().to({
attrs: {
lineWidth: 0
},
duration: 200
}).onStart(function() {
if (lastClickedShape.label) {
lastClickedShape.label.hide();
}
}).onEnd(function() {
lastClickedShape.set('selected', false);
});
}
if (clickedShape.get('selected')) {
clickedShape.animate().to({
attrs: {
lineWidth: 0
},
duration: 200
}).onStart(function() {
if (clickedShape.label) {
clickedShape.label.hide();
}
}).onEnd(function() {
clickedShape.set('selected', false);
});
} else {
var color = clickedShape.attr('fill');
clickedShape.animate().to({
attrs: {
lineWidth: 5
},
duration: 350,
easing: 'bounceOut'
}).onStart(function() {
clickedShape.attr('stroke', color);
clickedShape.set('zIndex', 1);
container.sort();
}).onEnd(function() {
clickedShape.set('selected', true);
clickedShape.set('zIndex', 0);
container.sort();
lastClickedShape = clickedShape;
if (clickedShape.label) {
clickedShape.label.show();
} else {
drawLabel(clickedShape, coord, canvas);
}
canvas.draw();
});
}
}
});
chart.coord('polar', {
transposed: true,
innerRadius: 0.8,
radius: 1
});
chart.axis(false);
chart.tooltip(false);
chart.interval().position('a*cost').color('name', ['#8ADAC4', '#39C2EA', '#5360DA', '#325699', '#68B15C','#F7B762','#F2735F','#1EC498','#4DA9EB','#4AD1E7']).adjust('stack');
chart.guide().html({
position: ['50%', '50%'],
html: '<div style="width: 250px;height: 40px;text-align: center;">' + '<div style="font-size: 24px;color:#089875;">{$allcount}</div>' + '<div style="font-size: 16px;color:#089875;">用户总数</div>' + '</div>'
});
chart.render();
</script>
</body>
</html>
<script>
function user(obj) {
var rolesId = $(obj).attr('data-rolesId');
var orgId = $(obj).attr('data-orgId');
var url = "{:url('Statistics/userList')}?rolesId="+rolesId+'&orgId='+orgId;
window.location.href=url;
}
</script>