怎么实现员工和工资大数据分析，echarts+js实现

前言

 现如今市场上的人事系统五花八门，可做了大数据分析的人事系统少之又少，最近本人花了一个星期好好研究了大数据展示方面的内容，图表主要用的是echarts来实现的，官网地址：https://echarts.apache.org/zh/index.html

下面两张图片展示出我实现的员工和工资的大数据分析界面：

员工大数据分析中心

工资大数据分析中心

如何实现漂亮的图表

地图实现

首先引入js文件，去官网可以下载到这几个文件，引入到项目中就好了。

<script type="text/javascript" src="~/showdata/js/jquery.js"></script>
<script type="text/javascript" src="~/showdata/js/echarts.min.js"></script>
<script type="text/javascript" src="~/showdata/js/china.js"></script>
<script type="text/javascript" src="~/showdata/js/area_echarts_hr.js">

图层引入

<div class="map4" id="map_1"></div>

地图实现的js

 最后既可实现如上效果，点中相应的图例还进行预览。

图表

 以这个图表为例，这个是柱状图。

同样先引入div图层

<div class="allnav" id="echart5_1"></div>

js调用实现

后端代码调用，获取数据

        /// <summary>
        /// 学历
        /// </summary>
        /// <param name="cache"></param>
        /// <returns></returns>
        public ActionResult GetSalaryBigDataBYXL(bool cache = false)
        {
            string fileName = "xl.json";

            if (cache == true)
            {
                string jsonData = GetData(fileName);
                if (string.IsNullOrEmpty(jsonData) == false)
                {
                    return Json(new { status = true, data = jsonData }, JsonRequestBehavior.AllowGet);
                }
            }

            DataTable dt = GetHrBigData().Tables[3];
            List<nameValue> data = new List<nameValue> { };

            for (int i = 0; i < dt.Rows.Count; i++)
            {
                data.Add(new nameValue(dt.GetFieldValue<string>("name", i).ToStr(),
                    decimal.Round(dt.GetFieldValue<decimal>("count", i).ToDecimal(), 1)));
            }

            string json = data.ToJson();
            SaveData(fileName, json);

            return Json(new { status = true, data = json }, JsonRequestBehavior.AllowGet);
        }

以上完成既可实现漂亮的图表了，其他饼图，折线图等等即同理实现，更新的实现效果多看看官网的帮助文档，你也可以实现漂亮的图表了，一起来交流学习吧！

消息滚动

 <div class="xpanel xpanel-r-t">
                        <div class="title"><span>员工提醒信息播报</span></div>
                        <div class="scrollDiv" id="fachelist_div" style="height:70%;">
                            <ul id="fachelist_ul"></ul>
                        </div>
                    </div>

 (function ($) {
            $.fn.extend({
                Scroll: function (opt, callback) {
                    //参数初始化
                    if (!opt) var opt = {};
                    var _this = this.eq(0).find("ul:first");
                    var lineH = _this.find("li:first").height(),
                        //line = opt.line ? parseInt(opt.line, 10) : parseInt(this.height() / lineH, 10),
                        line = 1,
                        speed = opt.speed ? parseInt(opt.speed, 10) : 2000,
                        timer = opt.timer ? parseInt(opt.timer, 10) : 3000;
                    if (line == 0) line = 1;
                    var upHeight = 0 - line * lineH;
                    scrollUp = function () {
                        _this.animate({
                            marginTop: upHeight
                        }, speed, function () {
                            for (i = 1; i <= line; i++) {
                                _this.find("li:first").appendTo(_this);
                            }
                            _this.css({
                                marginTop: 0
                            });
                        });
                    }
                    _this.hover(function () {
                        clearInterval(timerID);
                    }, function () {
                        timerID = setInterval("scrollUp()", timer);
                    }).mouseout();
                }
            });
        })(jQuery);

        $(document).ready(function () {
            $("#fachelist_div").Scroll({
                line: 4,
                speed: 500,
                timer: 4000
            });
        });

js文件获取数据代码

    //消息提醒数据
    function echarts_GetMsgData() {
        var ul = document.getElementById("fachelist_ul");
        $.ajax({
            url: "/paymentWelfare/GetSalaryBigDataBYMsg",
            type: "GET",
            data: { cache: false },
            dataType: 'json',
            cache: false,
            success: function (result) {
                if (result.status) {
                    if (result.data.length > 0) {
                        var data = JSON.parse(result.data);
                        for (let i = 0 ; i < data.length; i++) {
                            let item = data[i];
                            let li = document.createElement("li");
                            li.innerHTML = '<li>' + '<span style="color:#FFFFFF">'
                                + (i + 1) + ' . '
                               + item.name + ' ' + '</span> '
                                + '</li>';
                            ul.appendChild(li);
                        }
                    }
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                return;
            },
            dataType: "json"
        }).fail(function (jqXHR, textStatus) {
            console.log("Ajax Error: ", textStatus);
        });
    }

后台获取数据

        /// <summary>
        /// 获取消息
        /// </summary>
        /// <param name="cache"></param>
        /// <returns></returns>
        public ActionResult GetSalaryBigDataBYMsg(bool cache = false)
        {
            string fileName = "msg.json";

            if (cache == true)
            {
                string jsonData = GetData(fileName);
                if (string.IsNullOrEmpty(jsonData) == false)
                {
                    return Json(new { status = true, data = jsonData }, JsonRequestBehavior.AllowGet);
                }
            }

            DataTable dt = GetHrBigData().Tables[5];
            List<nameValue> data = new List<nameValue> { };

            for (int i = 0; i < dt.Rows.Count; i++)
            {
                data.Add(new nameValue(dt.GetFieldValue<string>("name", i).ToStr(),
                    decimal.Round(dt.GetFieldValue<decimal>("count", i).ToDecimal(), 1)));
            }

            string json = data.ToJson();

            SaveData(fileName, json);

            return Json(new { status = true, data = json }, JsonRequestBehavior.AllowGet);
        }

以上完成既可以实现消息的滚屏显示

 以上从代码实现的角度介绍了我是怎么实现的这样一个效果的过程，工资大数据实现同人事一样，都是相同的控件去实现。

结束语

做好大数据分析任重道远，本人也是今年在这方面投入了大力气去学习，之前用WPF实现了一个，可以看我上一篇写的博文，就有介绍过，实现以上两个界面的大数据是用BS来实现的，图表全部用的是echarts，实现出来的图表费用漂亮，其实在做好这样的一个效果出来首先还得去网上找一个好的模板，再去做调整，完成从一个全新开发可能难度较大，样式布局啥的都不会这么专业，我其实是省去了前面部分的工作了，只花了三四天时间既完成了以上效果，速度还是挺快的，公司领导层对这效果也是非常满意的，以后会加强在这方面的研发，让公司的业务，财务数据都能很好在图表方面进行呈现出来，这样客户也会非常喜欢的。

以上个人愚见，一起加强学习进步！