前言

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

怎么实现员工和工资大数据分析，echarts+js实现_第1张图片

 

 

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

员工大数据分析中心

怎么实现员工和工资大数据分析，echarts+js实现_第2张图片

 

工资大数据分析中心

怎么实现员工和工资大数据分析，echarts+js实现_第3张图片

如何实现漂亮的图表

地图实现

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

' //var x = document.getElementById("iframe_play_fc"); //x.srcdoc = html; var ul = document.getElementById("fachelist_ul"); for (let i = 0 ; i < data.length; i++) {  let item = data[i];  let li = document.createElement("li");  li.innerHTML = '
  • '   + (i + 1) + ' . '   + item.billdate + ' '   //+ item.inonevehicleflag   + ' 车牌：' + item.vehicleno + ' '   + '' + item.fromName + '=》'   + item.full_toName + ' '   + '
    • ';    ul.appendChild(li); }}function map() { myMapChart = echarts.getInstanceByDom(document.getElementById('map_1')); if (myMapChart == undefined) {  myMapChart = echarts.init(document.getElementById('map_1')); } myMapChart.showLoading({  text: '正在加载数据.....',  color: '#fff',  textColor: '#fff',  maskColor: '#46b3e6',  zlevel: 0 }); $.ajax({  url: "/BI/GetgeoCoordData",  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);     geoCoordMap = $.extend(geoCoordMap, data);     lightProvince = data.provinceList;          $.ajax({      url: "/BI/GetgeoData",      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);         geoData = data;         seriesData();         $.ajax({          url: "/BI/GetProvinceCode",          type: "GET",          dataType: 'json',          success: function (result) {           if (result.status) {            if (result.data.length > 0) {             if (result.data == 'china') {              mapSelected = 'china';             }             else {              mapSelected = py_provinceMap[result.data];             }             loadMap(result.data);            }           }          },          error: function (
    View Code

    怎么实现员工和工资大数据分析，echarts+js实现_第4张图片

     

     

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

    图表

    怎么实现员工和工资大数据分析，echarts+js实现_第5张图片

     

     

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

    同样先引入div图层

    js调用实现

    ContractedBlock.gif ExpandedBlockStart.gif 
     //员工学历分布 function echarts_GetXLData() {  var myChart = echarts.init(document.getElementById('echart5_1'));  var itemStyle = {   normal: {    color: new echarts.graphic.LinearGradient(     0, 1, 0, 0, [{      offset: 0,      color: '#2af598'     }, {      offset: 1,      color: '#009efd'     }]    ),    barBorderRadius: 4   },   emphasis: {    color: new echarts.graphic.LinearGradient(     0, 1, 0, 0, [{      offset: 0,      color: '#2af598'     }, {      offset: 1,      color: '#009efd'     }]    ),    barBorderRadius: 4   }  };  // 指定图表的配置项和数据  var option = {   options: []  };  myChart.setOption(option);  $.ajax({   url: "/paymentWelfare/GetSalaryBigDataBYXL",   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);      var namearr = [];      var valuearr = [];      for (let i in data) {       namearr.push(data[i].name);       valuearr.push(data[i].value);      }      myChart.setOption({       tooltip: {        trigger: 'axis',        textStyle: {         color: "#ffffff"        },        formatter: function (data) {         var x = data[0];         if (x == undefined) {          return "";         }         return x.name + "
    " + x.seriesName + ":" + x.data;        }       },       legend: {        show: true,        x: 'right',        top: 15,        data: ['学历'],        textStyle: {         color: 'white',         fontSize: 15        }       },       //calculable: true,       grid: {        y: 40,        y2: 80,        left: '12%',        right: '4%',        bottom: '10%'       },       xAxis: [{        type: 'category',        axisLabel: {         interval: 0,         rotate: 0,         textStyle: { fontSize: 12, color: '#ffffff' }        },        axisLine: {         lineStyle: {          color: 'white',          width: 1         }        },        data: namearr       }],       yAxis: [{        "axisTick": {         "show": false        },        //"splitLine": {        // "show": false        //},        type: 'value',        nameTextStyle: {         color: "white",         fontSize: 15,         padding: 10        },        axisLabel: {         textStyle: { color: 'white', fontSize: 12 },         title: { textStyle: { color: 'white' } }        },        axisLine: {         lineStyle: {          color: 'white',          width: 1         }        },        splitLine: {         lineStyle: {          type: 'dashed',          color: '#0d48e0'         }        },       }],       series: [{        name: '学历',        yAxisIndex: 0,        type: 'bar',        itemStyle: itemStyle,        barWidth: 25,        label: {         normal: {          show: true,          position: 'top',          //formatter: '{c}' + '万元',          color: 'white'         }        },        data: valuearr       }]      });     }    }   },   error: function (
    View Code

    后端代码调用，获取数据

      ///   /// 学历  ///   ///   ///   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 data = new List { };   for (int i = 0; i < dt.Rows.Count; i++)   {    data.Add(new nameValue(dt.GetFieldValue("name", i).ToStr(),     decimal.Round(dt.GetFieldValue("count", i).ToDecimal(), 1)));   }   string json = data.ToJson();   SaveData(fileName, json);   return Json(new { status = true, data = json }, JsonRequestBehavior.AllowGet);  }

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

    消息滚动

     
          
    员工提醒信息播报
          
           
            
           
       (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 = '
    • ' + ''        + (i + 1) + ' . '        + item.name + ' ' + ' '        + '
      • ';       ul.appendChild(li);      }     }    }   },   error: function (

      后台获取数据

        ///   /// 获取消息  ///   ///   ///   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 data = new List { };   for (int i = 0; i < dt.Rows.Count; i++)   {    data.Add(new nameValue(dt.GetFieldValue("name", i).ToStr(),     decimal.Round(dt.GetFieldValue("count", i).ToDecimal(), 1)));   }   string json = data.ToJson();   SaveData(fileName, json);   return Json(new { status = true, data = json }, JsonRequestBehavior.AllowGet);  }

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

      怎么实现员工和工资大数据分析，echarts+js实现_第6张图片

       

       

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

      结束语

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

       

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

      附件：工资模块实现的最初模板。

      https://files.cnblogs.com/files/luoyuhao/echartssjmoban8947202005210009.zip

       

      怎么实现员工和工资大数据分析，echarts+js实现
      文章转载：http://www.shaoqun.com/a/466644.html