@model CRM.Core.BLL.Application.Soft.SoftUserCountView
@using WX.CRM.Common;
@{
    /**/

    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<style type="text/css">
    .grid{
        /*height:50px;
        line-height:50px;*/
        padding:20px 0px 0px 0px;
        color:#808080;
    }
    .size30{
        font-size:30px;
        height:50px;
        line-height:50px;
    }
</style>
<script src="~/Scripts/echarts-4.8.0/dist/echarts.min.js"></script>

<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-xs3">
            <div class="grid">累计已购买用户</div>
            <div><span class="size30">@Model.AllUserOrderCount</span> 人</div>
        </div>
        <div class="layui-col-xs3">
            <div class="grid">当前擒龙版用户</div>
            <div><span class="size30">@Model.QlUserOrderCount</span> 人</div>
        </div>
        <div class="layui-col-xs3">
            <div class="grid">当前至尊版用户</div>
            <div><span class="size30">@Model.ZzUserOrderCount</span> 人</div>
        </div>
        <div class="layui-col-xs3">
            <div class="grid">当前平台一用户</div>
            <div><span class="size30">@Model.TnbUserOrderCount</span> 人</div>
        </div>
    </div>

    <div class="layui-row">
        @*<div class="layui-col-xs3">
            <div class="grid">当前永顺用户</div>
            <div><span class="size30">@Model.YsUserOrderCount</span> 人</div>
        </div>*@
        <div class="layui-col-xs3">
            <div class="grid">其他</div>
            <div><span class="size30">@Model.OtherUserOrderCount</span> 人</div>
        </div>
        <div class="layui-col-xs3">
            <div class="grid">已过期用户</div>
            <div><span class="size30">@Model.OverTimeUserOrderCount</span> 人</div>
        </div>
        <div class="layui-col-xs3">
            <div></div>
        </div>
    </div>

    <hr />

    <div class="layui-row">
        <div class="layui-col-xs3">
            <div class="grid">累计注册用户</div>
            <div><span class="size30">@Model.AllUserCount</span> 人</div>
        </div>
        <div class="layui-col-xs3">
            <div class="grid">新增注册用户</div>
            <div><span class="size30">@Model.NewUserCount</span> 人</div>
        </div>
        <div class="layui-col-xs3">
            <div class="grid">3日活跃用户</div>
            <div><span class="size30">@Model.ThreeActiveUserCount</span> 人</div>
        </div>
        <div class="layui-col-xs3">
            <div class="grid">7日活跃用户</div>
            <div><span class="size30">@Model.SevenActiveUserCount</span> 人</div>
        </div>
    </div>

    <hr />

    <div id="main" style="width: 1000px;height:600px;"></div>

</div>

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    $(function () {
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        option = {
            /*title: {
                text: '折线图堆叠'
            },*/
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['新增注册数', '3日活跃用户', '7日活跃用户']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: @Html.Raw(Model.xAxisdata.ToJson())
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '新增注册数',
                    type: 'line',
                    //stack: '总量',
                    data: @Html.Raw(Model.c1.ToJson())
                },
                {
                    name: '3日活跃用户',
                    type: 'line',
                    //stack: '总量',
                    data: @Html.Raw(Model.c2.ToJson())
                },
                {
                    name: '7日活跃用户',
                    type: 'line',
                    //stack: '总量',
                    data: @Html.Raw(Model.c3.ToJson())
                }
            ]
        };


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    });

</script>