first modification try
This commit is contained in:
wenlong
parent
cc35116b77
commit
3062d8cacf
338
package-lock.json
generated
338
package-lock.json
generated
|
|
@ -8,7 +8,10 @@
|
|||
"name": "my5bigscreen",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"@jiaminghi/data-view": "^2.10.0",
|
||||
"core-js": "^3.8.3",
|
||||
"echarts": "^5.5.0",
|
||||
"element-ui": "^2.15.14",
|
||||
"vue": "^2.6.14",
|
||||
"vue-router": "^3.5.1",
|
||||
"vuex": "^3.6.2"
|
||||
|
|
@ -18,6 +21,8 @@
|
|||
"@vue/cli-plugin-router": "~5.0.0",
|
||||
"@vue/cli-plugin-vuex": "~5.0.0",
|
||||
"@vue/cli-service": "~5.0.0",
|
||||
"less": "^4.2.0",
|
||||
"less-loader": "^12.2.0",
|
||||
"vue-template-compiler": "^2.6.14"
|
||||
}
|
||||
},
|
||||
|
|
@ -1753,7 +1758,6 @@
|
|||
"version": "7.24.7",
|
||||
"resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.24.7.tgz",
|
||||
"integrity": "sha512-UwgBRMjJP+xv857DCngvqXI3Iq6J4v0wXmwc6sapg+zyhbwmQX67LUEFrkK5tbyJ30jGuG3ZvWpBiB9LCy1kWw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"regenerator-runtime": "^0.14.0"
|
||||
},
|
||||
|
|
@ -1834,6 +1838,56 @@
|
|||
"@hapi/hoek": "^9.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@jiaminghi/bezier-curve": {
|
||||
"version": "0.0.9",
|
||||
"resolved": "https://registry.npmmirror.com/@jiaminghi/bezier-curve/-/bezier-curve-0.0.9.tgz",
|
||||
"integrity": "sha512-u9xJPOEl6Dri2E9FfmJoGxYQY7vYJkURNX04Vj64tdi535tPrpkuf9Sm0lNr3QTKdHQh0DdNRsaa62FLQNQEEw==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.5.5"
|
||||
}
|
||||
},
|
||||
"node_modules/@jiaminghi/c-render": {
|
||||
"version": "0.4.3",
|
||||
"resolved": "https://registry.npmmirror.com/@jiaminghi/c-render/-/c-render-0.4.3.tgz",
|
||||
"integrity": "sha512-FJfzj5hGj7MLqqqI2D7vEzHKbQ1Ynnn7PJKgzsjXaZpJzTqs2Yw5OSeZnm6l7Qj7jyPAP53lFvEQNH4o4j6s+Q==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.5.5",
|
||||
"@jiaminghi/bezier-curve": "*",
|
||||
"@jiaminghi/color": "*",
|
||||
"@jiaminghi/transition": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@jiaminghi/charts": {
|
||||
"version": "0.2.18",
|
||||
"resolved": "https://registry.npmmirror.com/@jiaminghi/charts/-/charts-0.2.18.tgz",
|
||||
"integrity": "sha512-K+HXaOOeWG9OOY1VG6M4mBreeeIAPhb9X+khG651AbnwEwL6G2UtcAQ8GWCq6GzhczcLwwhIhuaHqRygwHC0sA==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.5.5",
|
||||
"@jiaminghi/c-render": "^0.4.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@jiaminghi/color": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmmirror.com/@jiaminghi/color/-/color-1.1.3.tgz",
|
||||
"integrity": "sha512-ZY3hdorgODk4OSTbxyXBPxAxHPIVf9rPlKJyK1C1db46a50J0reFKpAvfZG8zMG3lvM60IR7Qawgcu4ZDO3+Hg=="
|
||||
},
|
||||
"node_modules/@jiaminghi/data-view": {
|
||||
"version": "2.10.0",
|
||||
"resolved": "https://registry.npmmirror.com/@jiaminghi/data-view/-/data-view-2.10.0.tgz",
|
||||
"integrity": "sha512-Cud2MTiMcqc5k2KWabR/svuVQmXHANqURo+yj40370/LdI/gyUJ6LG203hWXEnT1nMCeiv/SLVmxv3PXLScCeA==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.5.5",
|
||||
"@jiaminghi/charts": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@jiaminghi/transition": {
|
||||
"version": "1.1.11",
|
||||
"resolved": "https://registry.npmmirror.com/@jiaminghi/transition/-/transition-1.1.11.tgz",
|
||||
"integrity": "sha512-owBggipoHMikDHHDW5Gc7RZYlVuvxHADiU4bxfjBVkHDAmmck+fCkm46n2JzC3j33hWvP9nSCAeh37t6stgWeg==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.5.5"
|
||||
}
|
||||
},
|
||||
"node_modules/@jridgewell/gen-mapping": {
|
||||
"version": "0.3.5",
|
||||
"resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
|
||||
|
|
@ -3383,6 +3437,14 @@
|
|||
"lodash": "^4.17.14"
|
||||
}
|
||||
},
|
||||
"node_modules/async-validator": {
|
||||
"version": "1.8.5",
|
||||
"resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-1.8.5.tgz",
|
||||
"integrity": "sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==",
|
||||
"dependencies": {
|
||||
"babel-runtime": "6.x"
|
||||
}
|
||||
},
|
||||
"node_modules/at-least-node": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/at-least-node/-/at-least-node-1.0.0.tgz",
|
||||
|
|
@ -3429,6 +3491,11 @@
|
|||
"postcss": "^8.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/babel-helper-vue-jsx-merge-props": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmmirror.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
|
||||
"integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
|
||||
},
|
||||
"node_modules/babel-loader": {
|
||||
"version": "8.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/babel-loader/-/babel-loader-8.3.0.tgz",
|
||||
|
|
@ -3510,6 +3577,27 @@
|
|||
"@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/babel-runtime": {
|
||||
"version": "6.26.0",
|
||||
"resolved": "https://registry.npmmirror.com/babel-runtime/-/babel-runtime-6.26.0.tgz",
|
||||
"integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==",
|
||||
"dependencies": {
|
||||
"core-js": "^2.4.0",
|
||||
"regenerator-runtime": "^0.11.0"
|
||||
}
|
||||
},
|
||||
"node_modules/babel-runtime/node_modules/core-js": {
|
||||
"version": "2.6.12",
|
||||
"resolved": "https://registry.npmmirror.com/core-js/-/core-js-2.6.12.tgz",
|
||||
"integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
|
||||
"deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
|
||||
"hasInstallScript": true
|
||||
},
|
||||
"node_modules/babel-runtime/node_modules/regenerator-runtime": {
|
||||
"version": "0.11.1",
|
||||
"resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
|
||||
"integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
|
||||
},
|
||||
"node_modules/balanced-match": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
|
||||
|
|
@ -4225,6 +4313,18 @@
|
|||
"integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/copy-anything": {
|
||||
"version": "2.0.6",
|
||||
"resolved": "https://registry.npmmirror.com/copy-anything/-/copy-anything-2.0.6.tgz",
|
||||
"integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"is-what": "^3.14.1"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/mesqueeb"
|
||||
}
|
||||
},
|
||||
"node_modules/copy-webpack-plugin": {
|
||||
"version": "9.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/copy-webpack-plugin/-/copy-webpack-plugin-9.1.0.tgz",
|
||||
|
|
@ -4666,7 +4766,6 @@
|
|||
"version": "1.5.2",
|
||||
"resolved": "https://registry.npmmirror.com/deepmerge/-/deepmerge-1.5.2.tgz",
|
||||
"integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
|
|
@ -5018,6 +5117,20 @@
|
|||
"node": ">=6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/echarts": {
|
||||
"version": "5.5.0",
|
||||
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.5.0.tgz",
|
||||
"integrity": "sha512-rNYnNCzqDAPCr4m/fqyUFv7fD9qIsd50S6GDFgO1DxZhncCsNsG7IfUlAlvZe5oSEQxtsjnHiUuppzccry93Xw==",
|
||||
"dependencies": {
|
||||
"tslib": "2.3.0",
|
||||
"zrender": "5.5.0"
|
||||
}
|
||||
},
|
||||
"node_modules/echarts/node_modules/tslib": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
|
||||
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
|
||||
},
|
||||
"node_modules/ee-first": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz",
|
||||
|
|
@ -5030,6 +5143,22 @@
|
|||
"integrity": "sha512-NglN/xprcM+SHD2XCli4oC6bWe6kHoytcyLKCWXmRL854F0qhPhaYgUswUsglnPxYaNQIg2uMY4BvaomIf3kLA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/element-ui": {
|
||||
"version": "2.15.14",
|
||||
"resolved": "https://registry.npmmirror.com/element-ui/-/element-ui-2.15.14.tgz",
|
||||
"integrity": "sha512-2v9fHL0ZGINotOlRIAJD5YuVB8V7WKxrE9Qy7dXhRipa035+kF7WuU/z+tEmLVPBcJ0zt8mOu1DKpWcVzBK8IA==",
|
||||
"dependencies": {
|
||||
"async-validator": "~1.8.1",
|
||||
"babel-helper-vue-jsx-merge-props": "^2.0.0",
|
||||
"deepmerge": "^1.2.0",
|
||||
"normalize-wheel": "^1.0.1",
|
||||
"resize-observer-polyfill": "^1.5.0",
|
||||
"throttle-debounce": "^1.0.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^2.5.17"
|
||||
}
|
||||
},
|
||||
"node_modules/emoji-regex": {
|
||||
"version": "8.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
|
||||
|
|
@ -5088,6 +5217,19 @@
|
|||
"url": "https://github.com/fb55/entities?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/errno": {
|
||||
"version": "0.1.8",
|
||||
"resolved": "https://registry.npmmirror.com/errno/-/errno-0.1.8.tgz",
|
||||
"integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"dependencies": {
|
||||
"prr": "~1.0.1"
|
||||
},
|
||||
"bin": {
|
||||
"errno": "cli.js"
|
||||
}
|
||||
},
|
||||
"node_modules/error-ex": {
|
||||
"version": "1.3.2",
|
||||
"resolved": "https://registry.npmmirror.com/error-ex/-/error-ex-1.3.2.tgz",
|
||||
|
|
@ -6109,6 +6251,19 @@
|
|||
"node": ">= 4"
|
||||
}
|
||||
},
|
||||
"node_modules/image-size": {
|
||||
"version": "0.5.5",
|
||||
"resolved": "https://registry.npmmirror.com/image-size/-/image-size-0.5.5.tgz",
|
||||
"integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"bin": {
|
||||
"image-size": "bin/image-size.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/import-fresh": {
|
||||
"version": "3.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/import-fresh/-/import-fresh-3.3.0.tgz",
|
||||
|
|
@ -6298,6 +6453,12 @@
|
|||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/is-what": {
|
||||
"version": "3.14.1",
|
||||
"resolved": "https://registry.npmmirror.com/is-what/-/is-what-3.14.1.tgz",
|
||||
"integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/is-wsl": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/is-wsl/-/is-wsl-2.2.0.tgz",
|
||||
|
|
@ -6494,6 +6655,82 @@
|
|||
"launch-editor": "^2.6.1"
|
||||
}
|
||||
},
|
||||
"node_modules/less": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/less/-/less-4.2.0.tgz",
|
||||
"integrity": "sha512-P3b3HJDBtSzsXUl0im2L7gTO5Ubg8mEN6G8qoTS77iXxXX4Hvu4Qj540PZDvQ8V6DmX6iXo98k7Md0Cm1PrLaA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"copy-anything": "^2.0.1",
|
||||
"parse-node-version": "^1.0.1",
|
||||
"tslib": "^2.3.0"
|
||||
},
|
||||
"bin": {
|
||||
"lessc": "bin/lessc"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"errno": "^0.1.1",
|
||||
"graceful-fs": "^4.1.2",
|
||||
"image-size": "~0.5.0",
|
||||
"make-dir": "^2.1.0",
|
||||
"mime": "^1.4.1",
|
||||
"needle": "^3.1.0",
|
||||
"source-map": "~0.6.0"
|
||||
}
|
||||
},
|
||||
"node_modules/less-loader": {
|
||||
"version": "12.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/less-loader/-/less-loader-12.2.0.tgz",
|
||||
"integrity": "sha512-MYUxjSQSBUQmowc0l5nPieOYwMzGPUaTzB6inNW/bdPEG9zOL3eAAD1Qw5ZxSPk7we5dMojHwNODYMV1hq4EVg==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">= 18.12.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/webpack"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@rspack/core": "0.x || 1.x",
|
||||
"less": "^3.5.0 || ^4.0.0",
|
||||
"webpack": "^5.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@rspack/core": {
|
||||
"optional": true
|
||||
},
|
||||
"webpack": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/less/node_modules/make-dir": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/make-dir/-/make-dir-2.1.0.tgz",
|
||||
"integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"dependencies": {
|
||||
"pify": "^4.0.1",
|
||||
"semver": "^5.6.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/less/node_modules/semver": {
|
||||
"version": "5.7.2",
|
||||
"resolved": "https://registry.npmmirror.com/semver/-/semver-5.7.2.tgz",
|
||||
"integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"bin": {
|
||||
"semver": "bin/semver"
|
||||
}
|
||||
},
|
||||
"node_modules/lilconfig": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/lilconfig/-/lilconfig-2.1.0.tgz",
|
||||
|
|
@ -7155,6 +7392,36 @@
|
|||
"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/needle": {
|
||||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmmirror.com/needle/-/needle-3.3.1.tgz",
|
||||
"integrity": "sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"dependencies": {
|
||||
"iconv-lite": "^0.6.3",
|
||||
"sax": "^1.2.4"
|
||||
},
|
||||
"bin": {
|
||||
"needle": "bin/needle"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 4.4.x"
|
||||
}
|
||||
},
|
||||
"node_modules/needle/node_modules/iconv-lite": {
|
||||
"version": "0.6.3",
|
||||
"resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.6.3.tgz",
|
||||
"integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"dependencies": {
|
||||
"safer-buffer": ">= 2.1.2 < 3.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/negotiator": {
|
||||
"version": "0.6.3",
|
||||
"resolved": "https://registry.npmmirror.com/negotiator/-/negotiator-0.6.3.tgz",
|
||||
|
|
@ -7272,6 +7539,11 @@
|
|||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/normalize-wheel": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
|
||||
"integrity": "sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA=="
|
||||
},
|
||||
"node_modules/npm-run-path": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/npm-run-path/-/npm-run-path-2.0.2.tgz",
|
||||
|
|
@ -7609,6 +7881,15 @@
|
|||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/parse-node-version": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/parse-node-version/-/parse-node-version-1.0.1.tgz",
|
||||
"integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">= 0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/parse5": {
|
||||
"version": "5.1.1",
|
||||
"resolved": "https://registry.npmmirror.com/parse5/-/parse5-5.1.1.tgz",
|
||||
|
|
@ -7714,6 +7995,16 @@
|
|||
"url": "https://github.com/sponsors/jonschlinkert"
|
||||
}
|
||||
},
|
||||
"node_modules/pify": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/pify/-/pify-4.0.1.tgz",
|
||||
"integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/pkg-dir": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/pkg-dir/-/pkg-dir-4.2.0.tgz",
|
||||
|
|
@ -8363,6 +8654,13 @@
|
|||
"node": ">= 0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/prr": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/prr/-/prr-1.0.1.tgz",
|
||||
"integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"node_modules/pseudomap": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/pseudomap/-/pseudomap-1.0.2.tgz",
|
||||
|
|
@ -8553,8 +8851,7 @@
|
|||
"node_modules/regenerator-runtime": {
|
||||
"version": "0.14.1",
|
||||
"resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
|
||||
"integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
|
||||
"dev": true
|
||||
"integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
|
||||
},
|
||||
"node_modules/regenerator-transform": {
|
||||
"version": "0.15.2",
|
||||
|
|
@ -8649,6 +8946,11 @@
|
|||
"integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/resize-observer-polyfill": {
|
||||
"version": "1.5.1",
|
||||
"resolved": "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
|
||||
"integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
|
||||
},
|
||||
"node_modules/resolve": {
|
||||
"version": "1.22.8",
|
||||
"resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.8.tgz",
|
||||
|
|
@ -8772,6 +9074,13 @@
|
|||
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/sax": {
|
||||
"version": "1.4.1",
|
||||
"resolved": "https://registry.npmmirror.com/sax/-/sax-1.4.1.tgz",
|
||||
"integrity": "sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"node_modules/schema-utils": {
|
||||
"version": "2.7.1",
|
||||
"resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-2.7.1.tgz",
|
||||
|
|
@ -9500,6 +9809,14 @@
|
|||
"url": "https://opencollective.com/webpack"
|
||||
}
|
||||
},
|
||||
"node_modules/throttle-debounce": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-1.1.0.tgz",
|
||||
"integrity": "sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg==",
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/thunky": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/thunky/-/thunky-1.1.0.tgz",
|
||||
|
|
@ -10482,6 +10799,19 @@
|
|||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/zrender": {
|
||||
"version": "5.5.0",
|
||||
"resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.5.0.tgz",
|
||||
"integrity": "sha512-O3MilSi/9mwoovx77m6ROZM7sXShR/O/JIanvzTwjN3FORfLSr81PsUGd7jlaYOeds9d8tw82oP44+3YucVo+w==",
|
||||
"dependencies": {
|
||||
"tslib": "2.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/zrender/node_modules/tslib": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
|
||||
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,10 @@
|
|||
"build": "vue-cli-service build"
|
||||
},
|
||||
"dependencies": {
|
||||
"@jiaminghi/data-view": "^2.10.0",
|
||||
"core-js": "^3.8.3",
|
||||
"echarts": "^5.5.0",
|
||||
"element-ui": "^2.15.14",
|
||||
"vue": "^2.6.14",
|
||||
"vue-router": "^3.5.1",
|
||||
"vuex": "^3.6.2"
|
||||
|
|
@ -17,6 +20,8 @@
|
|||
"@vue/cli-plugin-router": "~5.0.0",
|
||||
"@vue/cli-plugin-vuex": "~5.0.0",
|
||||
"@vue/cli-service": "~5.0.0",
|
||||
"less": "^4.2.0",
|
||||
"less-loader": "^12.2.0",
|
||||
"vue-template-compiler": "^2.6.14"
|
||||
},
|
||||
"browserslist": [
|
||||
|
|
|
|||
129
src/App.vue
129
src/App.vue
|
|
@ -1,32 +1,121 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<nav>
|
||||
<router-link to="/">Home</router-link> |
|
||||
<router-link to="/about">About</router-link>
|
||||
</nav>
|
||||
<router-view/>
|
||||
<div class="container">
|
||||
<div class="header" style="padding-top: 20px;">
|
||||
<div class="header-left" style="padding-left: 180px; display: flex;">
|
||||
<img class="logo" src="./assets/logo.png" style="width: 331px;height: 60px;padding-left: 60px;">
|
||||
<div class="buttons" style="padding-left: 60px;">
|
||||
<el-button plain type='primary' @click="$router.push('/')" class="zhaosheng">
|
||||
<span style="transform: skewX(-45deg);display: inline-block;color: #fff;">招生</span>
|
||||
</el-button>
|
||||
<el-button plain type='primary' @click="$router.push('/peiyang')">
|
||||
<span style="transform: skewX(-45deg);display: inline-block;color: #fff;">培养</span>
|
||||
</el-button>
|
||||
<el-button plain type='primary' @click="$router.push('/jiuye')">
|
||||
<span style="transform: skewX(-45deg);display: inline-block;color: #fff;">就业</span>
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="header-title" style="display: flex;">
|
||||
<dv-decoration-8 style="width:300px;height:50px;flex:1" :color="['rgb(40 110 216)', 'rgb(40 110 216)']" />
|
||||
<div style="width:400px;height:100px;flex:1;text-align: center;line-height: 60px;font-size: 30px;">北京工商大学招生 培养 就业
|
||||
</div>
|
||||
<dv-decoration-8 :reverse="true" style="width:300px;height:50px;flex:1"
|
||||
:color="['rgb(40 110 216)', 'rgb(40 110 216)']" />
|
||||
</div>
|
||||
<div class="header-right">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
let element = document.querySelector('.zhaosheng')
|
||||
console.log('element1', element);
|
||||
element.focus();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less">
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
nav {
|
||||
padding: 30px;
|
||||
body,
|
||||
input,
|
||||
button,
|
||||
a,
|
||||
textarea,
|
||||
select {
|
||||
margin: 0;
|
||||
font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
|
||||
|
||||
}
|
||||
|
||||
nav a {
|
||||
font-weight: bold;
|
||||
color: #2c3e50;
|
||||
div {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
nav a.router-link-exact-active {
|
||||
color: #42b983;
|
||||
ul li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.container {
|
||||
color: aliceblue;
|
||||
width: 5760px;
|
||||
height: 1080px;
|
||||
background-color: #18478F;
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 108px; //
|
||||
|
||||
.header-left,
|
||||
.header-right {
|
||||
flex: 0 1 35%;
|
||||
|
||||
.el-button {
|
||||
border: none;
|
||||
transform: skewX(45deg);
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.el-button--primary {
|
||||
background-color: rgba(0, 102, 172, 0.4);
|
||||
border-color: #0066AC;
|
||||
}
|
||||
|
||||
.el-button--primary:focus {
|
||||
background-color: #BDA158;
|
||||
}
|
||||
}
|
||||
|
||||
.header-title {
|
||||
flex: 0 1 30%
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
BIN
src/assets/box.png
Normal file
BIN
src/assets/box.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
1
src/assets/china.json
Normal file
1
src/assets/china.json
Normal file
File diff suppressed because one or more lines are too long
BIN
src/assets/icon.png
Normal file
BIN
src/assets/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB After Width: | Height: | Size: 8.8 KiB |
123
src/components/AcademyDistribute.vue
Normal file
123
src/components/AcademyDistribute.vue
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
<template>
|
||||
<div class="chart-container">
|
||||
<div class="chart-title">
|
||||
<img class="icon" src="../assets/icon.png" style="">
|
||||
学院分布
|
||||
</div>
|
||||
<div class="chart" id="academy">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
drawAcademy() {
|
||||
var myChart = echarts.init(document.querySelector("#academy"));
|
||||
// There should not be negative values in rawData
|
||||
const rawData = [
|
||||
[100, 302, 301, 334, 390, 330, 320],
|
||||
[320, 132, 101, 134, 90, 230, 210],
|
||||
[220, 182, 191, 234, 290, 330, 310]
|
||||
];
|
||||
const totalData = [];
|
||||
for (let i = 0; i < rawData[0].length; ++i) {
|
||||
let sum = 0;
|
||||
for (let j = 0; j < rawData.length; ++j) {
|
||||
sum += rawData[j][i];
|
||||
}
|
||||
totalData.push(sum);
|
||||
}
|
||||
const grid = {
|
||||
left: 100,
|
||||
right: 100,
|
||||
top: 50,
|
||||
bottom: 50
|
||||
};
|
||||
const series = [
|
||||
'本科',
|
||||
'硕士',
|
||||
'博士'
|
||||
].map((name, sid) => {
|
||||
return {
|
||||
name,
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
barWidth: '25%',
|
||||
label: {
|
||||
show: true,
|
||||
color: '#fff',
|
||||
formatter: (params) => Math.round(params.value * 1000) / 10 + '%'
|
||||
},
|
||||
data: rawData[sid].map((d, did) =>
|
||||
totalData[did] <= 0 ? 0 : d / totalData[did]
|
||||
)
|
||||
};
|
||||
});
|
||||
let option = {
|
||||
legend: {
|
||||
selectedMode: false,
|
||||
textStyle: { color: '#fff' }
|
||||
},
|
||||
grid,
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitLine: { show: false },
|
||||
axisLabel: { color: '#fff' },
|
||||
splitArea: {
|
||||
show: true,
|
||||
areaStyle: {
|
||||
color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.05)']
|
||||
}
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['商学院', '数统学院', '计算机', '人工智能', '食品'],
|
||||
axisTick: { show: false },
|
||||
axisLabel: { color: '#fff' }
|
||||
},
|
||||
series
|
||||
};
|
||||
myChart.setOption(option);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.drawAcademy();
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.chart-container {
|
||||
width: 50%;
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
text-align: left;
|
||||
height: 10%; //
|
||||
padding-top: 8px;
|
||||
|
||||
.icon {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.chart {
|
||||
height: 90%; //
|
||||
|
||||
}
|
||||
</style>
|
||||
213
src/components/GenderDistribute.vue
Normal file
213
src/components/GenderDistribute.vue
Normal file
|
|
@ -0,0 +1,213 @@
|
|||
<template>
|
||||
<div class="chart-container">
|
||||
<div class="chart-title">
|
||||
<img class="icon" src="../assets/icon.png" style="">
|
||||
性别分布
|
||||
</div>
|
||||
<div class="chart" id="gender">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
drawGender() {
|
||||
let myChart = echarts.init(document.querySelector("#gender"));
|
||||
// 2. 指定配置项和数据
|
||||
let option = {
|
||||
color: ["#2f89cf"],
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
// 坐标轴指示器，坐标轴触发有效
|
||||
type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
textStyle: {
|
||||
color: "#4c9bfd"
|
||||
}
|
||||
},
|
||||
// 修改图表的大小
|
||||
grid: {
|
||||
left: "0%",
|
||||
top: "30px",
|
||||
right: "0%",
|
||||
bottom: "4%",
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: [
|
||||
"全部",
|
||||
"本科",
|
||||
"硕士",
|
||||
"博士"
|
||||
],
|
||||
axisTick: {
|
||||
alignWithLabel: true
|
||||
},
|
||||
// 修改刻度标签 相关样式
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: "12"
|
||||
},
|
||||
// 不显示x坐标轴的样式
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#0c3b71'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
gridIndex: 0,
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#0c3b71'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: 'white',
|
||||
formatter: '{value} %'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
gridIndex: 0,
|
||||
min: 0,
|
||||
max: 100,
|
||||
splitNumber: 12,
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
splitArea: {
|
||||
show: true,
|
||||
areaStyle: {
|
||||
color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.05)']
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "女",
|
||||
type: "bar",
|
||||
barWidth: "8%",
|
||||
data: [20, 30, 30, 90, 15, 12, 60],
|
||||
itemStyle: {
|
||||
// 修改柱子圆角
|
||||
barBorderRadius: 5,
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "#F0C6EC" // 渐变色的起始颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#C18698' // 渐变线的结束颜色
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "男",
|
||||
type: "bar",
|
||||
barWidth: "8%",
|
||||
data: [20, 30, 40, 45, 35, 12, 60],
|
||||
itemStyle: {
|
||||
// 修改柱子圆角
|
||||
barBorderRadius: 5,
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "#44AAFD" // 渐变色的起始颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#003B8A' // 渐变线的结束颜色
|
||||
}
|
||||
],
|
||||
false
|
||||
),
|
||||
}
|
||||
}
|
||||
],
|
||||
barGap: 0
|
||||
};
|
||||
// 3. 把配置项给实例对象
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.drawGender();
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.chart-container {
|
||||
width: 50%;
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
text-align: left;
|
||||
height: 10%; //
|
||||
padding-top: 8px;
|
||||
|
||||
.icon {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.chart {
|
||||
height: 90%; //
|
||||
|
||||
}
|
||||
</style>
|
||||
149
src/components/GradeDistribution.vue
Normal file
149
src/components/GradeDistribution.vue
Normal file
|
|
@ -0,0 +1,149 @@
|
|||
<template>
|
||||
<div class="chart-container">
|
||||
<div class="chart-title">
|
||||
<img class="icon" src="../assets/icon.png" style="">
|
||||
年级分布
|
||||
</div>
|
||||
<div class="chart" id="grade">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
drawGradeDistribution() {
|
||||
var myChart = echarts.init(document.querySelector("#grade"));
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
// Use axis to trigger tooltip
|
||||
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
show: false,
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: ['本科', '硕士', '博士'],
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '一年级',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
label: {
|
||||
show: true
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [320, 302, 301, 334, 390, 330, 320],
|
||||
barWidth: 30
|
||||
},
|
||||
{
|
||||
name: '二年级',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
label: {
|
||||
show: true
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [120, 132, 101, 134, 90, 230, 210]
|
||||
},
|
||||
{
|
||||
name: '三年级',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
label: {
|
||||
show: true
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [220, 182, 191, 234, 290, 330, 310]
|
||||
},
|
||||
{
|
||||
name: '四年级及以上 ',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
label: {
|
||||
show: true
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [220, 182, 191, 234, 290, 330, 310]
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.drawGradeDistribution();
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.chart-container {
|
||||
width: 50%;
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
text-align: left;
|
||||
height: 10%; //
|
||||
padding-top: 8px;
|
||||
|
||||
.icon {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.chart {
|
||||
height: 90%; //
|
||||
|
||||
}
|
||||
</style>
|
||||
130
src/components/HabitatDistribute.vue
Normal file
130
src/components/HabitatDistribute.vue
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
<template>
|
||||
<div class="chart-container">
|
||||
<div class="chart-title">
|
||||
<img class="icon" src="../assets/icon.png" style="">
|
||||
民族分布
|
||||
</div>
|
||||
<div class="chart" style="display: flex;width: 100%;height: 90%;">
|
||||
<dv-active-ring-chart :config="config22" style="width:40%;height:100%" />
|
||||
<div id="habitat" style="width:40%;height:100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
config22: {
|
||||
data: [
|
||||
{
|
||||
name: '少数民族学生',
|
||||
value: 35
|
||||
},
|
||||
{
|
||||
name: '其他',
|
||||
value: 65
|
||||
}
|
||||
],
|
||||
color: ['#65A8EE', '#84D5CC'],
|
||||
digitalFlopStyle: {
|
||||
fontSize: 15,
|
||||
fill: '#3de7c9'
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
drawHabitat() {
|
||||
var myChart = echarts.init(document.querySelector("#habitat"));
|
||||
var option = {
|
||||
color: [
|
||||
"#006cff",
|
||||
"#60cda0",
|
||||
"#ed8884",
|
||||
"#ff9f7f",
|
||||
"#0096ff",
|
||||
"#9fe6b8",
|
||||
"#32c5e9",
|
||||
"#1d9dff"
|
||||
],
|
||||
title: {
|
||||
text: '各少数民族占比',
|
||||
x: 'center',
|
||||
y: 'center',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
||||
},
|
||||
label: {
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "地区分布",
|
||||
type: "pie",
|
||||
radius: ["60%", "70%"],
|
||||
center: ["50%", "50%"],
|
||||
roseType: "radius",
|
||||
|
||||
// 图形的文字标签
|
||||
label: {
|
||||
fontSize: 15,
|
||||
color: '#fff'
|
||||
},
|
||||
// 链接图形和文字的线条
|
||||
labelLine: {
|
||||
// length 链接图形的线条
|
||||
length: 10,
|
||||
// length2 链接文字的线条
|
||||
length2: 10
|
||||
},
|
||||
data: [
|
||||
{ value: 20, name: "回族" },
|
||||
{ value: 26, name: "苗族" },
|
||||
{ value: 24, name: "蒙古族" },
|
||||
{ value: 25, name: "白族" }
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.drawHabitat();
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.chart-container {
|
||||
width: 50%;
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
text-align: left;
|
||||
height: 10%; //
|
||||
padding-top: 8px;
|
||||
|
||||
.icon {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.chart {
|
||||
height: 90%; //
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
<template>
|
||||
<div class="hello">
|
||||
<h1>{{ msg }}</h1>
|
||||
<p>
|
||||
For a guide and recipes on how to configure / customize this project,<br>
|
||||
check out the
|
||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
|
||||
</p>
|
||||
<h3>Installed CLI Plugins</h3>
|
||||
<ul>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
|
||||
</ul>
|
||||
<h3>Essential Links</h3>
|
||||
<ul>
|
||||
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
|
||||
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
|
||||
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
|
||||
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
|
||||
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
|
||||
</ul>
|
||||
<h3>Ecosystem</h3>
|
||||
<ul>
|
||||
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
|
||||
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
|
||||
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
|
||||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'HelloWorld',
|
||||
props: {
|
||||
msg: String
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
h3 {
|
||||
margin: 40px 0 0;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
</style>
|
||||
118
src/components/Overall.vue
Normal file
118
src/components/Overall.vue
Normal file
|
|
@ -0,0 +1,118 @@
|
|||
<template>
|
||||
<div class="chart-container" style="width: 100%;">
|
||||
<div class="chart-title">
|
||||
<img class="icon" src="../assets/icon.png" style="">
|
||||
整体概览
|
||||
</div>
|
||||
<div class="chart" style="display: flex;justify-content: space-evenly;text-align: center;">
|
||||
<div style="width: 260px;">
|
||||
<div style="color: #fff;padding-top: 30px;font-size: 20px;"> 一流专业</div>
|
||||
<div style="color: #e7c20a;font-size: 30px;padding-top: 20px;padding-bottom: 20px;"> 111个</div>
|
||||
<img src='../assets/box.png' style="width: 222px;height: 120px;">
|
||||
</div>
|
||||
<div style="width: 260px;">
|
||||
<div style="color: #fff;padding-top: 30px;font-size: 20px;"> 一流专业</div>
|
||||
<div style="color: #e7c20a;font-size: 30px;padding-top: 20px;padding-bottom: 20px;"> 111个</div>
|
||||
<img src='../assets/box.png' style="width: 222px;height: 120px;">
|
||||
</div>
|
||||
<div style="width: 260px;">
|
||||
<div style="color: #fff;padding-top: 30px;font-size: 20px;"> 一流课程</div>
|
||||
<div style="color: #e7c20a;font-size: 30px;padding-top: 20px;padding-bottom: 20px;"> 2000门</div>
|
||||
<img src='../assets/box.png' style="width: 222px;height: 120px;">
|
||||
</div>
|
||||
<div style="width: 260px;">
|
||||
<div style="color: #fff;padding-top: 30px;font-size: 20px;"> 优秀教材</div>
|
||||
<div style="color: #e7c20a;font-size: 30px;padding-top: 20px;padding-bottom: 20px;"> 131本</div>
|
||||
<img src='../assets/box.png' style="width: 222px;height: 120px;">
|
||||
</div>
|
||||
<div style="width: 260px;">
|
||||
<div style="color: #fff;padding-top: 30px;font-size: 20px;"> 教学名师</div>
|
||||
<div style="color: #e7c20a;font-size: 30px;padding-top: 20px;padding-bottom: 20px;"> 131人</div>
|
||||
<img src='../assets/box.png' style="width: 222px;height: 120px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
|
||||
export default {
|
||||
name: 'HomeView',
|
||||
components: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.chart-container {
|
||||
width: 50%;
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
text-align: left;
|
||||
padding-top: 8px;
|
||||
height: 10%; //
|
||||
|
||||
.icon {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.chart {
|
||||
height: 90%; //
|
||||
|
||||
/deep/ .el-table td {
|
||||
color: white;
|
||||
border-bottom: 0px;
|
||||
background-color: #09437A !important;
|
||||
}
|
||||
|
||||
/deep/ tr {
|
||||
color: white;
|
||||
border-bottom: 0px;
|
||||
background-color: #09437A !important;
|
||||
}
|
||||
|
||||
/deep/ .el-table__row--striped td {
|
||||
color: white;
|
||||
border-bottom: 0px;
|
||||
background-color: #0C2B61 !important;
|
||||
}
|
||||
|
||||
/deep/ .el-table th {
|
||||
color: white;
|
||||
border-bottom: 0px !important;
|
||||
background-color: #0C2B61 !important;
|
||||
}
|
||||
|
||||
/deep/ .el-table--border::after {
|
||||
background: #0C2B61;
|
||||
}
|
||||
|
||||
/deep/ .el-table--group::after {
|
||||
background: #0C2B61;
|
||||
}
|
||||
|
||||
/deep/ .el-table::before {
|
||||
background: #0C2B61;
|
||||
}
|
||||
|
||||
/deep/ .el-table__empty-block {
|
||||
background: #0C2B61;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
106
src/components/SemesterCourse.vue
Normal file
106
src/components/SemesterCourse.vue
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
<template>
|
||||
<div class="chart-container" style="padding-left: 20px;">
|
||||
<div class="chart-title">
|
||||
<img class="icon" src="../assets/icon.png" style="">
|
||||
本学期课程
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="chart">
|
||||
<div style="height:100%">
|
||||
<span style="display: inline-block;background-color: #18478F;width: 100%;height: 30px;text-align: center;">本学期开课课程
|
||||
共2900门课</span>
|
||||
<ul>
|
||||
<li style="border-bottom: solid 1px #f62a06;height: 35px;line-height: 35px;">
|
||||
<span style="background-color: #f62a06;">1</span>
|
||||
<span style="">商学院</span>
|
||||
<span style="">200门课</span>
|
||||
</li>
|
||||
<li style="border-bottom: solid 1px #e7482c;height: 35px;line-height: 35px;">
|
||||
<span style="background-color: #e7482c;">1</span>
|
||||
<span style="">商学院</span>
|
||||
<span style="">200门课</span>
|
||||
</li>
|
||||
<li style="border-bottom: solid 1px #f6b606;height: 35px;line-height: 35px;">
|
||||
<span style="background-color: #f6b606;">1</span>
|
||||
<span style="">商学院</span>
|
||||
<span style="">200门课</span>
|
||||
</li>
|
||||
<li style="border-bottom: solid 1px #1e06f6;height: 35px;line-height: 35px;">
|
||||
<span style="background-color: #1e06f6;">1</span>
|
||||
<span style="">商学院</span>
|
||||
<span style="">200门课</span>
|
||||
</li>
|
||||
<li style="border-bottom: solid 1px #1e06f6;height: 35px;line-height: 35px;">
|
||||
<span style="background-color: #1e06f6;">1</span>
|
||||
<span style="">商学院</span>
|
||||
<span style="">200门课</span>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
|
||||
export default {
|
||||
name: 'HomeView',
|
||||
components: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.chart-container {
|
||||
width: 50%;
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
text-align: left;
|
||||
padding-top: 8px;
|
||||
height: 10%; //
|
||||
|
||||
.icon {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.chart {
|
||||
height: 90%; //
|
||||
|
||||
ul li {
|
||||
span:nth-child(1) {
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
height: 25px;
|
||||
margin-right: 20px;
|
||||
text-align: center;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
span:nth-child(2) {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
span:nth-child(3) {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
146
src/components/StudentNum.vue
Normal file
146
src/components/StudentNum.vue
Normal file
|
|
@ -0,0 +1,146 @@
|
|||
<template>
|
||||
<div class="chart-container">
|
||||
<div class="chart-title">
|
||||
<img class="icon" src="../assets/icon.png" style="">
|
||||
学生人数
|
||||
</div>
|
||||
<div class="chart">
|
||||
<div style="background-color: #19498F;width: 50%;margin: auto;text-align: center;">
|
||||
<span style="margin-right:20px">在校生合计 :</span>
|
||||
<span style="color: #B6A35D;">20000人</span>
|
||||
</div>
|
||||
<div style="display: flex;width: 100%;height: 90%;">
|
||||
<!-- 饼图 -->
|
||||
<dv-active-ring-chart :config="config11" style="width:50%;height:100%" />
|
||||
<!-- 表格 -->
|
||||
<div style="width:50%;height:100%">
|
||||
<el-table :data="tableData" stripe style="width: 100%;">
|
||||
<el-table-column prop="date" label="分类" width="100">
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="人数" width="100">
|
||||
</el-table-column>
|
||||
<el-table-column prop="address" label="占比">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
export default {
|
||||
name: 'HomeView',
|
||||
components: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
config11: {
|
||||
data: [
|
||||
{
|
||||
name: '本科生占比',
|
||||
value: 60
|
||||
},
|
||||
{
|
||||
name: '硕士占比',
|
||||
value: 35
|
||||
},
|
||||
{
|
||||
name: '博士占比',
|
||||
value: 5
|
||||
}
|
||||
],
|
||||
color: ['#65A8EE', '#FFEC67', '#84D5CC'],
|
||||
digitalFlopStyle: {
|
||||
fontSize: 15,
|
||||
fill: '#fff'
|
||||
}
|
||||
},
|
||||
tableData: [{
|
||||
date: '本科生',
|
||||
name: '12000',
|
||||
address: '60%'
|
||||
}, {
|
||||
date: '硕士',
|
||||
name: '7000',
|
||||
address: '35%'
|
||||
}, {
|
||||
date: '博士',
|
||||
name: '1000',
|
||||
address: '5%'
|
||||
}],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.chart-container {
|
||||
width: 50%;
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
text-align: left;
|
||||
padding-top: 8px;
|
||||
height: 10%; //
|
||||
|
||||
.icon {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.chart {
|
||||
height: 90%; //
|
||||
|
||||
/deep/ .el-table td {
|
||||
color: white;
|
||||
border-bottom: 0px;
|
||||
background-color: #09437A !important;
|
||||
}
|
||||
|
||||
/deep/ tr {
|
||||
color: white;
|
||||
border-bottom: 0px;
|
||||
background-color: #09437A !important;
|
||||
}
|
||||
|
||||
/deep/ .el-table__row--striped td {
|
||||
color: white;
|
||||
border-bottom: 0px;
|
||||
background-color: #0C2B61 !important;
|
||||
}
|
||||
|
||||
/deep/ .el-table th {
|
||||
color: white;
|
||||
border-bottom: 0px !important;
|
||||
background-color: #0C2B61 !important;
|
||||
}
|
||||
|
||||
/deep/ .el-table--border::after {
|
||||
background: #0C2B61;
|
||||
}
|
||||
|
||||
/deep/ .el-table--group::after {
|
||||
background: #0C2B61;
|
||||
}
|
||||
|
||||
/deep/ .el-table::before {
|
||||
background: #0C2B61;
|
||||
}
|
||||
|
||||
/deep/ .el-table__empty-block {
|
||||
background: #0C2B61;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
124
src/components/TeacherStudent.vue
Normal file
124
src/components/TeacherStudent.vue
Normal file
|
|
@ -0,0 +1,124 @@
|
|||
<template>
|
||||
<div class="chart-container">
|
||||
<div class="chart-title">
|
||||
<img class="icon" src="../assets/icon.png" style="">
|
||||
生师比分析
|
||||
</div>
|
||||
<div class="chart" style="display: flex;width: 100%;height: 90%;">
|
||||
<dv-active-ring-chart :config="config33" style="width:40%;height:100%" />
|
||||
<!-- 表格 -->
|
||||
<div style="width:50%;height:100%">
|
||||
<span
|
||||
style="display: inline-block;background-color: #18478F;width: 100%;height: 30px;text-align: center;">各学院生师比</span>
|
||||
<ul>
|
||||
<li style="border-bottom: solid 1px #f62a06;height: 35px;line-height: 35px;">
|
||||
<span style="background-color: #f62a06;">1</span>
|
||||
<span style="">商学院</span>
|
||||
<span style="">73:1</span>
|
||||
</li>
|
||||
<li style="border-bottom: solid 1px #e7482c;height: 35px;line-height: 35px;">
|
||||
<span style="background-color: #e7482c;">1</span>
|
||||
<span style="">商学院</span>
|
||||
<span style="">73:1</span>
|
||||
</li>
|
||||
<li style="border-bottom: solid 1px #f6b606;height: 35px;line-height: 35px;">
|
||||
<span style="background-color: #f6b606;">1</span>
|
||||
<span style="">商学院</span>
|
||||
<span style="">73:1</span>
|
||||
</li>
|
||||
<li style="border-bottom: solid 1px #1e06f6;height: 35px;line-height: 35px;">
|
||||
<span style="background-color: #1e06f6;">1</span>
|
||||
<span style="">商学院</span>
|
||||
<span style="">73:1</span>
|
||||
</li>
|
||||
<li style="border-bottom: solid 1px #1e06f6;height: 35px;line-height: 35px;">
|
||||
<span style="background-color: #1e06f6;">1</span>
|
||||
<span style="">商学院</span>
|
||||
<span style="">73:1</span>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
config33: {
|
||||
data: [
|
||||
{
|
||||
name: '在校生占比',
|
||||
value: 95
|
||||
},
|
||||
{
|
||||
name: '校外占比',
|
||||
value: 5
|
||||
}
|
||||
],
|
||||
color: ['#65A8EE', '#84D5CC'],
|
||||
digitalFlopStyle: {
|
||||
fontSize: 20,
|
||||
fill: '#fff'
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.chart-container {
|
||||
width: 50%;
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
text-align: left;
|
||||
height: 10%; //
|
||||
padding-top: 8px;
|
||||
|
||||
.icon {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.chart {
|
||||
height: 90%; //
|
||||
|
||||
ul li {
|
||||
span:nth-child(1) {
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
height: 25px;
|
||||
margin-right: 20px;
|
||||
text-align: center;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
span:nth-child(2) {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
span:nth-child(3) {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
152
src/components/jiuye/AcademyDistribution.vue
Normal file
152
src/components/jiuye/AcademyDistribution.vue
Normal file
|
|
@ -0,0 +1,152 @@
|
|||
<template>
|
||||
<div class="chart-container" style="width: 60%;">
|
||||
<div class="chart-title">
|
||||
<img class="icon" src="../../assets/icon.png" style="">
|
||||
学院分布
|
||||
</div>
|
||||
<div class="chart" id="academy">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
drawAcademyDistribution() {
|
||||
var myChart = echarts.init(document.querySelector("#academy"));
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
// Use axis to trigger tooltip
|
||||
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
show: false,
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
splitArea: {
|
||||
show: true,
|
||||
areaStyle: {
|
||||
color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.1)']
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: ['商学院', '计算机学院', '食品学院', '数统学院', '人工智能学院', '外国语学院', '管理学院'],
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff'
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '本科',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
label: {
|
||||
show: true
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [3200, 3020, 3010, 3340, 3900, 3300, 3200],
|
||||
barWidth: 30,
|
||||
itemStyle: {
|
||||
color: '#1EA8FF'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '硕士',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
label: {
|
||||
show: true
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [2200, 1820, 1910, 2340, 2900, 3300, 3100],
|
||||
itemStyle: {
|
||||
color: '#19C097'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '博士',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
label: {
|
||||
show: true
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [1200, 1320, 1010, 1340, 900, 2300, 2100],
|
||||
itemStyle: {
|
||||
color: '#DDD48C'
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.drawAcademyDistribution();
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
text-align: left;
|
||||
height: 10%; //
|
||||
padding-top: 8px;
|
||||
|
||||
.icon {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.chart {
|
||||
height: 90%; //
|
||||
|
||||
}
|
||||
</style>
|
||||
285
src/components/zhaosheng/ChinaMap.vue
Normal file
285
src/components/zhaosheng/ChinaMap.vue
Normal file
|
|
@ -0,0 +1,285 @@
|
|||
<template>
|
||||
<div class="chart-container" style="width: 40%;">
|
||||
<div class="chart-title">
|
||||
<img class="icon" src="../../assets/icon.png" style="">
|
||||
生源分布
|
||||
</div>
|
||||
<div class="chart" id="map">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import * as echarts from 'echarts';
|
||||
import chinaJson from '../../assets/china.json';
|
||||
|
||||
export default {
|
||||
name: 'HomeView',
|
||||
components: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
drawChina() {
|
||||
let myChart = echarts.init(document.querySelector("#map"));
|
||||
echarts.registerMap('chinaMap', chinaJson)
|
||||
let dataList = [
|
||||
{
|
||||
name: '北京市',
|
||||
value: 5400
|
||||
},
|
||||
{
|
||||
name: '天津市',
|
||||
value: 1300
|
||||
},
|
||||
{
|
||||
name: '上海市',
|
||||
value: 400
|
||||
},
|
||||
{
|
||||
name: '重庆市',
|
||||
value: 750
|
||||
},
|
||||
{
|
||||
name: '河北省',
|
||||
value: 1300
|
||||
},
|
||||
{
|
||||
name: '河南省',
|
||||
value: 830
|
||||
},
|
||||
{
|
||||
name: '云南省',
|
||||
value: 110
|
||||
},
|
||||
{
|
||||
name: '辽宁省',
|
||||
value: 1900
|
||||
},
|
||||
{
|
||||
name: '黑龙江省',
|
||||
value: 1500
|
||||
},
|
||||
{
|
||||
name: '湖南省',
|
||||
value: 690
|
||||
},
|
||||
{
|
||||
name: '安徽省',
|
||||
value: 600
|
||||
},
|
||||
{
|
||||
name: '山东省',
|
||||
value: 3900
|
||||
},
|
||||
{
|
||||
name: '新疆维吾尔自治区',
|
||||
value: 400
|
||||
},
|
||||
{
|
||||
name: '江苏省',
|
||||
value: 310
|
||||
},
|
||||
{
|
||||
name: '浙江省',
|
||||
value: 1040
|
||||
},
|
||||
{
|
||||
name: '江西省',
|
||||
value: 360
|
||||
},
|
||||
{
|
||||
name: '湖北省',
|
||||
value: 1052
|
||||
},
|
||||
{
|
||||
name: '广西壮族自治区',
|
||||
value: 330
|
||||
},
|
||||
{
|
||||
name: '甘肃省',
|
||||
value: 70
|
||||
},
|
||||
{
|
||||
name: '山西省',
|
||||
value: 90
|
||||
},
|
||||
{
|
||||
name: '内蒙古自治区',
|
||||
value: 70
|
||||
},
|
||||
{
|
||||
name: '陕西省',
|
||||
value: 220
|
||||
},
|
||||
{
|
||||
name: '吉林省',
|
||||
value: 40
|
||||
},
|
||||
{
|
||||
name: '福建省',
|
||||
value: 180
|
||||
},
|
||||
{
|
||||
name: '贵州省',
|
||||
value: 50
|
||||
},
|
||||
{
|
||||
name: '广东省',
|
||||
value: 98
|
||||
},
|
||||
{
|
||||
name: '青海省',
|
||||
value: 10
|
||||
},
|
||||
{
|
||||
name: '西藏自治区',
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
name: '四川省',
|
||||
value: 440
|
||||
},
|
||||
{
|
||||
name: '宁夏回族自治区',
|
||||
value: 40
|
||||
},
|
||||
{
|
||||
name: '海南省',
|
||||
value: 220
|
||||
},
|
||||
{
|
||||
name: '台湾省',
|
||||
value: 30
|
||||
},
|
||||
{
|
||||
name: '香港特别行政区',
|
||||
value: 50
|
||||
},
|
||||
{
|
||||
name: '澳门特别行政区',
|
||||
value: 50
|
||||
}
|
||||
];
|
||||
let option = {
|
||||
tooltip: {
|
||||
triggerOn: "click",
|
||||
formatter: function (e, t, n) {
|
||||
return .5 == e.value ? e.name + "：有疑似病例" : e.seriesName + "<br />" + e.name + "：" + e.value
|
||||
}
|
||||
},
|
||||
visualMap: {
|
||||
min: 0,
|
||||
max: 1000,
|
||||
left: '20px',
|
||||
bottom: 0,
|
||||
showLabel: true,
|
||||
// text: ["高", "低"],
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
pieces: [{
|
||||
gt: 1000,
|
||||
label: "> 1000 人的生源地",
|
||||
color: "#FF9300"
|
||||
}, {
|
||||
gte: 500,
|
||||
lte: 1000,
|
||||
label: "> 500 人的生源",
|
||||
color: "#FFCE00"
|
||||
}, {
|
||||
gte: 200,
|
||||
lt: 500,
|
||||
label: ">200 人的生源地",
|
||||
color: "#2BE5C3"
|
||||
}, {
|
||||
gt: 100,
|
||||
lt: 200,
|
||||
label: ">100 人的生源地",
|
||||
color: "#00E1ED"
|
||||
}, {
|
||||
gt: 0,
|
||||
lt: 100,
|
||||
label: "0-100 人的生源地",
|
||||
color: "#00C7FF"
|
||||
}],
|
||||
show: !0
|
||||
},
|
||||
geo: {
|
||||
type: 'map',
|
||||
map: 'chinaMap',
|
||||
roam: true,
|
||||
zoom: 1.5,
|
||||
center: [106.504962, 29.533155],
|
||||
scaleLimit: {
|
||||
min: 1,
|
||||
max: 2
|
||||
},
|
||||
top: 120,
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
fontSize: "14",
|
||||
color: "rgba(0,0,0,0.7)"
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
//shadowBlur: 50,
|
||||
//shadowColor: 'rgba(0, 0, 0, 0.2)',
|
||||
borderColor: "rgba(0, 0, 0, 0.2)"
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: "#f2d5ad",
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 0,
|
||||
borderWidth: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: "确诊病例",
|
||||
type: "map",
|
||||
geoIndex: 0,
|
||||
data: dataList
|
||||
}]
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.drawChina();
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.chart-container {
|
||||
width: 50%;
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
text-align: left;
|
||||
padding-top: 8px;
|
||||
height: 10%; //
|
||||
|
||||
.icon {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.chart {
|
||||
height: 90%; //
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
173
src/components/zhaosheng/EnrollmentPlan.vue
Normal file
173
src/components/zhaosheng/EnrollmentPlan.vue
Normal file
|
|
@ -0,0 +1,173 @@
|
|||
<template>
|
||||
<div class="chart-container" style="width: 40%;">
|
||||
<div class="chart-title">
|
||||
<img class="icon" src="../../assets/icon.png" style="">
|
||||
招生计划
|
||||
</div>
|
||||
<div class="chart" id="plan">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
drawPlan() {
|
||||
let myChart = echarts.init(document.querySelector("#plan"));
|
||||
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
crossStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
legend: {
|
||||
data: ['招生人数', '同比'],
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['2020', '2021', '2022', '2023', '2024'],
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '招生人数',
|
||||
nameTextStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
min: 0,
|
||||
max: 8000,
|
||||
// interval: 50,
|
||||
axisLabel: {
|
||||
formatter: '{value} 人',
|
||||
color: '#fff'
|
||||
},
|
||||
splitLine: false,
|
||||
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '同比',
|
||||
nameTextStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
min: 0,
|
||||
max: 25,
|
||||
// interval: 5,
|
||||
axisLabel: {
|
||||
formatter: '{value} %',
|
||||
color: '#fff'
|
||||
},
|
||||
splitLine: false,
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '招生人数',
|
||||
type: 'bar',
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value + ' 人';
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "#4AB7D9" // 渐变色的起始颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#037A8E'// 渐变线的结束颜色
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
|
||||
},
|
||||
barWidth: '30%',
|
||||
data: [
|
||||
2320, 2560, 6670, 6888, 7000
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '同比',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value + ' %';
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#8E7903'
|
||||
},
|
||||
data: [6.3, 10.2, 15.3, 21.4, 24.0, 26.5,]
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.drawPlan();
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.chart-container {
|
||||
width: 50%;
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
text-align: left;
|
||||
padding-top: 8px;
|
||||
height: 10%; //
|
||||
|
||||
.icon {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.chart {
|
||||
height: 90%; //
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
261
src/components/zhaosheng/ProvinceScore.vue
Normal file
261
src/components/zhaosheng/ProvinceScore.vue
Normal file
|
|
@ -0,0 +1,261 @@
|
|||
<template>
|
||||
<div class="chart-container" style="width: 60%;">
|
||||
<div class="chart-title">
|
||||
<img class="icon" src="../../assets/icon.png" style="">
|
||||
各地区分数
|
||||
</div>
|
||||
<!-- 筛选 -->
|
||||
<div style="display: flex;padding-top: 15px;background-color: rgba(97,123,169, 0.1);">
|
||||
<div style="width: 10%;text-align: center;line-height: 40px;">省份</div>
|
||||
<div style="width: 90%;">
|
||||
<el-button v-for="item in provinces">{{ item }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 招生分数图表 -->
|
||||
<div class="chart" id="score" style="height: 420px;">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
provinces: [
|
||||
'河北', '山西', '辽宁', '吉林', '黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '海南', '四川', '贵州', '云南', '陕西', '甘肃', '青海', '台湾', '内蒙古', '广西', '西藏', '宁夏', '新疆', '北京', '天津', '上海', '重庆', '香港', '澳门'
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
drawScore() {
|
||||
let myChart = echarts.init(document.querySelector("#score"));
|
||||
// 2. 指定配置项和数据
|
||||
let option = {
|
||||
color: ["#2f89cf"],
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
// 坐标轴指示器，坐标轴触发有效
|
||||
type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
textStyle: {
|
||||
color: "#fff"
|
||||
},
|
||||
top: '10px'
|
||||
},
|
||||
// 修改图表的大小
|
||||
grid: {
|
||||
left: "3%",
|
||||
top: "30px",
|
||||
right: "0%",
|
||||
bottom: "4%",
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: [
|
||||
"2020",
|
||||
"2021",
|
||||
"2022",
|
||||
"2023",
|
||||
"2024"
|
||||
],
|
||||
axisTick: {
|
||||
alignWithLabel: true
|
||||
},
|
||||
// 修改刻度标签 相关样式
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: "12"
|
||||
},
|
||||
// 不显示x坐标轴的样式
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#0c3b71'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
gridIndex: 0,
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#0c3b71'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: 'white',
|
||||
formatter: '{value} 分'
|
||||
},
|
||||
splitArea: {
|
||||
show: true,
|
||||
areaStyle: {
|
||||
color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.05)']
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "最低分",
|
||||
type: "bar",
|
||||
barWidth: "8%",
|
||||
data: [560, 570, 565, 580, 590],
|
||||
itemStyle: {
|
||||
// 修改柱子圆角
|
||||
barBorderRadius: 5,
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "#F0C6EC" // 渐变色的起始颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#C18698' // 渐变线的结束颜色
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "最高分",
|
||||
type: "bar",
|
||||
barWidth: "8%",
|
||||
data: [600, 610, 612, 620, 600],
|
||||
itemStyle: {
|
||||
// 修改柱子圆角
|
||||
barBorderRadius: 5,
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "#44AAFD" // 渐变色的起始颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#003B8A' // 渐变线的结束颜色
|
||||
}
|
||||
],
|
||||
false
|
||||
),
|
||||
}
|
||||
}
|
||||
],
|
||||
barGap: 0
|
||||
};
|
||||
// 3. 把配置项给实例对象
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.drawScore();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.chart-container {
|
||||
width: 50%;
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
text-align: left;
|
||||
padding-top: 8px;
|
||||
height: 10%; //
|
||||
|
||||
.icon {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.chart {
|
||||
height: 90%; //
|
||||
|
||||
/deep/ .el-table td {
|
||||
color: white;
|
||||
border-bottom: 0px;
|
||||
background-color: #09437A !important;
|
||||
}
|
||||
|
||||
/deep/ tr {
|
||||
color: white;
|
||||
border-bottom: 0px;
|
||||
background-color: #09437A !important;
|
||||
}
|
||||
|
||||
/deep/ .el-table__row--striped td {
|
||||
color: white;
|
||||
border-bottom: 0px;
|
||||
background-color: #0C2B61 !important;
|
||||
}
|
||||
|
||||
/deep/ .el-table th {
|
||||
color: white;
|
||||
border-bottom: 0px !important;
|
||||
background-color: #0C2B61 !important;
|
||||
}
|
||||
|
||||
/deep/ .el-table--border::after {
|
||||
background: #0C2B61;
|
||||
}
|
||||
|
||||
/deep/ .el-table--group::after {
|
||||
background: #0C2B61;
|
||||
}
|
||||
|
||||
/deep/ .el-table::before {
|
||||
background: #0C2B61;
|
||||
}
|
||||
|
||||
/deep/ .el-table__empty-block {
|
||||
background: #0C2B61;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/deep/ .el-button {
|
||||
background: rgba(255, 255, 255, 0);
|
||||
border: 0;
|
||||
color: #fff;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/deep/ .el-button:focus {
|
||||
background: rgba(233, 193, 23, 1);
|
||||
}
|
||||
</style>
|
||||
213
src/components/zhaosheng/Trend.vue
Normal file
213
src/components/zhaosheng/Trend.vue
Normal file
|
|
@ -0,0 +1,213 @@
|
|||
<template>
|
||||
<div class="chart-container" style="width: 60%;">
|
||||
<div class="chart-title">
|
||||
<img class="icon" src="../../assets/icon.png" style="">
|
||||
招生趋势
|
||||
</div>
|
||||
<div class="chart" style="display: flex;align-items:center">
|
||||
<!-- 两个类似饼图 -->
|
||||
<div class="chart-item" style="flex:1;display: flex;">
|
||||
<div style="flex:1;padding-top: 20px;">
|
||||
<dv-decoration-9 style="width:150px;height:150px;margin: auto;" :dur=30>第10</dv-decoration-9>
|
||||
<div style="background-color: #0768A0;width:150px;margin: auto;margin-top: 20px;text-align: center;">
|
||||
2023综合排名
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex:1;padding-top: 20px;">
|
||||
<dv-decoration-9 style="width:150px;height:150px;margin: auto;" :dur=30>第10</dv-decoration-9>
|
||||
<div style="background-color: #0768A0;width:150px;margin: auto;margin-top: 20px;text-align: center;">
|
||||
2023商科排名
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 各地区排名 -->
|
||||
<div class="chart-item" style="flex:1;">
|
||||
<div>2023年各地区排名</div>
|
||||
<!-- 表格 -->
|
||||
<div style="width:100%;height:100%">
|
||||
<el-table :data="tableData" stripe style="width: 100%;">
|
||||
<el-table-column prop="date" label="地区">
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="综合排名">
|
||||
</el-table-column>
|
||||
<el-table-column prop="address" label="财经排名">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 排名趋势 -->
|
||||
<div class="chart-item" style="flex:1;height: 210px;">
|
||||
排名趋势
|
||||
<div id="rank-trend" style="height: 100%;">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [{
|
||||
date: '华北',
|
||||
name: '12',
|
||||
address: '6'
|
||||
}, {
|
||||
date: '西北',
|
||||
name: '7',
|
||||
address: '5'
|
||||
}, {
|
||||
date: '东北',
|
||||
name: '10',
|
||||
address: '5'
|
||||
}],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
drawRankTrend() {
|
||||
let myChart = echarts.init(document.querySelector('#rank-trend'))
|
||||
let option = {
|
||||
color: ['#4089BD', '#EBEF6A'],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(50,50,50,0)',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
borderWidth: 0
|
||||
},
|
||||
legend: {
|
||||
textStyle: { color: '#fff' }
|
||||
// data: ['Email', 'Video Ads']
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisLine: { show: false },
|
||||
axisTick: { show: false },
|
||||
boundaryGap: false,
|
||||
data: ['2020', '2021', '2022', '2023', '2024'],
|
||||
boundaryGap: true,
|
||||
axisLabel: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
inverse: true,
|
||||
name: '名次',
|
||||
nameLocation: 'start',
|
||||
nameTextStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
splitLine: { show: false },
|
||||
splitArea: {
|
||||
show: true,
|
||||
areaStyle: {
|
||||
color: ['rgba(250,250,250,0.05)', 'rgba(250,250,250,0.0)']
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '综合',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: [12, 13, 11, 13, 9]
|
||||
},
|
||||
|
||||
{
|
||||
name: '财经',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: [15, 23, 21, 15, 19]
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(option)
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.drawRankTrend();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.chart-container {
|
||||
width: 50%;
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
text-align: left;
|
||||
padding-top: 8px;
|
||||
height: 10%; //
|
||||
|
||||
.icon {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.chart {
|
||||
height: 90%; //
|
||||
|
||||
/deep/ .el-table td {
|
||||
color: white;
|
||||
border-bottom: 0px;
|
||||
background-color: #09437A !important;
|
||||
}
|
||||
|
||||
/deep/ tr {
|
||||
color: white;
|
||||
border-bottom: 0px;
|
||||
background-color: #09437A !important;
|
||||
}
|
||||
|
||||
/deep/ .el-table__row--striped td {
|
||||
color: white;
|
||||
border-bottom: 0px;
|
||||
background-color: #0C2B61 !important;
|
||||
}
|
||||
|
||||
/deep/ .el-table th {
|
||||
color: white;
|
||||
border-bottom: 0px !important;
|
||||
background-color: #0C2B61 !important;
|
||||
}
|
||||
|
||||
/deep/ .el-table--border::after {
|
||||
background: #0C2B61;
|
||||
}
|
||||
|
||||
/deep/ .el-table--group::after {
|
||||
background: #0C2B61;
|
||||
}
|
||||
|
||||
/deep/ .el-table::before {
|
||||
background: #0C2B61;
|
||||
}
|
||||
|
||||
/deep/ .el-table__empty-block {
|
||||
background: #0C2B61;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,8 +2,13 @@ import Vue from 'vue'
|
|||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import store from './store'
|
||||
|
||||
import dataV from '@jiaminghi/data-view'; //全局组件导入
|
||||
import ElementUI from 'element-ui';
|
||||
import 'element-ui/lib/theme-chalk/index.css';
|
||||
Vue.config.productionTip = false
|
||||
Vue.use(dataV);
|
||||
Vue.use(ElementUI);
|
||||
Vue.config.devtools = true;
|
||||
|
||||
new Vue({
|
||||
router,
|
||||
|
|
|
|||
|
|
@ -1,22 +1,30 @@
|
|||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
import HomeView from '../views/HomeView.vue'
|
||||
import ZhaoSheng from '../views/ZhaoSheng.vue'
|
||||
|
||||
Vue.use(VueRouter)
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
component: HomeView
|
||||
name: 'ZhaoSheng',
|
||||
component: ZhaoSheng
|
||||
},
|
||||
{
|
||||
path: '/about',
|
||||
name: 'about',
|
||||
path: '/peiyang',
|
||||
name: 'PeiYang',
|
||||
// route level code-splitting
|
||||
// this generates a separate chunk (about.[hash].js) for this route
|
||||
// which is lazy-loaded when the route is visited.
|
||||
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
|
||||
component: () => import(/* webpackChunkName: "about" */ '../views/PeiYang.vue')
|
||||
},
|
||||
{
|
||||
path: '/jiuye',
|
||||
name: 'JiuYe',
|
||||
// route level code-splitting
|
||||
// this generates a separate chunk (about.[hash].js) for this route
|
||||
// which is lazy-loaded when the route is visited.
|
||||
component: () => import(/* webpackChunkName: "about" */ '../views/JiuYe.vue')
|
||||
}
|
||||
]
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
<template>
|
||||
<div class="about">
|
||||
<h1>This is an about page</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<template>
|
||||
<div class="home">
|
||||
<img alt="Vue logo" src="../assets/logo.png">
|
||||
<HelloWorld msg="Welcome to Your Vue.js App"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import HelloWorld from '@/components/HelloWorld.vue'
|
||||
|
||||
export default {
|
||||
name: 'HomeView',
|
||||
components: {
|
||||
HelloWorld
|
||||
}
|
||||
}
|
||||
</script>
|
||||
483
src/views/JiuYe.vue
Normal file
483
src/views/JiuYe.vue
Normal file
|
|
@ -0,0 +1,483 @@
|
|||
<template>
|
||||
<div class="main">
|
||||
<!-- 第一块 -->
|
||||
<div class="box">
|
||||
<div class="box-header" style="">
|
||||
<span style=""></span>
|
||||
就业生情况
|
||||
</div>
|
||||
<div class=" box-body">
|
||||
<!-- 第一行 -->
|
||||
<div class="charts-row" style="height:300px">
|
||||
<!-- 两列 -->
|
||||
<!-- 第一列 学历分布-->
|
||||
<div class="chart-container" style="width: 50%;">
|
||||
<div class="chart-title">
|
||||
<img class="icon" src="../assets/icon.png" style="">
|
||||
学历分布
|
||||
</div>
|
||||
<!-- 3饼图 -->
|
||||
<div class="charts" style="height: 270px;display: flex;">
|
||||
<div style="flex:1">
|
||||
<dv-active-ring-chart :config="config1" style="height: 215px;" />
|
||||
<div style="font-size: 18px;text-align: center;">本科 <span style="color: bisque;">3789人</span> </div>
|
||||
</div>
|
||||
<div style="flex:1">
|
||||
<dv-active-ring-chart :config="config2" style="height: 215px;" />
|
||||
<div style="font-size: 18px;text-align: center;">硕士 <span style="color: bisque;">3289人</span> </div>
|
||||
</div>
|
||||
<div style="flex:1">
|
||||
<dv-active-ring-chart :config="config3" style="height: 215px;" />
|
||||
<div style="font-size: 18px;text-align: center;">博士 <span style="color: bisque;">1789人</span> </div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- 第二列 性别分布-->
|
||||
<div class="chart-container" style="height: 270px;width: 50%;">
|
||||
<div class="chart-title">
|
||||
<img class="icon" src="../assets/icon.png" style="">
|
||||
性别分布
|
||||
</div>
|
||||
<div class="charts" style="height: 270px;display: flex;">
|
||||
<div style="flex:1">
|
||||
<div style="height: 215px;" id="pie1"></div>
|
||||
<div style="font-size: 18px;text-align: center;"> <span style="color: bisque;">2.51:1</span> </div>
|
||||
</div>
|
||||
<div style="flex:1">
|
||||
<div style="height: 215px;" id="pie2"></div>
|
||||
<div style="font-size: 18px;text-align: center;"> <span style="color: bisque;">3.41:1</span> </div>
|
||||
</div>
|
||||
<div style="flex:1">
|
||||
<div style="height: 215px;" id="pie3"></div>
|
||||
<div style="font-size: 18px;text-align: center;"> <span style="color: bisque;">1.82:1</span> </div>
|
||||
</div>
|
||||
<div style="flex:1">
|
||||
<div style="height: 215px;" id="pie4"></div>
|
||||
<div style="font-size: 18px;text-align: center;"> <span style="color: bisque;">2.01:1</span> </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 第二行 -->
|
||||
<div class="charts-row" style="height:550px">
|
||||
<!-- 两列 -->
|
||||
<!-- 生源地分布 -->
|
||||
<ChinaMap></ChinaMap>
|
||||
<!-- 学院分布 -->
|
||||
<AcademyDistribution></AcademyDistribution>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="box-footer">
|
||||
<span style=""></span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 第二块 -->
|
||||
<div class="box">
|
||||
<div class="box-header">
|
||||
<span style=""></span>
|
||||
单位情况
|
||||
</div>
|
||||
<div class="box-body">
|
||||
<!-- 第一行 一列 课程概览 -->
|
||||
<div class="charts-row">
|
||||
</div>
|
||||
|
||||
<!-- 第二行 -->
|
||||
<div class="charts-row" style="">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-footer">
|
||||
<span style=""></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<div class="box-header">
|
||||
<span style=""></span>
|
||||
毕业去向分析
|
||||
</div>
|
||||
<div class="box-body">
|
||||
<!-- 第一行 一列 课程概览 -->
|
||||
<div class="charts-row">
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 第二行 -->
|
||||
<div class="charts-row" style="">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-footer">
|
||||
<span style=""></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import ChinaMap from '../components/zhaosheng/ChinaMap.vue';
|
||||
import EnrollmentPlan from '../components/zhaosheng/EnrollmentPlan.vue';
|
||||
import Trend from '../components/zhaosheng/Trend.vue';
|
||||
import ProvinceScore from '../components/zhaosheng/ProvinceScore.vue';
|
||||
import AcademyDistribution from '../components/jiuye/AcademyDistribution.vue';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ChinaMap,
|
||||
EnrollmentPlan,
|
||||
Trend,
|
||||
ProvinceScore,
|
||||
AcademyDistribution
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
config1: {
|
||||
data: [
|
||||
{
|
||||
name: '本科',
|
||||
value: 46
|
||||
},
|
||||
{
|
||||
name: '硕士',
|
||||
value: 36
|
||||
},
|
||||
{
|
||||
name: '博士',
|
||||
value: 18
|
||||
}
|
||||
],
|
||||
lineWidth: 15,
|
||||
color: ['#8DE9D8', '#D6D7BD', '#C192A5'],
|
||||
activeTimeGap: 30000
|
||||
},
|
||||
config2: {
|
||||
data: [
|
||||
{
|
||||
name: '硕士',
|
||||
value: 36
|
||||
},
|
||||
{
|
||||
name: '本科',
|
||||
value: 46
|
||||
},
|
||||
{
|
||||
name: '博士',
|
||||
value: 18
|
||||
}
|
||||
],
|
||||
lineWidth: 15,
|
||||
color: ['#D6D7BD', '#8DE9D8', '#C192A5'],
|
||||
activeTimeGap: 30000
|
||||
},
|
||||
config3: {
|
||||
data: [
|
||||
{
|
||||
name: '博士',
|
||||
value: 18
|
||||
},
|
||||
{
|
||||
name: '本科',
|
||||
value: 46
|
||||
},
|
||||
{
|
||||
name: '硕士',
|
||||
value: 36
|
||||
}
|
||||
|
||||
],
|
||||
lineWidth: 15,
|
||||
color: ['#C192A5', '#8DE9D8', '#D6D7BD',],
|
||||
activeTimeGap: 3000000
|
||||
},
|
||||
config4: {
|
||||
data: [
|
||||
{
|
||||
name: '博士',
|
||||
value: 18
|
||||
},
|
||||
{
|
||||
name: '本科',
|
||||
value: 46
|
||||
},
|
||||
{
|
||||
name: '硕士',
|
||||
value: 36
|
||||
}
|
||||
|
||||
],
|
||||
lineWidth: 15,
|
||||
color: ['#C192A5', '#8DE9D8', '#D6D7BD',],
|
||||
activeTimeGap: 3000000
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
drawFourPies() {
|
||||
let myChart1 = echarts.init(document.querySelector("#pie1"));
|
||||
let option1 = {
|
||||
color: ["#1386D6", "#D0ABC7"],
|
||||
title: {
|
||||
text: '综合',
|
||||
x: 'center',
|
||||
y: 'center',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
name: '男女比',
|
||||
type: 'pie',
|
||||
|
||||
radius: ['40%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 40,
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 2.51, name: '男' },
|
||||
{ value: 1, name: '女' }
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart1.setOption(option1);
|
||||
|
||||
let myChart2 = echarts.init(document.querySelector("#pie2"));
|
||||
let option2 = {
|
||||
color: ["#1386D6", "#D0ABC7"],
|
||||
title: {
|
||||
text: '本科',
|
||||
x: 'center',
|
||||
y: 'center',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
name: '男女比',
|
||||
type: 'pie',
|
||||
|
||||
radius: ['40%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 40,
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 3.41, name: '男' },
|
||||
{ value: 1, name: '女' }
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart2.setOption(option2);
|
||||
|
||||
let myChart3 = echarts.init(document.querySelector("#pie3"));
|
||||
let option3 = {
|
||||
color: ["#1386D6", "#D0ABC7"],
|
||||
title: {
|
||||
text: '本科',
|
||||
x: 'center',
|
||||
y: 'center',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
name: '男女比',
|
||||
type: 'pie',
|
||||
|
||||
radius: ['40%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 40,
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 1.82, name: '男' },
|
||||
{ value: 1, name: '女' }
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart3.setOption(option3);
|
||||
|
||||
let myChart4 = echarts.init(document.querySelector("#pie4"));
|
||||
let option4 = {
|
||||
color: ["#1386D6", "#D0ABC7"],
|
||||
title: {
|
||||
text: '本科',
|
||||
x: 'center',
|
||||
y: 'center',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
name: '男女比',
|
||||
type: 'pie',
|
||||
|
||||
radius: ['40%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 40,
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 2.01, name: '男' },
|
||||
{ value: 1, name: '女' }
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart4.setOption(option4);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.drawFourPies();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.main {
|
||||
width: 100%;
|
||||
height: 972px; //
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
|
||||
.box {
|
||||
flex: 0 1 32%;
|
||||
height: 920px; //
|
||||
background-color: #0C2B61;
|
||||
|
||||
.box-header {
|
||||
background-color: #18478F;
|
||||
text-align: center;
|
||||
height: 40px; //
|
||||
line-height: 40px;
|
||||
border: 1px solid rgb(40 110 216);
|
||||
|
||||
span {
|
||||
float: left;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 30px solid #1596ca;
|
||||
border-right: 30px solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.box-body {
|
||||
height: 850px; //
|
||||
|
||||
.charts-row {
|
||||
display: flex;
|
||||
height: 290px;
|
||||
|
||||
.chart-container {
|
||||
width: 50%;
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
text-align: left;
|
||||
height: 10%; //
|
||||
padding-top: 8px;
|
||||
|
||||
.icon {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.chart {
|
||||
height: 90%; //
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-footer {
|
||||
height: 30px;
|
||||
position: relative;
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-bottom: 25px solid #1596ca;
|
||||
border-left: 25px solid transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
241
src/views/PeiYang.vue
Normal file
241
src/views/PeiYang.vue
Normal file
|
|
@ -0,0 +1,241 @@
|
|||
<template>
|
||||
<div class="main">
|
||||
<!-- 第一块 -->
|
||||
<div class="box">
|
||||
<div class="box-header" style="">
|
||||
<span style=""></span>
|
||||
学生情况
|
||||
</div>
|
||||
<div class=" box-body">
|
||||
<!-- 第一行 -->
|
||||
<div class="charts-row" style="">
|
||||
<!-- 两列 -->
|
||||
<!-- 学生人数 -->
|
||||
<StudentNum></StudentNum>
|
||||
<!-- 性别分布 -->
|
||||
<GenderDistribute></GenderDistribute>
|
||||
</div>
|
||||
|
||||
<!-- 第二行 -->
|
||||
<div class="charts-row" style="">
|
||||
<!-- 两列 -->
|
||||
<!-- 年级分布 -->
|
||||
<GradeDistribution></GradeDistribution>
|
||||
<!-- 民族分布 -->
|
||||
<HabitatDistribute></HabitatDistribute>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 第三行 -->
|
||||
<div class="charts-row" style="">
|
||||
<!-- 两列 -->
|
||||
<!-- 学院分布 -->
|
||||
<AcademyDistribute></AcademyDistribute>
|
||||
<!-- 师生比 -->
|
||||
<TeacherStudent></TeacherStudent>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-footer">
|
||||
<span style=""></span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 第二块 -->
|
||||
<div class="box">
|
||||
<div class="box-header">
|
||||
<span style=""></span>
|
||||
课程情况
|
||||
</div>
|
||||
<div class="box-body">
|
||||
<!-- 第一行 一列 课程概览 -->
|
||||
<div class="charts-row">
|
||||
<Overall></Overall>
|
||||
</div>
|
||||
|
||||
<!-- 第二行 -->
|
||||
<div class="charts-row" style="">
|
||||
<!-- 两列 -->
|
||||
<!-- 本学期课程 -->
|
||||
<SemesterCourse></SemesterCourse>
|
||||
<!-- 今日课程 -->
|
||||
<div class="chart-container" style="padding-left: 20px;">
|
||||
<!-- <div class="chart-title">
|
||||
今日课程
|
||||
</div> -->
|
||||
|
||||
<div class="chart">
|
||||
<!-- 表格 -->
|
||||
<!-- <div style="width:50%;height:100%">
|
||||
<el-table :data="tableData" stripe style="width: 100%;">
|
||||
<el-table-column prop="date" label="分类" width="100">
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="人数" width="100">
|
||||
</el-table-column>
|
||||
<el-table-column prop="address" label="占比">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-footer">
|
||||
<span style=""></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<div class="box-header">
|
||||
<span style=""></span>
|
||||
学业情况
|
||||
</div>
|
||||
<div class="box-body">
|
||||
<!-- 第一行 一列 课程概览 -->
|
||||
<div class="charts-row">
|
||||
<div class="chart-container" style="width: 100%;">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第二行 -->
|
||||
<div class="charts-row" style="">
|
||||
<!-- 两列 -->
|
||||
<!-- 本学期课程 -->
|
||||
<div class="chart-container" style="padding-left: 20px;">
|
||||
</div>
|
||||
<!-- 今日课程 -->
|
||||
<div class="chart-container" style="padding-left: 20px;">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-footer">
|
||||
<span style=""></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import StudentNum from '../components/StudentNum.vue';
|
||||
import GenderDistribute from '../components/GenderDistribute.vue';
|
||||
import GradeDistribution from '../components/GradeDistribution.vue';
|
||||
import HabitatDistribute from '../components/HabitatDistribute.vue';
|
||||
import AcademyDistribute from '../components/AcademyDistribute.vue';
|
||||
import TeacherStudent from '../components/TeacherStudent.vue';
|
||||
import Overall from '../components/Overall.vue';
|
||||
import SemesterCourse from '../components/SemesterCourse.vue';
|
||||
|
||||
export default {
|
||||
name: 'HomeView',
|
||||
components: {
|
||||
StudentNum,
|
||||
GenderDistribute,
|
||||
GradeDistribution,
|
||||
HabitatDistribute,
|
||||
AcademyDistribute,
|
||||
TeacherStudent,
|
||||
Overall,
|
||||
SemesterCourse
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [{
|
||||
date: '本科生',
|
||||
name: '12000',
|
||||
address: '60%'
|
||||
}, {
|
||||
date: '硕士',
|
||||
name: '7000',
|
||||
address: '35%'
|
||||
}, {
|
||||
date: '博士',
|
||||
name: '1000',
|
||||
address: '5%'
|
||||
}],
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.main {
|
||||
width: 100%;
|
||||
height: 972px; //
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
|
||||
.box {
|
||||
flex: 0 1 32%;
|
||||
height: 920px; //
|
||||
background-color: #0C2B61;
|
||||
|
||||
.box-header {
|
||||
background-color: #18478F;
|
||||
text-align: center;
|
||||
height: 40px; //
|
||||
line-height: 40px;
|
||||
border: 1px solid rgb(40 110 216);
|
||||
|
||||
span {
|
||||
float: left;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 30px solid #1596ca;
|
||||
border-right: 30px solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.box-body {
|
||||
height: 850px; //
|
||||
|
||||
.charts-row {
|
||||
display: flex;
|
||||
height: 290px;
|
||||
|
||||
.chart-container {
|
||||
width: 50%;
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
text-align: left;
|
||||
height: 10%; //
|
||||
padding-top: 8px;
|
||||
|
||||
.icon {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.chart {
|
||||
height: 90%; //
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-footer {
|
||||
height: 30px;
|
||||
position: relative;
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-bottom: 25px solid #1596ca;
|
||||
border-left: 25px solid transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
164
src/views/ZhaoSheng.vue
Normal file
164
src/views/ZhaoSheng.vue
Normal file
|
|
@ -0,0 +1,164 @@
|
|||
<template>
|
||||
<div class="main">
|
||||
<!-- 第一块 -->
|
||||
<div class="box">
|
||||
<div class="box-header" style="">
|
||||
<span style=""></span>
|
||||
本科生招生
|
||||
</div>
|
||||
<div class=" box-body">
|
||||
<!-- 第一行 -->
|
||||
<div class="charts-row" style="height:300px">
|
||||
<!-- 两列 -->
|
||||
<!-- 第一列 招生计划-->
|
||||
<EnrollmentPlan></EnrollmentPlan>
|
||||
<!-- 第二列 招生趋势-->
|
||||
<Trend></Trend>
|
||||
</div>
|
||||
<!-- 第二行 -->
|
||||
<div class="charts-row" style="height:550px">
|
||||
<!-- 两列 -->
|
||||
<!-- 招生地图 -->
|
||||
<ChinaMap></ChinaMap>
|
||||
<!-- 各地区分数 -->
|
||||
<ProvinceScore></ProvinceScore>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-footer">
|
||||
<span style=""></span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 第二块 -->
|
||||
<div class="box">
|
||||
<div class="box-header">
|
||||
<span style=""></span>
|
||||
研究生招生
|
||||
</div>
|
||||
<div class="box-body">
|
||||
<!-- 第一行 一列 课程概览 -->
|
||||
<div class="charts-row">
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 第二行 -->
|
||||
<div class="charts-row" style="">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-footer">
|
||||
<span style=""></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import ChinaMap from '../components/zhaosheng/ChinaMap.vue';
|
||||
import EnrollmentPlan from '../components/zhaosheng/EnrollmentPlan.vue';
|
||||
import Trend from '../components/zhaosheng/Trend.vue';
|
||||
import ProvinceScore from '../components/zhaosheng/ProvinceScore.vue';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ChinaMap,
|
||||
EnrollmentPlan,
|
||||
Trend,
|
||||
ProvinceScore
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
let element = document.querySelector('.first-province')
|
||||
console.log('element', element);
|
||||
// element.focus();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.main {
|
||||
width: 100%;
|
||||
height: 972px; //
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
|
||||
.box {
|
||||
flex: 0 1 49%;
|
||||
height: 920px; //
|
||||
background-color: #0C2B61;
|
||||
|
||||
.box-header {
|
||||
background-color: #18478F;
|
||||
text-align: center;
|
||||
height: 40px; //
|
||||
line-height: 40px;
|
||||
border: 1px solid rgb(40 110 216);
|
||||
|
||||
span {
|
||||
float: left;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 30px solid #1596ca;
|
||||
border-right: 30px solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.box-body {
|
||||
height: 850px; //
|
||||
|
||||
.charts-row {
|
||||
display: flex;
|
||||
|
||||
.chart-container {
|
||||
width: 50%;
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
text-align: left;
|
||||
height: 30px; //
|
||||
padding-top: 8px;
|
||||
|
||||
.icon {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.chart {
|
||||
height: 90%; //
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.box-footer {
|
||||
height: 30px;
|
||||
position: relative;
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-bottom: 25px solid #1596ca;
|
||||
border-left: 25px solid transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user