We_Relese/OnlineApp/Relese/Views/Play/Index.cshtml


@{
    Layout = "~/Views/Shared/Layout/_Layout.Play.cshtml";
    ViewBag.PageId = "home";
    ViewBag.Title = "主页";
}
<style>
    .main-box {
        width: 100%;
        height: calc(100vh - 30px);
        display: flex;
        flex-direction: column;
    }

    .h-box {
        width: 100%;
        height: 50%;
        display: flex;
    }

    .s-box {
        width: 50%;
        height: 100%;
        display: flex;
    }

    .chart-box {
        width: 100%;
        height: 100%;
    }
</style>
<div class="main-box">
    <div class="h-box">
        <div class="s-box">
            <div class="chart-box" id="container-1"></div>
        </div>
        <div class="s-box">
            <div class="chart-box" id="container-2"></div>
        </div>
    </div>
    <div class="h-box">
        <div class="chart-box" id="container-3"></div>
    </div>
</div>

@section scripts
{
    @*<script type="text/javascript" src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
    <script type="text/javascript" src="https://code.highcharts.com.cn/highcharts/highcharts-3d.js"></script>
    <script type="text/javascript" src="https://code.highcharts.com.cn/highcharts/modules/oldie.js"></script>
    <script type="text/javascript" src="https://code.highcharts.com.cn/highcharts/modules/cylinder.js"></script>
    <script type="text/javascript" src="https://code.highcharts.com.cn/highcharts/modules/funnel3d.js"></script>
    <script type="text/javascript" src="https://code.highcharts.com.cn/highstock/modules/pyramid3d.js"></script>*@
    <script type="text/javascript" src="/Content/Libs/highcharts/highcharts.min.js"></script>
    <script type="text/javascript" src="/Content/Libs/highcharts/highcharts-3d.min.js"></script>
    <script type="text/javascript" src="/Content/Libs/highcharts/modules/oldie.min.js"></script>
    <script type="text/javascript" src="/Content/Libs/highcharts/modules/cylinder.min.js"></script>
    <script type="text/javascript" src="/Content/Libs/highcharts/modules/funnel3d.min.js"></script>
    <script type="text/javascript" src="/Content/Libs/highcharts/modules/pyramid3d.min.js"></script>
    <script>
        var mainColor = '#02595a';
        $(function () {
            Chart1();
            Chart2();
            Chart3();
        });
        function Chart1() {
            window.Highcharts.chart('container-1', {
                chart: {
                    type: 'pie',
                    backgroundColor: 'transparent',
                    options3d: {
                        enabled: true,
                        alpha: 45,
                        beta: 0
                    }
                },
                colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00',
                    '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
                exporting: {
                    enabled: false
                },
                title: {
                    text: '最近一个月四功能力评析图',
                    style: {
                        'color': mainColor,
                        'fontWeight': '600',
                        'fontFamily': 'sans-serif'
                    }
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                legend: {
                    enabled: false
                },
                credits: {
                    enabled: false
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        depth: 35,
                        dataLabels: {
                            enabled: true,
                            format: '{point.name}'
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    name: '四功占比',
                    data: [
                        //{
                        //    name: '对上级',
                        //    color:'#123456',
                        //    y: 18.3,
                        //},
                        ['对上级', 18.3],
                        ['对下级', 22.8],
                        ['对相关单位', 15.7],
                        ['对媒体', 31.2]
                    ]
                }]
            });
        }
        function Chart2() {
            window.Highcharts.chart('container-2', {
                chart: {
                    type: 'pyramid3d',
                    backgroundColor: 'transparent',
                    options3d: {
                        enabled: true,
                        alpha: 10,
                        depth: 50,
                        viewDistance: 50
                    }
                },
                colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00',
                    '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
                exporting: {
                    enabled: false
                },
                legend: {
                    enabled: false
                },
                credits: {
                    enabled: false
                },
                title: {
                    text: '最近一个月五力能力评析图',
                    style: {
                        'color': mainColor,
                        'fontWeight': '600',
                        'fontFamily': 'sans-serif'
                    }
                },
                plotOptions: {
                    series: {
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b> ({point.y:,.0f})',
                            color: mainColor,
                            allowOverlap: true,
                            y: 10
                        },
                        width: '60%',
                        height: '60%',
                        center: ['50%', '50%']
                    }
                },
                series: [{
                    name: '五力占比',
                    data: [
                        ['掌控力', 654],
                        ['决策力', 331],
                        ['协调力', 455],
                        ['研判力', 524],
                        ['舆论引导力', 367]

                    ]
                }]
            });
        }
        function Chart3() {
            var categories = [];
            var month = new Date().getMonth();
            for (var i = 0; i < 12; i++) {
                month++;
                if (month > 12) {
                    month = 1;
                }
                categories.push(month + "月");
                
            }
            window.Highcharts.chart('container-3', {
                chart: {
                    type: 'bar',
                    backgroundColor: 'transparent',
                },

                colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00',
                    '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
                exporting: {
                    enabled: false
                },
                legend: {
                    enabled: false
                },
                credits: {
                    enabled: false
                },
                title: {
                    text: '近两年课程学习时长统计',
                    style: {
                        'color': mainColor,
                        'fontWeight': '600',
                        'fontFamily': 'sans-serif'
                    }
                },
                xAxis: [{
                    categories: categories,
                    reversed: true,
                    labels: {
                        step: 1
                    }
                }, {
                    // 显示在右侧的镜像 xAxis （通过 linkedTo 与第一个 xAxis 关联）
                    opposite: true,
                    reversed: true,
                    categories: categories,
                    linkedTo: 0,
                    labels: {
                        step: 1
                    }
                }],
                yAxis: {
                    title: {
                        text: null
                    },
                    labels: {
                        formatter: function () {
                            return Math.abs(this.value) + '分钟';
                        }
                    },
                    min: -500,
                    max: 500
                },
                plotOptions: {
                    series: {
                        stacking: 'normal'
                    }
                },
                tooltip: {
                    formatter: function () {
                        return '<b>' +
                            this.series.name +
                            '-' +
                            this.point.category +
                            '</b><br/>' +
                            ' ' +
                            window.Highcharts.numberFormat(Math.abs(this.point.y), 0) +
                            " 分钟";
                    }
                },
                series: [{
                    name: '2020演练时长',
                    data: [-174, -188, -208, -242, -321, -271, -249,
                    -197, -353, -361, -362, -272]
                }, {
                    name: '2019演练时长',
                    data: [162, 175, 139, 210, 240, 223, 323, 265,
                        233, 194, 310, 257]
                }]
            });
        }
    </script>
}