huangzhidong
/
guoyao-jiankang


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272
							<!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>