怎麼實現員工和工資大資料分析
阿新 • • 發佈：2020-08-21
前言
現如今市場上的人事系統五花八門，可做了大資料分析的人事系統少之又少，最近本人花了一個星期好好研究了大資料展示方面的內容，圖表主要用的是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