前言
现如今市场上的人事系统五花八门，可做了大数据分析的人事系统少之又少，最近本人花了一个星期好好研究了大数据展示方面的内容，图表主要用的是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
$(function () { map(); }) var lightProvince = []; var provinceMap = { 台湾: 'taiwan', 河北: 'hebei', 山西: 'shanxi', 辽宁: 'liaoning', 吉林: 'jilin', 黑龙江: 'heilongjiang', 江苏: 'jiangsu', 浙江: 'zhejiang', 安徽: 'anhui', 福建: 'fujian', 江西: 'jiangxi', 山东: 'shandong', 河南: 'henan', 湖北: 'hubei', 湖南: 'hunan', 广东: 'guangdong', 海南: 'hainan', 四川: 'sichuan', 贵州: 'guizhou', 云南: 'yunnan', 陕西: 'shanxi1', 甘肃: 'gansu', 青海: 'qinghai', 新疆: 'xinjiang', 广西: 'guangxi', 内蒙古: 'neimenggu', 宁夏: 'ningxia', 西藏: 'xizang', 北京: 'beijing', 天津: 'tianjin', 上海: 'shanghai', 重庆: 'chongqing', 香港: 'xianggang', 澳门: 'aomen' }; var py_provinceMap = { china: '全国', hebei: '河北', shanxi: '山西', liaoning: '辽宁', jilin: '吉林', heilongjiang: '黑龙江', jiangsu: '江苏', zhejiang: '浙江', anhui: '安徽', fujian: '福建', jiangxi: '江西', shandong: '山东', henan: '河南', hubei: '湖北', hunan: '湖南', guangdong: '广东', hainan: '海南', sichuan: '四川', guizhou: '贵州', yunnan: '云南', shanxi: '陕西', gansu: '甘肃', qinghai: '青海', xinjiang: '新疆', guangxi: '广西', neimenggu: '内蒙古', ningxia: '宁夏', xizang: '西藏', beijing: '北京', tianjin: '天津', shanghai: '上海', chongqing: '重庆' }; var cityMap = { 北京市: '110100', 天津市: '120100', 上海市: '310100', 重庆市: '500100', 崇明县: '310200', 湖北省直辖县市: '429000', 铜仁市: '522200', 毕节市: '522400', 石家庄市: '130100', 唐山市: '130200', 秦皇岛市: '130300', 邯郸市: '130400', 邢台市: '130500', 保定市: '130600', 张家口市: '130700', 承德市: '130800', 沧州市: '130900', 廊坊市: '131000', 衡水市: '131100', 太原市: '140100', 大同市: '140200', 阳泉市: '140300', 长治市: '140400', 晋城市: '140500', 朔州市: '140600', 晋中市: '140700', 运城市: '140800', 忻州市: '140900', 临汾市: '141000', 吕梁市: '141100', 呼和浩特市: '150100', 包头市: '150200', 乌海市: '150300', 赤峰市: '150400', 通辽市: '150500', 鄂尔多斯市: '150600', 呼伦贝尔市: '150700', 巴彦淖尔市: '150800', 乌兰察布市: '150900', 兴安盟: '152200', 锡林郭勒盟: '152500', 阿拉善盟: '152900', 沈阳市: '210100', 大连市: '210200', 鞍山市: '210300', 抚顺市: '210400', 本溪市: '210500', 丹东市: '210600', 锦州市: '210700', 营口市: '210800', 阜新市: '210900', 辽阳市: '211000', 盘锦市: '211100', 铁岭市: '211200', 朝阳市: '211300', 葫芦岛市: '211400', 长春市: '220100', 吉林市: '220200', 四平市: '220300', 辽源市: '220400', 通化市: '220500', 白山市: '220600', 松原市: '220700', 白城市: '220800', 延边朝鲜族自治州: '222400', 哈尔滨市: '230100', 齐齐哈尔市: '230200', 鸡西市: '230300', 鹤岗市: '230400', 双鸭山市: '230500', 大庆市: '230600', 伊春市: '230700', 佳木斯市: '230800', 七台河市: '230900', 牡丹江市: '231000', 黑河市: '231100', 绥化市: '231200', 大兴安岭地区: '232700', 南京市: '320100', 无锡市: '320200', 徐州市: '320300', 常州市: '320400', 苏州市: '320500', 南通市: '320600', 连云港市: '320700', 淮安市: '320800', 盐城市: '320900', 扬州市: '321000', 镇江市: '321100', 泰州市: '321200', 宿迁市: '321300', 杭州市: '330100', 宁波市: '330200', 温州市: '330300', 嘉兴市: '330400', 湖州市: '330500', 绍兴市: '330600', 金华市: '330700', 衢州市: '330800', 舟山市: '330900', 台州市: '331000', 丽水市: '331100', 合肥市: '340100', 芜湖市: '340200', 蚌埠市: '340300', 淮南市: '340400', 马鞍山市: '340500', 淮北市: '340600', 铜陵市: '340700', 安庆市: '340800', 黄山市: '341000', 滁州市: '341100', 阜阳市: '341200', 宿州市: '341300', 六安市: '341500', 亳州市: '341600', 池州市: '341700', 宣城市: '341800', 福州市: '350100', 厦门市: '350200', 莆田市: '350300', 三明市: '350400', 泉州市: '350500', 漳州市: '350600', 南平市: '350700', 龙岩市: '350800', 宁德市: '350900', 南昌市: '360100', 景德镇市: '360200', 萍乡市: '360300', 九江市: '360400', 新余市: '360500', 鹰潭市: '360600', 赣州市: '360700', 吉安市: '360800', 宜春市: '360900', 抚州市: '361000', 上饶市: '361100', 济南市: '370100', 青岛市: '370200', 淄博市: '370300', 枣庄市: '370400', 东营市: '370500', 烟台市: '370600', 潍坊市: '370700', 济宁市: '370800', 泰安市: '370900', 威海市: '371000', 日照市: '371100', 莱芜市: '371200', 临沂市: '371300', 德州市: '371400', 聊城市: '371500', 滨州市: '371600', 菏泽市: '371700', 郑州市: '410100', 开封市: '410200', 洛阳市: '410300', 平顶山市: '410400', 安阳市: '410500', 鹤壁市: '410600', 新乡市: '410700', 焦作市: '410800', 濮阳市: '410900', 许昌市: '411000', 漯河市: '411100', 三门峡市: '411200', 南阳市: '411300', 商丘市: '411400', 信阳市: '411500', 周口市: '411600', 驻马店市: '411700', 省直辖县级行政区划: '469000', 武汉市: '420100', 黄石市: '420200', 十堰市: '420300', 宜昌市: '420500', 襄阳市: '420600', 鄂州市: '420700', 荆门市: '420800', 孝感市: '420900', 荆州市: '421000', 黄冈市: '421100', 咸宁市: '421200', 随州市: '421300', 恩施土家族苗族自治州: '422800', 长沙市: '430100', 株洲市: '430200', 湘潭市: '430300', 衡阳市: '430400', 邵阳市: '430500', 岳阳市: '430600', 常德市: '430700', 张家界市: '430800', 益阳市: '430900', 郴州市: '431000', 永州市: '431100', 怀化市: '431200', 娄底市: '431300', 湘西土家族苗族自治州: '433100', 广州市: '440100', 韶关市: '440200', 深圳市: '440300', 珠海市: '440400', 汕头市: '440500', 佛山市: '440600', 江门市: '440700', 湛江市: '440800', 茂名市: '440900', 肇庆市: '441200', 惠州市: '441300', 梅州市: '441400', 汕尾市: '441500', 河源市: '441600', 阳江市: '441700', 清远市: '441800', 东莞市: '441900', 中山市: '442000', 潮州市: '445100', 揭阳市: '445200', 云浮市: '445300', 南宁市: '450100', 柳州市: '450200', 桂林市: '450300', 梧州市: '450400', 北海市: '450500', 防城港市: '450600', 钦州市: '450700', 贵港市: '450800', 玉林市: '450900', 百色市: '451000', 贺州市: '451100', 河池市: '451200', 来宾市: '451300', 崇左市: '451400', 海口市: '460100', 三亚市: '460200', 三沙市: '460300', 成都市: '510100', 自贡市: '510300', 攀枝花市: '510400', 泸州市: '510500', 德阳市: '510600', 绵阳市: '510700', 广元市: '510800', 遂宁市: '510900', 内江市: '511000', 乐山市: '511100', 南充市: '511300', 眉山市: '511400', 宜宾市: '511500', 广安市: '511600', 达州市: '511700', 雅安市: '511800', 巴中市: '511900', 资阳市: '512000', 阿坝藏族羌族自治州: '513200', 甘孜藏族自治州: '513300', 凉山彝族自治州: '513400', 贵阳市: '520100', 六盘水市: '520200', 遵义市: '520300', 安顺市: '520400', 黔西南布依族苗族自治州: '522300', 黔东南苗族侗族自治州: '522600', 黔南布依族苗族自治州: '522700', 昆明市: '530100', 曲靖市: '530300', 玉溪市: '530400', 保山市: '530500', 昭通市: '530600', 丽江市: '530700', 普洱市: '530800', 临沧市: '530900', 楚雄彝族自治州: '532300', 红河哈尼族彝族自治州: '532500', 文山壮族苗族自治州: '532600', 西双版纳傣族自治州: '532800', 大理白族自治州: '532900', 德宏傣族景颇族自治州: '533100', 怒江傈僳族自治州: '533300', 迪庆藏族自治州: '533400', 拉萨市: '540100', 昌都地区: '542100', 山南地区: '542200', 日喀则地区: '542300', 那曲地区: '542400', 阿里地区: '542500', 林芝地区: '542600', 西安市: '610100', 铜川市: '610200', 宝鸡市: '610300', 咸阳市: '610400', 渭南市: '610500', 延安市: '610600', 汉中市: '610700', 榆林市: '610800', 安康市: '610900', 商洛市: '611000', 兰州市: '620100', 嘉峪关市: '620200', 金昌市: '620300', 白银市: '620400', 天水市: '620500', 武威市: '620600', 张掖市: '620700', 平凉市: '620800', 酒泉市: '620900', 庆阳市: '621000', 定西市: '621100', 陇南市: '621200', 临夏回族自治州: '622900', 甘南藏族自治州: '623000', 西宁市: '630100', 海东地区: '632100', 海北藏族自治州: '632200', 黄南藏族自治州: '632300', 海南藏族自治州: '632500', 果洛藏族自治州: '632600', 玉树藏族自治州: '632700', 海西蒙古族藏族自治州: '632800', 银川市: '640100', 石嘴山市: '640200', 吴忠市: '640300', 固原市: '640400', 中卫市: '640500', 乌鲁木齐市: '650100', 克拉玛依市: '650200', 吐鲁番地区: '652100', 哈密地区: '652200', 昌吉回族自治州: '652300', 博尔塔拉蒙古自治州: '652700', 巴音郭楞蒙古自治州: '652800', 阿克苏地区: '652900', 克孜勒苏柯尔克孜自治州: '653000', 喀什地区: '653100', 和田地区: '653200', 伊犁哈萨克自治州: '654000', 塔城地区: '654200', 阿勒泰地区: '654300', 自治区直辖县级行政区划: '659000', 台湾省: '710000', 香港特别行政区: '810100', 澳门特别行政区: '820000' }; var lightColor = { 河北: '#ffa259', 山西: '#fe6845', 辽宁: '#fa4252', 吉林: '#3fc5f0', 黑龙江: '#c72c41', 江苏: '#f4efd3', 浙江: '#c72c41', 安徽: '#e13a9d', 福建: '#e13a9d', 江西: '#cf56a1', 山东: '#fa697c', 河南: '#a3f7bf', 湖北: '#3ed4ff', 湖南: '#9dab86', 广东: '#a6c84c', 海南: '#ffa259', 四川: '#cfb495', 贵州: '#f09595', 云南: '#4f98ca', 陕西: '#617be3', 甘肃: '#9aceff', 青海: '#9aceff', 新疆: '#02a8a8', 广西: '#fbdff0', 内蒙古: '#42e6a4', 宁夏: '#02a8a8', 西藏: '#f6c3e5', 北京: '#a278b5', 天津: '#d6e5fa', 上海: '#fbe3b9', 重庆: '#bac7a7' }; var geoCoordMap = { '新疆': [86.22, 44.30], '九江': [116.00, 29.70], '新乡': [116.402217, 35.311657], ' ': [79.92, 37.12], ' ': [86.85, 47.70], '若羌县': [88.17, 39.02], '上海': [121.4648, 31.2891], '东莞': [113.8953, 22.901], '东营': [118.7073, 37.5513], '中山': [113.4229, 22.478], '临汾': [111.4783, 36.1615], '临沂': [118.3118, 35.2936], '丹东': [124.541, 40.4242], '丽水': [119.5642, 28.1854], '乌鲁木齐': [87.9236, 43.5883], '佛山': [112.8955, 23.1097], '保定': [115.0488, 39.0948], '兰州': [103.5901, 36.3043], '包头': [110.3467, 41.4899], '北京': [116.4551, 40.2539], '北海': [109.314, 21.6211], '南京': [118.8062, 31.9208], '南宁': [108.479, 23.1152], '南昌': [116.0046, 28.6633], '南通': [121.1023, 32.1625], '厦门': [118.1689, 24.6478], '台州': [121.1353, 28.6688], '合肥': [117.29, 32.0581], '呼和浩特': [111.4124, 40.4901], '咸阳': [108.4131, 34.8706], '哈尔滨': [127.9688, 45.368], '唐山': [118.4766, 39.6826], '嘉兴': [120.9155, 30.6354], '大同': [113.7854, 39.8035], '大连': [122.2229, 39.4409], '天津': [117.4219, 39.4189], '太原': [112.3352, 37.9413], '威海': [121.9482, 37.1393], '宁波': [121.5967, 29.6466], '宝鸡': [107.1826, 34.3433], '宿迁': [118.5535, 33.7775], '常州': [119.4543, 31.5582], '广州': [113.5107, 23.2196], '廊坊': [116.521, 39.0509], '延安': [109.1052, 36.4252], '张家口': [115.1477, 40.8527], '徐州': [117.5208, 34.3268], '德州': [116.6858, 37.2107], '惠州': [114.6204, 23.1647], '成都': [103.9526, 30.7617], '扬州': [119.4653, 32.8162], '承德': [117.5757, 41.4075], '拉萨': [91.1865, 30.1465], '无锡': [120.3442, 31.5527], '日照': [119.2786, 35.5023], '昆明': [102.9199, 25.4663], '杭州': [119.5313, 29.8773], '枣庄': [117.323, 34.8926], '柳州': [109.3799, 24.9774], '株洲': [113.5327, 27.0319], '武汉': [114.3896, 30.6628], '汕头': [117.1692, 23.3405], '江门': [112.6318, 22.1484], '沈阳': [123.1238, 42.1216], '沧州': [116.8286, 38.2104], '河源': [114.917, 23.9722], '泉州': [118.3228, 25.1147], '泰安': [117.0264, 36.0516], '泰州': [120.0586, 32.5525], '济南': [117.1582, 36.8701], '济宁': [116.8286, 35.3375], '海口': [110.3893, 19.8516], '淄博': [118.0371, 36.6064], '淮安': [118.927, 33.4039], '深圳': [114.5435, 22.5439], '清远': [112.9175, 24.3292], '温州': [120.498, 27.8119], '渭南': [109.7864, 35.0299], '湖州': [119.8608, 30.7782], '湘潭': [112.5439, 27.7075], '滨州': [117.8174, 37.4963], '潍坊': [119.0918, 36.524], '烟台': [120.7397, 37.5128], '玉溪': [101.9312, 23.8898], '珠海': [113.7305, 22.1155], '盐城': [120.2234, 33.5577], '盘锦': [121.9482, 41.0449], '石家庄': [114.4995, 38.1006], '福州': [119.4543, 25.9222], '秦皇岛': [119.2126, 40.0232], '绍兴': [120.564, 29.7565], '聊城': [115.9167, 36.4032], '肇庆': [112.1265, 23.5822], '舟山': [122.2559, 30.2234], '苏州': [120.6519, 31.3989], '莱芜': [117.6526, 36.2714], '菏泽': [115.6201, 35.2057], '营口': [122.4316, 40.4297], '葫芦岛': [120.1575, 40.578], '衡水': [115.8838, 37.7161], '衢州': [118.6853, 28.8666], '西宁': [101.4038, 36.8207], '西安': [109.1162, 34.2004], '贵阳': [106.6992, 26.7682], '连云港': [119.1248, 34.552], '邢台': [114.8071, 37.2821], '邯郸': [114.4775, 36.535], '郑州': [113.4668, 34.6234], '鄂尔多斯': [108.9734, 39.2487], '重庆': [107.7539, 30.1904], '金华': [120.0037, 29.1028], '铜川': [109.0393, 35.1947], '银川': [106.3586, 38.1775], '镇江': [119.4763, 31.9702], '长春': [125.8154, 44.2584], '长沙': [113.0823, 28.2568], '长治': [112.8625, 36.4746], '阳泉': [113.4778, 38.0951], '青岛': [120.4651, 36.3373], '韶关': [113.7964, 24.7028] }; var provinces = ['shanghai', 'hebei', 'shanxi', 'neimenggu', 'liaoning', 'jilin', 'heilongjiang', 'jiangsu', 'zhejiang', 'anhui', 'fujian', 'jiangxi', 'shandong', 'henan', 'hubei', 'hunan', 'guangdong', 'guangxi', 'hainan', 'sichuan', 'guizhou', 'yunnan', 'xizang', 'shanxi1', 'gansu', 'qinghai', 'ningxia', 'xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen', 'taiwan'] var provincesText = ['上海', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '重庆', '香港', '澳门', '台湾'] var planePath = 'path://M.6,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705'; var convertData = function (data) { var res = []; for (var i = 0; i < data.length; i++) { var dataItem = data[i]; var fromCoord = geoCoordMap[dataItem.fromName]; var toCoord = geoCoordMap[dataItem.toName]; if (fromCoord && toCoord) { res.push({ fromName: dataItem.fromName, toName: dataItem.toName, coords: [fromCoord, toCoord] }); } } return res; }; function SetMap() { var url = '../showdata/mapset.html'; $("#iframeWin").show(); //var name = 'add'; //var iWidth = 500; //var iHeight = 500; ////获得窗口的垂直位置 //var iTop = (window.screen.availHeight - 30 - iHeight) / 2; ////获得窗口的水平位置 //var iLeft = (window.screen.availWidth - 10 - iWidth) / 2; //window.open(url, name, 'height=' + iHeight + ',,innerHeight=' + iHeight + ',width=' + iWidth + ',innerWidth=' + iWidth + ',top=' + iTop + ',left=' + iLeft + ',status=no,toolbar=no,menubar=no,location=no,resizable=no,scrollbars=0,titlebar=no'); }; var series = []; var mapSelected = 'china'; var showMapText = false; var count = 0; var seriesIndex; var dataLength; var dataIndex; var timeTicket; var geoData = {}; var mapJsonData; var color = ['#ffa259', '#fe6845', '#fa4252', '#3fc5f0', '#c72c41', '#f4efd3', '#c72c41', '#e13a9d', '#e13a9d', '#ffd800', '#51eaea', '#a3f7bf', '#3ed4ff', '#ffa022', '#a6c84c']; var chartOption = { title: { show: true, text: '实时货量流向图', target: null, subtext: '地图设置', //sublink: '../showdata/mapset.html', sublink: 'javascript:SetMap();', subtarget: 'self', x: 'center', y: 'top', textAlign: null, backgroundColor: 'rgba(0,0,0,0)', borderColor: '#ccc', borderWidth: 0, padding: 5, itemGap: 10, textStyle: { fontSize: 30, fontStyle: 'normal', fontWeight: 'normal', color: 'white' } }, tooltip: { trigger: 'item', }, legend: { orient: 'vertical', top: 'bottom', left: 'right', data: [], textStyle: { color: '#fff' }, selectedMode: 'single' }, geo: { label: { normal: { show: showMapText, color: 'white', fontSize: 13 }, emphasis: { show: false } }, roam: false, layoutCenter: ['50%', '50%'], layoutSize: "110%", itemStyle: { normal: { areaColor: '#101f32', borderColor: '#43d0d6' }, emphasis: { areaColor: '#617be3' } }, regions: [] }, series: [] }; var isProvince = function (name) { return provincesText.some(function (province) { return province === name }) }; var isCity = function (name) { var cityvalue = cityMap[name]; if (cityvalue != undefined) { return true; } return false; }; var facheList = function () { series.push({ type: 'lines', zlevel: 12, effect: { show: true, period: 3, trailLength: 0.7, color: '#fff', symbol: 'arrow', symbolSize: 8, xAxisIndex: 0, yAxisIndex: 0, polarIndex: 0, geoIndex: 0, calendarIndex: 0, }, lineStyle: { normal: { color: 'white', width: 1, opacity: 0.8, curveness: 0.2 } }, data: convertData(geoData.facheList) }, { type: 'lines', zlevel: 12, effect: { show: true, period: 3, trailLength: 0, symbol: planePath, symbolSize: 8 }, lineStyle: { normal: { color: '#9b45e4', width: 1, opacity: 0.6, curveness: 0.2 } }, data: convertData(geoData.facheList) }); playFaCheList(geoData.facheList); }; var cityList = function () { for (let i = 0; i < geoData.cityList.length; i++) { var ci = geoData.cityList[i]; series.push({ name: ci.name, type: 'effectScatter', coordinateSystem: 'geo', zlevel: 2, rippleEffect: { period: 4, scale: 2.5, brushType: 'stroke' }, label: { normal: { //show: true, position: 'right', offset: [1, 0], formatter: '{b}' } }, symbolSize: 10, itemStyle: { normal: { color: '#00ffff' }, emphasis: { color: 'green' } }, tooltip: { trigger: 'item', padding: 0, enterable: true, transitionDuration: 1, textStyle: { color: '#000', decoration: 'none', }, showDelay: 2, formatter: function (params) { var tipHtml = ''; tipHtml = '<div style="width:200px;height:120px;background:rgba(22,80,158,0.8);border:1px solid rgba(7,166,255,0.7)">' + '<div style="width:100%;height:40px;line-height:40px;border-bottom:2px solid rgba(7,166,255,0.7);padding:0 20px">' + '<i style="display:inline-block;width:8px;height:8px;background:#16d6ff;border-radius:40px;">' + '</i>' + '<span style="margin-left:10px;color:#fff;font-size:16px;">' + params.name + '</span>' + '</div>' + '<div style="padding:10px">' + '<p style="color:#fff;font-size:15px;">发货库存：' + params.data.fhkc + '</p>' + '<p style="color:#fff;font-size:15px;">在途库存：' + params.data.ztkc + '</p>' + '<p style="color:#fff;font-size:15px;">到货库存：' + params.data.dhkc + '</p>' + '</div>' + '</div>'; return tipHtml; }, axisPointer: { show: true, type: 'cross', lineStyle: { type: 'dashed', width: 1 } } }, data: [{ name: ci.name, value: geoCoordMap[ci.name], fhkc: ci.fhkc, ztkc: ci.ztkc, dhkc: ci.dhkc }] }); }; }; var playList = function () { series.push({ name: '', type: 'effectScatter', coordinateSystem: 'geo', zlevel: -2, rippleEffect: { period: 0, scale: 0, brushType: 'stroke' }, label: { normal: { show: false, position: 'right', offset: [5, 0], formatter: '{b}' } }, symbolSize: 0, itemStyle: { normal: { color: '#ffa259' }, emphasis: { color: 'green' } }, tooltip: { trigger: 'item', padding: 0, enterable: true, transitionDuration: 1, textStyle: { color: '#000', decoration: 'none', }, showDelay: 2, formatter: function (params) { var tipHtml = ''; tipHtml = '<div style="width:200px;height:120px;background:rgba(22,80,158,0.8);border:1px solid rgba(7,166,255,0.7)">' + '<div style="width:100%;height:40px;line-height:40px;border-bottom:2px solid rgba(7,166,255,0.7);padding:0 20px">' + '<i style="display:inline-block;width:8px;height:8px;background:#16d6ff;border-radius:40px;">' + '</i>' + '<span style="margin-left:10px;color:#fff;font-size:16px;">' + params.name + '</span>' + '</div>' + '<div style="padding:10px">' + '<p style="color:#fff;font-size:15px;">发货库存：' + params.data.fhkc + '</p>' + '<p style="color:#fff;font-size:15px;">在途库存：' + params.data.ztkc + '</p>' + '<p style="color:#fff;font-size:15px;">到货库存：' + params.data.dhkc + '</p>' + '</div>' + '</div>'; return tipHtml; }, axisPointer: { show: true, type: 'cross', lineStyle: { type: 'dashed', width: 1 } } }, data: geoData.cityList.map(function (ci) { return { name: ci.name, value: geoCoordMap[ci.name], fhkc: ci.fhkc, ztkc: ci.ztkc, dhkc: ci.dhkc }; }) }); }; var seriesData = function () { series = []; facheList(); cityList(); //playList(); count = 0; timeTicket = null; seriesIndex = series.length - 1; dataLength = series[seriesIndex].data.length; dataIndex = 0; chartOption.series = series; }; var loadMap = function (param) { var url = "../showdata/js/map/" + param + ".js"; $.ajax({ url: url, dataType: "json" }).done(function (data) { mapJsonData = data; echarts.registerMap(param, mapJsonData); if (param != 'china' && param != '全国') { showMapText = true; } else { showMapText = false; } chartOption.geo.map = param; chartOption.geo.label.normal.show = showMapText; for (let i = 0; i < lightProvince.length; i++) { let city = lightProvince[i]; chartOption.geo.regions.push({ name: city, itemStyle: { normal: { areaColor: lightColor[city] } }, label: { normal: { show: true }, emphasis: { show: true }, } }); } myMapChart.hideLoading(); myMapChart.setOption(chartOption); }); }; var playFaCheList = function (data) { //var html = '<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="author" content="" /> <style type="text/css"> *{margin:10px;padding:10px;border:0px; }body{font-size:20px;color:"white";} #demo{ overflow:hidden; height:100px; width:280px; margin:90px auto; position:relative; } #demo1{ height:auto; text-align:left; } #demo1 li{ list-style-type:none; height:22px; text-align:left; text-indent:15px; } </style></head><body><div id="demo"> <ul id="demo1"> ' //for (let i = 0 ; i < data.length; i++) { // var item = data[i]; // html += '<li>' + item.fromName + '=>' + item.toName + '</li>' //} //html += '</li> </ul> <div id="demo2"></div></div><script type="text/javascript"> var speed=80 ; var demo=document.getElementById("demo"); var demo1=document.getElementById("demo1"); function Marquee(){ if(demo.scrollTop>=demo1.offsetHeight){ demo.scrollTop=0; } else{ demo.scrollTop=demo.scrollTop+1; } };var MyMar=setInterval(Marquee,speed); demo.onmouseover=function(){clearInterval(MyMar)}; demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)};</script></body></html>' //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 = '<li><a href="#">' + (i + 1) + ' . ' + item.billdate + ' ' //+ item.inonevehicleflag + ' 车牌：' + item.vehicleno + ' ' + '<span style="color:#ff8ba7">' + item.fromName + '=》' + item.full_toName + '</span> ' + '</a></li>'; 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 (XMLHttpRequest, textStatus, errorThrown) { return; }, dataType: "json" }).fail(function (jqXHR, textStatus) { console.log("Ajax Error: ", textStatus); }); window.addEventListener("resize", function () { myMapChart.resize(); }); var setProvinceCode = function (provinceCode) { $.ajax({ url: "/BI/SetProvinceCode", type: "GET", data: { provinceCode: provinceCode }, dataType: 'json', cache: false, success: function (result) { return; }, error: function (XMLHttpRequest, textStatus, errorThrown) { return; }, dataType: "json" }).fail(function (jqXHR, textStatus) { console.log("Ajax Error: ", textStatus); }); }; myMapChart.on('click', function (ev) { if (isProvince(ev.name)) { mapSelected = ev.name console.log(mapSelected) loadMap(provinceMap[ev.name]); } else if (isCity(ev.name)) { mapSelected = ev.name; loadMap(cityMap[ev.name]); } else { mapSelected = 'china' loadMap(mapSelected) } }); //timeTicket && clearInterval(timeTicket); //timeTicket = setInterval(function () { // myMapChart.dispatchAction({ // type: 'showTip', // seriesIndex: seriesIndex, // dataIndex: dataIndex // }); // count++; // dataIndex++; // if (dataIndex >= dataLength) { // dataIndex = 0; // } //}, 5000); //myMapChart.on('mouseover', function (params) { // console.log(params) // clearInterval(timeTicket); // myMapChart.dispatchAction({ // type: 'showTip', // seriesIndex: seriesIndex, // dataIndex: dataIndex // }); // count++; // dataIndex++; // if (dataIndex >= dataLength) { // dataIndex = 0; // } //}, 5000); //myMapChart.on('mouseout', function (params) { // timeTicket && clearInterval(timeTicket); // timeTicket = setInterval(function () { // myMapChart.dispatchAction({ // type: 'showTip', // seriesIndex: seriesIndex, // dataIndex: dataIndex // }); // count++; // dataIndex++; // if (dataIndex >= dataLength) { // dataIndex = 0; // } // }, 5000) //}); } } }, error: function (XMLHttpRequest, textStatus, errorThrown) { return; }, dataType: "json" }).fail(function (jqXHR, textStatus) { console.log("Ajax Error: ", textStatus); }); } } }, error: function (XMLHttpRequest, textStatus, errorThrown) { return; }, dataType: "json" }).fail(function (jqXHR, status) { console.log("Ajax Error: ", status); }); }
最后既可实现如上效果，点中相应的图例还进行预览。
图表
以这个图表为例，这个是柱状图。
同样先引入div图层
<div class="allnav" id="echart5_1"></div>
js调用实现
//员工学历分布 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 + "<br/>" + 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 (XMLHttpRequest, textStatus, errorThrown) { return; }, dataType: "json" }).fail(function (jqXHR, textStatus) { console.log("Ajax Error: ", textStatus); }); window.addEventListener("resize", function () { myChart.resize(); }); }
后端代码调用，获取数据
/// <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，实现出来的图表费用漂亮，其实在做好这样的一个效果出来首先还得去网上找一个好的模板，再去做调整，完成从一个全新开发可能难度较大，样式布局啥的都不会这么专业，我其实是省去了前面部分的工作了，只花了三四天时间既完成了以上效果，速度还是挺快的，公司领导层对这效果也是非常满意的，以后会加强在这方面的研发，让公司的业务，财务数据都能很好在图表方面进行呈现出来，这样客户也会非常喜欢的。
以上个人愚见，一起加强学习进步！
附件：工资模块实现的最初模板。
https://files.cnblogs.com/files/luoyuhao/echartssjmoban8947202005210009.zip