怎麼實現員工和工資大資料分析，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

$(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