增加迁徙图
This commit is contained in:
zouzhibing
parent
6cee2a2761
commit
e1d2c84723
|
|
@ -1 +0,0 @@
|
|||
.card-header{display:flex;justify-content:space-between;align-items:center}.text{font-size:14px}.item{margin-bottom:18px}.box-card{margin-bottom:10px;width:100%}
|
||||
|
|
@ -1 +0,0 @@
|
|||
.card-header{display:flex;justify-content:space-between;align-items:center}.text{font-size:14px}.item{margin-bottom:18px}.box-card{margin-bottom:10px;width:100%}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1 +0,0 @@
|
|||
.splitpanes{display:flex;width:100%;height:100%}.splitpanes--vertical{flex-direction:row}.splitpanes--horizontal{flex-direction:column}.splitpanes--dragging *{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.splitpanes__pane{width:100%;height:100%;overflow:hidden}.splitpanes--vertical .splitpanes__pane{transition:width .2s ease-out}.splitpanes--horizontal .splitpanes__pane{transition:height .2s ease-out}.splitpanes--dragging .splitpanes__pane{transition:none}.splitpanes__splitter{touch-action:none}.splitpanes--vertical>.splitpanes__splitter{min-width:1px;cursor:col-resize}.splitpanes--horizontal>.splitpanes__splitter{min-height:1px;cursor:row-resize}.splitpanes.default-theme .splitpanes__pane{background-color:#f2f2f2}.splitpanes.default-theme .splitpanes__splitter{background-color:#fff;box-sizing:border-box;position:relative;flex-shrink:0}.splitpanes.default-theme .splitpanes__splitter:after,.splitpanes.default-theme .splitpanes__splitter:before{content:"";position:absolute;top:50%;left:50%;background-color:rgba(0,0,0,.14901960784313725);transition:background-color .3s}.splitpanes.default-theme .splitpanes__splitter:hover:after,.splitpanes.default-theme .splitpanes__splitter:hover:before{background-color:rgba(0,0,0,.25098039215686274)}.splitpanes.default-theme .splitpanes__splitter:first-child{cursor:auto}.default-theme.splitpanes .splitpanes .splitpanes__splitter{z-index:1}.default-theme.splitpanes--vertical>.splitpanes__splitter,.default-theme .splitpanes--vertical>.splitpanes__splitter{width:7px;border-left:1px solid #eee;margin-left:-1px}.default-theme.splitpanes--vertical>.splitpanes__splitter:after,.default-theme .splitpanes--vertical>.splitpanes__splitter:after,.default-theme.splitpanes--vertical>.splitpanes__splitter:before,.default-theme .splitpanes--vertical>.splitpanes__splitter:before{transform:translateY(-50%);width:1px;height:30px}.default-theme.splitpanes--vertical>.splitpanes__splitter:before,.default-theme .splitpanes--vertical>.splitpanes__splitter:before{margin-left:-2px}.default-theme.splitpanes--vertical>.splitpanes__splitter:after,.default-theme .splitpanes--vertical>.splitpanes__splitter:after{margin-left:1px}.default-theme.splitpanes--horizontal>.splitpanes__splitter,.default-theme .splitpanes--horizontal>.splitpanes__splitter{height:7px;border-top:1px solid #eee;margin-top:-1px}.default-theme.splitpanes--horizontal>.splitpanes__splitter:after,.default-theme .splitpanes--horizontal>.splitpanes__splitter:after,.default-theme.splitpanes--horizontal>.splitpanes__splitter:before,.default-theme .splitpanes--horizontal>.splitpanes__splitter:before{transform:translate(-50%);width:30px;height:1px}.default-theme.splitpanes--horizontal>.splitpanes__splitter:before,.default-theme .splitpanes--horizontal>.splitpanes__splitter:before{margin-top:-2px}.default-theme.splitpanes--horizontal>.splitpanes__splitter:after,.default-theme .splitpanes--horizontal>.splitpanes__splitter:after{margin-top:1px}.splitpanes__pane[data-v-23371f36]{display:flex;justify-content:center;align-items:center;background:red;font-family:Helvetica,Arial,sans-serif;color:hsla(0,0%,100%,.6);font-size:5em}.left[data-v-23371f36]{background:#f38181}.item1[data-v-23371f36]{background:#fce38a}.item2[data-v-23371f36]{background:#95e1d3}.item3[data-v-23371f36]{background:#48efcd}.item4[data-v-23371f36]{background:#6aaa14}.item5[data-v-23371f36]{background:#48efcd}[data-v-23371f36] .splitpanes__splitter{min-height:6px;cursor:row-resize;background:#fff;min-width:6px}
|
||||
|
|
@ -1 +0,0 @@
|
|||
.infinite-list{height:300px;padding:0;margin:0;list-style:none}.infinite-list .infinite-list-item{display:flex;align-items:center;justify-content:center;height:50px;background:var(--el-color-primary-light-9);margin:10px;color:var(--el-color-primary)}.infinite-list .infinite-list-item+.list-item{margin-top:10px}
|
||||
|
|
@ -1 +0,0 @@
|
|||
.personal .name[data-v-8820c848]{margin-top:15px;font-size:24px;font-weight:500;color:#262626}.personal .description[data-v-8820c848]{margin-top:8px}.personal .list[data-v-8820c848]{margin-top:18px;line-height:30px;text-align:left}.card-header[data-v-8820c848]{display:flex;justify-content:space-between;align-items:center}.text[data-v-8820c848]{font-size:14px}.grid-content[data-v-8820c848]{display:flex}.grid-content .left[data-v-8820c848]{width:40%;height:100px;display:flex;align-items:center;justify-content:center;background:#2d8cf0}.grid-content .right[data-v-8820c848]{display:flex;flex-direction:column;padding-left:20px;justify-content:center}.custom[data-v-8820c848] .el-card__body{padding:0}.item[data-v-8820c848]{margin-bottom:18px}.box-card[data-v-8820c848]{margin-bottom:10px;width:100%}.card-item[data-v-8820c848]{background:linear-gradient(50deg,#1890ff,#77e19d)}
|
||||
|
|
@ -1 +0,0 @@
|
|||
[data-v-0561fd40] input{background:transparent;border:0;-webkit-appearance:none;border-radius:0;padding:12px 5px 12px 15px;color:#fff;height:47px;caret-color:#fff}.login-box[data-v-0561fd40]{width:80%;max-width:500px}.login-container[data-v-0561fd40]{min-height:100%;width:100%;overflow:hidden;background-size:cover;display:flex;justify-content:center;align-items:center}.login-container .bg[data-v-0561fd40],.login-container video[data-v-0561fd40]{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;z-index:-1}.login-container .login-box-content-right[data-v-0561fd40]{position:relative;display:inline-block;margin-left:10px;width:100%;height:370px;overflow:hidden}.login-container .login-box-content-right .login-form[data-v-0561fd40]{margin-top:20px}
|
||||
|
|
@ -1 +0,0 @@
|
|||
.list-group-item[data-v-5e463059]{position:relative;width:100px;margin-right:10px;margin-bottom:10px;display:flex;align-items:center;justify-content:center;min-height:100px;padding:.75rem 1.25rem;background-color:#fff;color:#fff;font-weight:500;font-size:24px;border:1px solid rgba(0,0,0,.125)}.button[data-v-5e463059]{margin-top:35px}.flip-list-move[data-v-5e463059]{transition:transform .5s}.no-move[data-v-5e463059]{transition:transform 0s}.ghost[data-v-5e463059]{opacity:.5;background:#c8ebfb}.list-group[data-v-5e463059]{display:flex;-webkit-box-orient:vertical;padding-left:0;flex-wrap:wrap;margin-bottom:0;border-radius:.25rem}.list-group-item[data-v-5e463059]{cursor:move}.list-group-item i[data-v-5e463059]{cursor:pointer}
|
||||
|
|
@ -1 +0,0 @@
|
|||
.card-header{display:flex;justify-content:space-between;align-items:center}.text{font-size:14px}.item{margin-bottom:18px}.box-card{width:100%}
|
||||
|
|
@ -1 +0,0 @@
|
|||
.vue-cropper[data-v-be5e5ddc]{position:relative;width:100%;height:100%;box-sizing:border-box;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;direction:ltr;touch-action:none;text-align:left;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC)}.cropper-box-canvas[data-v-be5e5ddc],.cropper-box[data-v-be5e5ddc],.cropper-crop-box[data-v-be5e5ddc],.cropper-drag-box[data-v-be5e5ddc],.cropper-face[data-v-be5e5ddc]{position:absolute;top:0;right:0;bottom:0;left:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cropper-box-canvas img[data-v-be5e5ddc]{position:relative;text-align:left;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transform:none;max-width:none;max-height:none}.cropper-box[data-v-be5e5ddc]{overflow:hidden}.cropper-move[data-v-be5e5ddc]{cursor:move}.cropper-crop[data-v-be5e5ddc]{cursor:crosshair}.cropper-modal[data-v-be5e5ddc]{background:rgba(0,0,0,.5)}.cropper-view-box[data-v-be5e5ddc]{display:block;overflow:hidden;width:100%;height:100%;outline:1px solid #39f;outline-color:rgba(51,153,255,.7490196078431373)}.cropper-view-box[data-v-be5e5ddc],.cropper-view-box img[data-v-be5e5ddc]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cropper-view-box img[data-v-be5e5ddc]{text-align:left;max-width:none;max-height:none}.cropper-face[data-v-be5e5ddc]{top:0;left:0;background-color:#fff;opacity:.1}.crop-info[data-v-be5e5ddc]{position:absolute;left:0;min-width:65px;text-align:center;color:#fff;line-height:20px;background-color:rgba(0,0,0,.8);font-size:12px}.crop-line[data-v-be5e5ddc]{position:absolute;display:block;width:100%;height:100%;opacity:.1}.line-w[data-v-be5e5ddc]{top:-3px;left:0;height:5px;cursor:n-resize}.line-a[data-v-be5e5ddc]{top:0;left:-3px;width:5px;cursor:w-resize}.line-s[data-v-be5e5ddc]{bottom:-3px;left:0;height:5px;cursor:s-resize}.line-d[data-v-be5e5ddc]{top:0;right:-3px;width:5px;cursor:e-resize}.crop-point[data-v-be5e5ddc]{position:absolute;width:8px;height:8px;opacity:.75;background-color:#39f;border-radius:100%}.point1[data-v-be5e5ddc]{top:-4px;left:-4px;cursor:nw-resize}.point2[data-v-be5e5ddc]{top:-5px;left:50%;margin-left:-3px;cursor:n-resize}.point3[data-v-be5e5ddc]{top:-4px;right:-4px;cursor:ne-resize}.point4[data-v-be5e5ddc]{top:50%;left:-4px;margin-top:-3px;cursor:w-resize}.point5[data-v-be5e5ddc]{top:50%;right:-4px;margin-top:-3px;cursor:e-resize}.point6[data-v-be5e5ddc]{bottom:-5px;left:-4px;cursor:sw-resize}.point7[data-v-be5e5ddc]{bottom:-5px;left:50%;margin-left:-3px;cursor:s-resize}.point8[data-v-be5e5ddc]{bottom:-5px;right:-4px;cursor:se-resize}@media screen and (max-width:500px){.crop-point[data-v-be5e5ddc]{position:absolute;width:20px;height:20px;opacity:.45;background-color:#39f;border-radius:100%}.point1[data-v-be5e5ddc]{top:-10px;left:-10px}.point2[data-v-be5e5ddc],.point4[data-v-be5e5ddc],.point5[data-v-be5e5ddc],.point7[data-v-be5e5ddc]{display:none}.point3[data-v-be5e5ddc]{top:-10px;right:-10px}.point4[data-v-be5e5ddc]{top:0;left:0}.point6[data-v-be5e5ddc]{bottom:-10px;left:-10px}.point8[data-v-be5e5ddc]{bottom:-10px;right:-10px}}.cropper-content[data-v-f55339cc]{display:flex;width:400px;height:400px;text-align:center}[data-v-f55339cc] .el-button{margin-top:15px}.m-cropper[data-v-f55339cc]{width:100%;height:500px;display:flex}.m-cropper .left[data-v-f55339cc]{width:400px;margin-right:30px}.m-cropper .preview[data-v-f55339cc]{width:200px;height:200px;margin-top:20px;overflow:hidden}
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 255 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 100 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB |
|
|
@ -1 +0,0 @@
|
|||
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>admin3</title><link href="css/chunk-026f8934.203a047d.css" rel="prefetch"><link href="css/chunk-0d19964f.203a047d.css" rel="prefetch"><link href="css/chunk-15e30221.b8a19145.css" rel="prefetch"><link href="css/chunk-378ee166.ca18b920.css" rel="prefetch"><link href="css/chunk-3baa9536.e5ad81d1.css" rel="prefetch"><link href="css/chunk-3cf5ae64.e2f29e2b.css" rel="prefetch"><link href="css/chunk-46f3cdc3.c96f8308.css" rel="prefetch"><link href="css/chunk-762e73e2.68e4d222.css" rel="prefetch"><link href="css/chunk-a691402a.aa1a879f.css" rel="prefetch"><link href="css/chunk-a6bcb2cc.a3651a4e.css" rel="prefetch"><link href="css/chunk-c535df16.2dff8b36.css" rel="prefetch"><link href="js/chunk-026f8934.5cb461a9.js" rel="prefetch"><link href="js/chunk-0375f012.576712c3.js" rel="prefetch"><link href="js/chunk-0d19964f.06ad7856.js" rel="prefetch"><link href="js/chunk-15e30221.26ec0b0d.js" rel="prefetch"><link href="js/chunk-2b54affe.416b987b.js" rel="prefetch"><link href="js/chunk-2d0b9232.d108bca7.js" rel="prefetch"><link href="js/chunk-2d217928.2d8e8acc.js" rel="prefetch"><link href="js/chunk-378ee166.5f385493.js" rel="prefetch"><link href="js/chunk-3baa9536.ead11f6c.js" rel="prefetch"><link href="js/chunk-3cf5ae64.17c7eef9.js" rel="prefetch"><link href="js/chunk-46f3cdc3.4a9551b2.js" rel="prefetch"><link href="js/chunk-496def4a.163ff0dc.js" rel="prefetch"><link href="js/chunk-762e73e2.ff112cc7.js" rel="prefetch"><link href="js/chunk-a691402a.b7df4ead.js" rel="prefetch"><link href="js/chunk-a6bcb2cc.af5fd410.js" rel="prefetch"><link href="js/chunk-c535df16.83234e09.js" rel="prefetch"><link href="css/app.949e57f1.css" rel="preload" as="style"><link href="css/chunk-vendors.9660a410.css" rel="preload" as="style"><link href="js/app.c0999e29.js" rel="preload" as="script"><link href="js/chunk-vendors.1680c7ad.js" rel="preload" as="script"><link href="css/chunk-vendors.9660a410.css" rel="stylesheet"><link href="css/app.949e57f1.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but admin3 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="js/chunk-vendors.1680c7ad.js"></script><script src="js/app.c0999e29.js"></script></body></html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +0,0 @@
|
|||
(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d0b9232"],{3252:function(e,t,n){"use strict";n.r(t);var o=n("1da1"),r=(n("96cf"),n("7a23")),c=n("5502"),a={class:"m-permission-page"},u={style:{"margin-bottom":"20px"}},i=Object(r["defineComponent"])({setup:function(e){var t=Object(c["b"])(),n=Object(r["computed"])({get:function(){return t.getters.roles[0]},set:function(e){Object(o["a"])(regeneratorRuntime.mark((function n(){return regeneratorRuntime.wrap((function(n){while(1)switch(n.prev=n.next){case 0:return n.next=2,t.dispatch("user/getInfo",[e]);case 2:location.reload();case 3:case"end":return n.stop()}}),n)})))()}});return function(e,o){var c=Object(r["resolveComponent"])("el-radio-button"),i=Object(r["resolveComponent"])("el-radio-group");return Object(r["openBlock"])(),Object(r["createElementBlock"])("div",a,[Object(r["createElementVNode"])("div",u," 权限列表"+Object(r["toDisplayString"])(Object(r["unref"])(t).getters.roles),1),Object(r["createVNode"])(i,{modelValue:Object(r["unref"])(n),"onUpdate:modelValue":o[0]||(o[0]=function(e){return Object(r["isRef"])(n)?n.value=e:null})},{default:Object(r["withCtx"])((function(){return[Object(r["createVNode"])(c,{label:"other"}),Object(r["createVNode"])(c,{label:"admin"})]})),_:1},8,["modelValue"])])}}});const l=i;t["default"]=l}}]);
|
||||
//# sourceMappingURL=chunk-2d0b9232.d108bca7.js.map
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"sources":["webpack:///./src/views/permission/page.vue?4c1f","webpack:///./src/views/permission/page.vue"],"names":["_hoisted_1","class","_hoisted_2","style","_defineComponent","setup","__props","store","useStore","switchRoles","computed","get","getters","roles","set","val","dispatch","location","reload","_ctx","_cache","_component_el_radio_button","_resolveComponent","_component_el_radio_group","_openBlock","_createElementBlock","_createElementVNode","_toDisplayString","_unref","_createVNode","modelValue","$event","_isRef","value","default","_withCtx","label","_","__exports__"],"mappings":"2KAGMA,EAAa,CAAEC,MAAO,qBACtBC,EAAa,CAAEC,MAAO,CAAC,gBAAgB,SAKjBC,+BAAiB,CAC3CC,MAD2C,SACrCC,GAEN,IAAMC,EAAQC,iBAERC,EAAcC,sBAAS,CAC3BC,IAD2B,WAEzB,OAAOJ,EAAMK,QAAQC,MAAM,IAE7BC,IAJ2B,SAIvBC,GACF,wCAAC,8GACOR,EAAMS,SAAS,eAAe,CAACD,IADtC,OAECE,SAASC,SAFV,0CAAD,MAON,OAAO,SAACC,EAAUC,GAChB,IAAMC,EAA6BC,8BAAkB,mBAC/CC,EAA4BD,8BAAkB,kBAEpD,OAAQE,yBAAcC,gCAAoB,MAAOzB,EAAY,CAC3D0B,gCAAoB,MAAOxB,EAAY,QAAUyB,6BAAiBC,mBAAOrB,GAAOK,QAAQC,OAAQ,GAChGgB,yBAAaN,EAA2B,CACtCO,WAAYF,mBAAOnB,GACnB,sBAAuBW,EAAO,KAAOA,EAAO,GAAK,SAACW,GAAD,OAAkBC,mBAAOvB,GAAgBA,EAAawB,MAAQF,EAAS,QACvH,CACDG,QAASC,sBAAS,iBAAM,CACtBN,yBAAaR,EAA4B,CAAEe,MAAO,UAClDP,yBAAaR,EAA4B,CAAEe,MAAO,cAEpDC,EAAG,GACF,EAAG,CAAC,qBCtCX,MAAMC,EAAc,EAEL","file":"js/chunk-2d0b9232.d108bca7.js","sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { unref as _unref, toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, isRef as _isRef, withCtx as _withCtx, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nconst _hoisted_1 = { class: \"m-permission-page\" }\nconst _hoisted_2 = { style: {\"margin-bottom\":\"20px\"} }\n\nimport {computed, ref} from \"vue\";\r\n import {useStore} from \"vuex\"\r\n \nexport default /*#__PURE__*/_defineComponent({\n setup(__props) {\n\r\n const store = useStore()\r\n\r\n const switchRoles = computed({\r\n get(){\r\n return store.getters.roles[0]\r\n },\r\n set(val){\r\n (async ()=>{\r\n await store.dispatch(\"user/getInfo\",[val])\r\n location.reload()\r\n })()\r\n }\r\n })\r\n\nreturn (_ctx: any,_cache: any) => {\n const _component_el_radio_button = _resolveComponent(\"el-radio-button\")!\n const _component_el_radio_group = _resolveComponent(\"el-radio-group\")!\n\n return (_openBlock(), _createElementBlock(\"div\", _hoisted_1, [\n _createElementVNode(\"div\", _hoisted_2, \" 权限列表\" + _toDisplayString(_unref(store).getters.roles), 1),\n _createVNode(_component_el_radio_group, {\n modelValue: _unref(switchRoles),\n \"onUpdate:modelValue\": _cache[0] || (_cache[0] = ($event: any) => (_isRef(switchRoles) ? (switchRoles).value = $event : null))\n }, {\n default: _withCtx(() => [\n _createVNode(_component_el_radio_button, { label: \"other\" }),\n _createVNode(_component_el_radio_button, { label: \"admin\" })\n ]),\n _: 1\n }, 8, [\"modelValue\"])\n ]))\n}\n}\n\n})","import script from \"./page.vue?vue&type=script&lang=ts&setup=true\"\nexport * from \"./page.vue?vue&type=script&lang=ts&setup=true\"\n\nconst __exports__ = script;\n\nexport default __exports__"],"sourceRoot":""}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +0,0 @@
|
|||
(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-3cf5ae64"],{"590d":function(e,t,c){"use strict";c("b3d1")},"99de":function(e,t,c){"use strict";c.r(t);var n=c("7a23"),i={class:"infinite-list",style:{overflow:"auto"}},o={key:0,style:{height:"50px",width:"100%",display:"flex","align-items":"center","justify-content":"center"}},l=Object(n["defineComponent"])({setup:function(e){var t=Object(n["ref"])(0),c=Object(n["ref"])(!0),l=function(){t.value+=3};return function(e,r){var s=Object(n["resolveDirective"])("infinite-scroll");return Object(n["withDirectives"])((Object(n["openBlock"])(),Object(n["createElementBlock"])("ul",i,[(Object(n["openBlock"])(!0),Object(n["createElementBlock"])(n["Fragment"],null,Object(n["renderList"])(t.value,(function(e){return Object(n["openBlock"])(),Object(n["createElementBlock"])("li",{key:e,class:"infinite-list-item"},Object(n["toDisplayString"])(e),1)})),128)),c.value?(Object(n["openBlock"])(),Object(n["createElementBlock"])("div",o,"正在加载中...")):Object(n["createCommentVNode"])("",!0)])),[[s,l]])}}});c("590d");const r=l;t["default"]=r},b3d1:function(e,t,c){}}]);
|
||||
//# sourceMappingURL=chunk-3cf5ae64.17c7eef9.js.map
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"sources":["webpack:///./src/views/components-demo/scroll.vue?1818","webpack:///./src/views/components-demo/scroll.vue?c7d1","webpack:///./src/views/components-demo/scroll.vue"],"names":["_hoisted_1","class","style","_hoisted_2","key","_defineComponent","setup","__props","count","ref","isLoading","load","value","_ctx","_cache","_directive_infinite_scroll","_resolveDirective","_withDirectives","_openBlock","_createElementBlock","_Fragment","_renderList","i","_toDisplayString","_createCommentVNode","__exports__"],"mappings":"kHAAA,W,2DCGMA,EAAa,CACjBC,MAAO,gBACPC,MAAO,CAAC,SAAW,SAEfC,EAAa,CACjBC,IAAK,EACLF,MAAO,CAAC,OAAS,OAAO,MAAQ,OAAO,QAAU,OAAO,cAAc,SAAS,kBAAkB,WAKvEG,+BAAiB,CAC3CC,MAD2C,SACrCC,GAEN,IAAMC,EAAQC,iBAAI,GACZC,EAAYD,kBAAI,GAChBE,EAAO,WACXH,EAAMI,OAAS,GAGnB,OAAO,SAACC,EAAUC,GAChB,IAAMC,EAA6BC,8BAAkB,mBAErD,OAAOC,6BAAiBC,yBAAcC,gCAAoB,KAAMnB,EAAY,EACzEkB,wBAAW,GAAOC,gCAAoBC,cAAW,KAAMC,wBAAYb,EAAMI,OAAO,SAACU,GAChF,OAAQJ,yBAAcC,gCAAoB,KAAM,CAC9Cf,IAAKkB,EACLrB,MAAO,sBACNsB,6BAAiBD,GAAI,MACtB,MACHZ,EAAUE,OACNM,yBAAcC,gCAAoB,MAAOhB,EAAY,aACtDqB,gCAAoB,IAAI,MACzB,CACH,CAACT,EAA4BJ,S,UChCjC,MAAMc,EAAc,EAEL,gB","file":"js/chunk-3cf5ae64.17c7eef9.js","sourcesContent":["export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--7-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!../../../node_modules/vue-loader-v16/dist/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--7-oneOf-1-2!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader-v16/dist/index.js??ref--1-1!./scroll.vue?vue&type=style&index=0&id=3778e8f5&lang=css\"","import { defineComponent as _defineComponent } from 'vue'\nimport { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, createCommentVNode as _createCommentVNode, resolveDirective as _resolveDirective, withDirectives as _withDirectives } from \"vue\"\n\nconst _hoisted_1 = {\n class: \"infinite-list\",\n style: {\"overflow\":\"auto\"}\n}\nconst _hoisted_2 = {\n key: 0,\n style: {\"height\":\"50px\",\"width\":\"100%\",\"display\":\"flex\",\"align-items\":\"center\",\"justify-content\":\"center\"}\n}\n\nimport { ref } from 'vue'\r\n \nexport default /*#__PURE__*/_defineComponent({\n setup(__props) {\n\r\n const count = ref(0)\r\n const isLoading = ref(true)\r\n const load = () => {\r\n count.value += 3\r\n }\r\n\nreturn (_ctx: any,_cache: any) => {\n const _directive_infinite_scroll = _resolveDirective(\"infinite-scroll\")!\n\n return _withDirectives((_openBlock(), _createElementBlock(\"ul\", _hoisted_1, [\n (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(count.value, (i) => {\n return (_openBlock(), _createElementBlock(\"li\", {\n key: i,\n class: \"infinite-list-item\"\n }, _toDisplayString(i), 1))\n }), 128)),\n (isLoading.value)\n ? (_openBlock(), _createElementBlock(\"div\", _hoisted_2, \"正在加载中...\"))\n : _createCommentVNode(\"\", true)\n ])), [\n [_directive_infinite_scroll, load]\n ])\n}\n}\n\n})","import script from \"./scroll.vue?vue&type=script&lang=ts&setup=true\"\nexport * from \"./scroll.vue?vue&type=script&lang=ts&setup=true\"\n\nimport \"./scroll.vue?vue&type=style&index=0&id=3778e8f5&lang=css\"\n\nconst __exports__ = script;\n\nexport default __exports__"],"sourceRoot":""}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,54 +0,0 @@
|
|||
(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-496def4a"],{"35b9":function(e,t,n){"use strict";n.r(t);var r=n("7a23"),o=n("add5"),i=n.n(o),a=n("7088"),l=n.n(a),s=Object(r["createTextVNode"])("打印图片"),d=Object(r["createTextVNode"])("打印表格"),c={style:{"margin-top":"20px"}},u=["src"],f=Object(r["defineComponent"])({setup:function(e){var t=[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}],n=function(e){switch(e){case 1:i()({type:"image",printable:l.a,documentTitle:"打印图片"});break;case 2:i()({type:"json",documentTitle:"打印表格",printable:t,gridStyle:"text-align: center;border: 1px solid lightgray;font-size: 12px;",properties:[{field:"date",displayName:"日期"},{field:"name",displayName:"名字"},{field:"address",displayName:"地址"}]});break;case 3:break}};return function(e,o){var i=Object(r["resolveComponent"])("el-button"),a=Object(r["resolveComponent"])("el-table-column"),f=Object(r["resolveComponent"])("el-table");return Object(r["openBlock"])(),Object(r["createElementBlock"])(r["Fragment"],null,[Object(r["createElementVNode"])("div",null,[Object(r["createVNode"])(i,{type:"primary",onClick:o[0]||(o[0]=function(e){return n(1)})},{default:Object(r["withCtx"])((function(){return[s]})),_:1}),Object(r["createVNode"])(i,{type:"primary",onClick:o[1]||(o[1]=function(e){return n(2)})},{default:Object(r["withCtx"])((function(){return[d]})),_:1})]),Object(r["createElementVNode"])("div",c,[Object(r["createElementVNode"])("img",{src:Object(r["unref"])(l.a),style:{width:"50%"}},null,8,u)]),Object(r["createElementVNode"])("div",null,[Object(r["createVNode"])(f,{data:t,style:{width:"100%"}},{default:Object(r["withCtx"])((function(){return[Object(r["createVNode"])(a,{prop:"date",label:"日期",width:"180"}),Object(r["createVNode"])(a,{prop:"name",label:"名字",width:"180"}),Object(r["createVNode"])(a,{prop:"address",label:"地址"})]})),_:1})])],64)}}});const p=f;t["default"]=p},7088:function(e,t,n){e.exports=n.p+"img/im1.49b72446.jpeg"},add5:function(e,t,n){(function(t,n){e.exports=n()})(window,(function(){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}({"./src/index.js":
|
||||
/*!**********************!*\
|
||||
!*** ./src/index.js ***!
|
||||
\**********************/
|
||||
/*! exports provided: default */function(e,t,n){"use strict";n.r(t);n(/*! ./sass/index.scss */"./src/sass/index.scss");var r=n(/*! ./js/init */"./src/js/init.js"),o=r["default"].init;"undefined"!==typeof window&&(window.printJS=o),t["default"]=o},"./src/js/browser.js":
|
||||
/*!***************************!*\
|
||||
!*** ./src/js/browser.js ***!
|
||||
\***************************/
|
||||
/*! exports provided: default */function(e,t,n){"use strict";n.r(t);var r={isFirefox:function(){return"undefined"!==typeof InstallTrigger},isIE:function(){return-1!==navigator.userAgent.indexOf("MSIE")||!!document.documentMode},isEdge:function(){return!r.isIE()&&!!window.StyleMedia},isChrome:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:window;return!!e.chrome},isSafari:function(){return Object.prototype.toString.call(window.HTMLElement).indexOf("Constructor")>0||-1!==navigator.userAgent.toLowerCase().indexOf("safari")},isIOSChrome:function(){return-1!==navigator.userAgent.toLowerCase().indexOf("crios")}};t["default"]=r},"./src/js/functions.js":
|
||||
/*!*****************************!*\
|
||||
!*** ./src/js/functions.js ***!
|
||||
\*****************************/
|
||||
/*! exports provided: addWrapper, capitalizePrint, collectStyles, addHeader, cleanUp, isRawHTML */function(e,t,n){"use strict";n.r(t),n.d(t,"addWrapper",(function(){return a})),n.d(t,"capitalizePrint",(function(){return l})),n.d(t,"collectStyles",(function(){return s})),n.d(t,"addHeader",(function(){return c})),n.d(t,"cleanUp",(function(){return u})),n.d(t,"isRawHTML",(function(){return f}));var r=n(/*! ./modal */"./src/js/modal.js"),o=n(/*! ./browser */"./src/js/browser.js");function i(e){return i="function"===typeof Symbol&&"symbol"===typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"===typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},i(e)}function a(e,t){var n="font-family:"+t.font+" !important; font-size: "+t.font_size+" !important; width:100%;";return'<div style="'+n+'">'+e+"</div>"}function l(e){return e.charAt(0).toUpperCase()+e.slice(1)}function s(e,t){for(var n=document.defaultView||window,r="",o=n.getComputedStyle(e,""),i=0;i<o.length;i++)(-1!==t.targetStyles.indexOf("*")||-1!==t.targetStyle.indexOf(o[i])||d(t.targetStyles,o[i]))&&o.getPropertyValue(o[i])&&(r+=o[i]+":"+o.getPropertyValue(o[i])+";");return r+="max-width: "+t.maxWidth+"px !important; font-size: "+t.font_size+" !important;",r}function d(e,t){for(var n=0;n<e.length;n++)if("object"===i(t)&&-1!==t.indexOf(e[n]))return!0;return!1}function c(e,t){var n=document.createElement("div");if(f(t.header))n.innerHTML=t.header;else{var r=document.createElement("h1"),o=document.createTextNode(t.header);r.appendChild(o),r.setAttribute("style",t.headerStyle),n.appendChild(r)}e.insertBefore(n,e.childNodes[0])}function u(e){e.showModal&&r["default"].close(),e.onLoadingEnd&&e.onLoadingEnd(),(e.showModal||e.onLoadingStart)&&window.URL.revokeObjectURL(e.printable);var t="mouseover";(o["default"].isChrome()||o["default"].isFirefox())&&(t="focus");var n=function n(){window.removeEventListener(t,n),e.onPrintDialogClose();var r=document.getElementById(e.frameId);r&&r.remove()};window.addEventListener(t,n)}function f(e){var t=new RegExp("<([A-Za-z][A-Za-z0-9]*)\\b[^>]*>(.*?)</\\1>");return t.test(e)}},"./src/js/html.js":
|
||||
/*!************************!*\
|
||||
!*** ./src/js/html.js ***!
|
||||
\************************/
|
||||
/*! exports provided: default */function(e,t,n){"use strict";n.r(t);var r=n(/*! ./functions */"./src/js/functions.js"),o=n(/*! ./print */"./src/js/print.js");function i(e){return i="function"===typeof Symbol&&"symbol"===typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"===typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},i(e)}function a(e,t){for(var n=e.cloneNode(),o=Array.prototype.slice.call(e.childNodes),i=0;i<o.length;i++)if(-1===t.ignoreElements.indexOf(o[i].id)){var l=a(o[i],t);n.appendChild(l)}switch(t.scanStyles&&1===e.nodeType&&n.setAttribute("style",Object(r["collectStyles"])(e,t)),e.tagName){case"SELECT":n.value=e.value;break;case"CANVAS":n.getContext("2d").drawImage(e,0,0);break}return n}function l(e){return"object"===i(e)&&e&&(e instanceof HTMLElement||1===e.nodeType)}t["default"]={print:function(e,t){var n=l(e.printable)?e.printable:document.getElementById(e.printable);n?(e.printableElement=a(n,e),e.header&&Object(r["addHeader"])(e.printableElement,e),o["default"].send(e,t)):window.console.error("Invalid HTML element id: "+e.printable)}}},"./src/js/image.js":
|
||||
/*!*************************!*\
|
||||
!*** ./src/js/image.js ***!
|
||||
\*************************/
|
||||
/*! exports provided: default */function(e,t,n){"use strict";n.r(t);var r=n(/*! ./functions */"./src/js/functions.js"),o=n(/*! ./print */"./src/js/print.js"),i=n(/*! ./browser */"./src/js/browser.js");t["default"]={print:function(e,t){e.printable.constructor!==Array&&(e.printable=[e.printable]),e.printableElement=document.createElement("div"),e.printable.forEach((function(t){var n=document.createElement("img");if(n.setAttribute("style",e.imageStyle),n.src=t,i["default"].isFirefox()){var r=n.src;n.src=r}var o=document.createElement("div");o.appendChild(n),e.printableElement.appendChild(o)})),e.header&&Object(r["addHeader"])(e.printableElement,e),o["default"].send(e,t)}}},"./src/js/init.js":
|
||||
/*!************************!*\
|
||||
!*** ./src/js/init.js ***!
|
||||
\************************/
|
||||
/*! exports provided: default */function(e,t,n){"use strict";n.r(t);var r=n(/*! ./browser */"./src/js/browser.js"),o=n(/*! ./modal */"./src/js/modal.js"),i=n(/*! ./pdf */"./src/js/pdf.js"),a=n(/*! ./html */"./src/js/html.js"),l=n(/*! ./raw-html */"./src/js/raw-html.js"),s=n(/*! ./image */"./src/js/image.js"),d=n(/*! ./json */"./src/js/json.js");function c(e){return c="function"===typeof Symbol&&"symbol"===typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"===typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},c(e)}var u=["pdf","html","image","json","raw-html"];t["default"]={init:function(){var e={printable:null,fallbackPrintable:null,type:"pdf",header:null,headerStyle:"font-weight: 300;",maxWidth:800,properties:null,gridHeaderStyle:"font-weight: bold; padding: 5px; border: 1px solid #dddddd;",gridStyle:"border: 1px solid lightgray; margin-bottom: -1px;",showModal:!1,onError:function(e){throw e},onLoadingStart:null,onLoadingEnd:null,onPrintDialogClose:function(){},onIncompatibleBrowser:function(){},modalMessage:"Retrieving Document...",frameId:"printJS",printableElement:null,documentTitle:"Document",targetStyle:["clear","display","width","min-width","height","min-height","max-height"],targetStyles:["border","box","break","text-decoration"],ignoreElements:[],repeatTableHeader:!0,css:null,style:null,scanStyles:!0,base64:!1,onPdfOpen:null,font:"TimesNewRoman",font_size:"12pt",honorMarginPadding:!0,honorColor:!1,imageStyle:"max-width: 100%;"},t=arguments[0];if(void 0===t)throw new Error("printJS expects at least 1 attribute.");switch(c(t)){case"string":e.printable=encodeURI(t),e.fallbackPrintable=e.printable,e.type=arguments[1]||e.type;break;case"object":for(var n in e.printable=t.printable,e.fallbackPrintable="undefined"!==typeof t.fallbackPrintable?t.fallbackPrintable:e.printable,e.fallbackPrintable=e.base64?"data:application/pdf;base64,".concat(e.fallbackPrintable):e.fallbackPrintable,e)"printable"!==n&&"fallbackPrintable"!==n&&(e[n]="undefined"!==typeof t[n]?t[n]:e[n]);break;default:throw new Error('Unexpected argument type! Expected "string" or "object", got '+c(t))}if(!e.printable)throw new Error("Missing printable information.");if(!e.type||"string"!==typeof e.type||-1===u.indexOf(e.type.toLowerCase()))throw new Error("Invalid print type. Available types are: pdf, html, image and json.");e.showModal&&o["default"].show(e),e.onLoadingStart&&e.onLoadingStart();var f=document.getElementById(e.frameId);f&&f.parentNode.removeChild(f);var p=document.createElement("iframe");switch(r["default"].isFirefox()?p.setAttribute("style","width: 1px; height: 100px; position: fixed; left: 0; top: 0; opacity: 0; border-width: 0; margin: 0; padding: 0"):p.setAttribute("style","visibility: hidden; height: 0; width: 0; position: absolute; border: 0"),p.setAttribute("id",e.frameId),"pdf"!==e.type&&(p.srcdoc="<html><head><title>"+e.documentTitle+"</title>",e.css&&(Array.isArray(e.css)||(e.css=[e.css]),e.css.forEach((function(e){p.srcdoc+='<link rel="stylesheet" href="'+e+'">'}))),p.srcdoc+="</head><body></body></html>"),e.type){case"pdf":if(r["default"].isIE())try{console.info("Print.js doesn't support PDF printing in Internet Explorer.");var b=window.open(e.fallbackPrintable,"_blank");b.focus(),e.onIncompatibleBrowser()}catch(m){e.onError(m)}finally{e.showModal&&o["default"].close(),e.onLoadingEnd&&e.onLoadingEnd()}else i["default"].print(e,p);break;case"image":s["default"].print(e,p);break;case"html":a["default"].print(e,p);break;case"raw-html":l["default"].print(e,p);break;case"json":d["default"].print(e,p);break}}}},"./src/js/json.js":
|
||||
/*!************************!*\
|
||||
!*** ./src/js/json.js ***!
|
||||
\************************/
|
||||
/*! exports provided: default */function(e,t,n){"use strict";n.r(t);var r=n(/*! ./functions */"./src/js/functions.js"),o=n(/*! ./print */"./src/js/print.js");function i(e){return i="function"===typeof Symbol&&"symbol"===typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"===typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},i(e)}function a(e){var t=e.printable,n=e.properties,o='<table style="border-collapse: collapse; width: 100%;">';e.repeatTableHeader&&(o+="<thead>"),o+="<tr>";for(var i=0;i<n.length;i++)o+='<th style="width:'+n[i].columnSize+";"+e.gridHeaderStyle+'">'+Object(r["capitalizePrint"])(n[i].displayName)+"</th>";o+="</tr>",e.repeatTableHeader&&(o+="</thead>"),o+="<tbody>";for(var a=0;a<t.length;a++){o+="<tr>";for(var l=0;l<n.length;l++){var s=t[a],d=n[l].field.split(".");if(d.length>1)for(var c=0;c<d.length;c++)s=s[d[c]];else s=s[n[l].field];o+='<td style="width:'+n[l].columnSize+e.gridStyle+'">'+s+"</td>"}o+="</tr>"}return o+="</tbody></table>",o}t["default"]={print:function(e,t){if("object"!==i(e.printable))throw new Error("Invalid javascript data object (JSON).");if("boolean"!==typeof e.repeatTableHeader)throw new Error("Invalid value for repeatTableHeader attribute (JSON).");if(!e.properties||!Array.isArray(e.properties))throw new Error("Invalid properties array for your JSON data.");e.properties=e.properties.map((function(t){return{field:"object"===i(t)?t.field:t,displayName:"object"===i(t)?t.displayName:t,columnSize:"object"===i(t)&&t.columnSize?t.columnSize+";":100/e.properties.length+"%;"}})),e.printableElement=document.createElement("div"),e.header&&Object(r["addHeader"])(e.printableElement,e),e.printableElement.innerHTML+=a(e),o["default"].send(e,t)}}},"./src/js/modal.js":
|
||||
/*!*************************!*\
|
||||
!*** ./src/js/modal.js ***!
|
||||
\*************************/
|
||||
/*! exports provided: default */function(e,t,n){"use strict";n.r(t);var r={show:function(e){var t="font-family:sans-serif; display:table; text-align:center; font-weight:300; font-size:30px; left:0; top:0;position:fixed; z-index: 9990;color: #0460B5; width: 100%; height: 100%; background-color:rgba(255,255,255,.9);transition: opacity .3s ease;",n=document.createElement("div");n.setAttribute("style",t),n.setAttribute("id","printJS-Modal");var o=document.createElement("div");o.setAttribute("style","display:table-cell; vertical-align:middle; padding-bottom:100px;");var i=document.createElement("div");i.setAttribute("class","printClose"),i.setAttribute("id","printClose"),o.appendChild(i);var a=document.createElement("span");a.setAttribute("class","printSpinner"),o.appendChild(a);var l=document.createTextNode(e.modalMessage);o.appendChild(l),n.appendChild(o),document.getElementsByTagName("body")[0].appendChild(n),document.getElementById("printClose").addEventListener("click",(function(){r.close()}))},close:function(){var e=document.getElementById("printJS-Modal");e&&e.parentNode.removeChild(e)}};t["default"]=r},"./src/js/pdf.js":
|
||||
/*!***********************!*\
|
||||
!*** ./src/js/pdf.js ***!
|
||||
\***********************/
|
||||
/*! exports provided: default */function(e,t,n){"use strict";n.r(t);var r=n(/*! ./print */"./src/js/print.js"),o=n(/*! ./functions */"./src/js/functions.js");function i(e,t,n){var o=new window.Blob([n],{type:"application/pdf"});o=window.URL.createObjectURL(o),t.setAttribute("src",o),r["default"].send(e,t)}t["default"]={print:function(e,t){if(e.base64){var n=Uint8Array.from(atob(e.printable),(function(e){return e.charCodeAt(0)}));i(e,t,n)}else{e.printable=/^(blob|http|\/\/)/i.test(e.printable)?e.printable:window.location.origin+("/"!==e.printable.charAt(0)?"/"+e.printable:e.printable);var r=new window.XMLHttpRequest;r.responseType="arraybuffer",r.addEventListener("error",(function(){Object(o["cleanUp"])(e),e.onError(r.statusText,r)})),r.addEventListener("load",(function(){if(-1===[200,201].indexOf(r.status))return Object(o["cleanUp"])(e),void e.onError(r.statusText,r);i(e,t,r.response)})),r.open("GET",e.printable,!0),r.send()}}}},"./src/js/print.js":
|
||||
/*!*************************!*\
|
||||
!*** ./src/js/print.js ***!
|
||||
\*************************/
|
||||
/*! exports provided: default */function(e,t,n){"use strict";n.r(t);var r=n(/*! ./browser */"./src/js/browser.js"),o=n(/*! ./functions */"./src/js/functions.js"),i={send:function(e,t){document.getElementsByTagName("body")[0].appendChild(t);var n=document.getElementById(e.frameId);n.onload=function(){if("pdf"!==e.type){var t=n.contentWindow||n.contentDocument;if(t.document&&(t=t.document),t.body.appendChild(e.printableElement),"pdf"!==e.type&&e.style){var o=document.createElement("style");o.innerHTML=e.style,t.head.appendChild(o)}var i=t.getElementsByTagName("img");i.length>0?l(Array.from(i)).then((function(){return a(n,e)})):a(n,e)}else r["default"].isFirefox()?setTimeout((function(){return a(n,e)}),1e3):a(n,e)}}};function a(e,t){try{if(e.focus(),r["default"].isEdge()||r["default"].isIE())try{e.contentWindow.document.execCommand("print",!1,null)}catch(n){e.contentWindow.print()}else e.contentWindow.print()}catch(i){t.onError(i)}finally{r["default"].isFirefox()&&(e.style.visibility="hidden",e.style.left="-1px"),Object(o["cleanUp"])(t)}}function l(e){var t=e.map((function(e){if(e.src&&e.src!==window.location.href)return s(e)}));return Promise.all(t)}function s(e){return new Promise((function(t){var n=function n(){e&&"undefined"!==typeof e.naturalWidth&&0!==e.naturalWidth&&e.complete?t():setTimeout(n,500)};n()}))}t["default"]=i},"./src/js/raw-html.js":
|
||||
/*!****************************!*\
|
||||
!*** ./src/js/raw-html.js ***!
|
||||
\****************************/
|
||||
/*! exports provided: default */function(e,t,n){"use strict";n.r(t);var r=n(/*! ./print */"./src/js/print.js");t["default"]={print:function(e,t){e.printableElement=document.createElement("div"),e.printableElement.setAttribute("style","width:100%"),e.printableElement.innerHTML=e.printable,r["default"].send(e,t)}}},"./src/sass/index.scss":
|
||||
/*!*****************************!*\
|
||||
!*** ./src/sass/index.scss ***!
|
||||
\*****************************/
|
||||
/*! no static exports found */function(e,t,n){},0:
|
||||
/*!****************************!*\
|
||||
!*** multi ./src/index.js ***!
|
||||
\****************************/
|
||||
/*! no static exports found */function(e,t,n){e.exports=n(/*! ./src/index.js */"./src/index.js")}})["default"]}))}}]);
|
||||
//# sourceMappingURL=chunk-496def4a.163ff0dc.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +0,0 @@
|
|||
(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-762e73e2"],{"1e277":function(e,t,n){"use strict";n("e21c")},"9ed6":function(e,t,n){"use strict";n.r(t);var r=n("1da1"),o=(n("96cf"),n("d9e2"),n("7a23")),c=n("b9af"),u=n.n(c),a=n("6c02"),i=n("5502"),l=function(e){return Object(o["pushScopeId"])("data-v-0561fd40"),e=e(),Object(o["popScopeId"])(),e},s={class:"login-container"},d=l((function(){return Object(o["createElementVNode"])("img",{src:u.a,class:"bg"},null,-1)})),b={class:"login-box"},f=l((function(){return Object(o["createElementVNode"])("div",{style:{color:"white","text-align":"center","margin-bottom":"15px"}},"登录系统-密码账号随便填 admin admin",-1)})),p={class:"login-box-content-right"},j=Object(o["createTextVNode"])("登录"),m=Object(o["defineComponent"])({setup:function(e){var t=Object(o["ref"])(),n=Object(a["d"])(),c=Object(i["b"])(),u=function(e,t,n){if(!t)return n(new Error("请输入用户名"));n()},l=function(e,t,n){""===t?n(new Error("请输入密码")):n()},m=Object(o["reactive"])({username:"",password:""}),O=Object(o["reactive"])({password:[{validator:l,trigger:"blur"}],username:[{validator:u,trigger:"blur"}]}),w=function(e){e&&e.validate(function(){var e=Object(r["a"])(regeneratorRuntime.mark((function e(t){return regeneratorRuntime.wrap((function(e){while(1)switch(e.prev=e.next){case 0:if(console.log("valid==",t),!t){e.next=7;break}return e.next=4,c.dispatch("user/login",m);case 4:n.push({path:"/"}),e.next=9;break;case 7:return console.log("error submit!"),e.abrupt("return",!1);case 9:case"end":return e.stop()}}),e)})));return function(t){return e.apply(this,arguments)}}())};return function(e,n){var r=Object(o["resolveComponent"])("el-input"),c=Object(o["resolveComponent"])("el-form-item"),u=Object(o["resolveComponent"])("el-button"),a=Object(o["resolveComponent"])("el-form");return Object(o["openBlock"])(),Object(o["createElementBlock"])("div",s,[d,Object(o["createElementVNode"])("div",b,[f,Object(o["createElementVNode"])("div",p,[Object(o["createVNode"])(a,{ref_key:"ruleFormRef",ref:t,model:Object(o["unref"])(m),"status-icon":"",rules:Object(o["unref"])(O),"label-width":"0",class:"demo-ruleForm"},{default:Object(o["withCtx"])((function(){return[Object(o["createVNode"])(c,{label:"",prop:"username"},{default:Object(o["withCtx"])((function(){return[Object(o["createVNode"])(r,{modelValue:Object(o["unref"])(m).username,"onUpdate:modelValue":n[0]||(n[0]=function(e){return Object(o["unref"])(m).username=e}),type:"text",onKeyup:n[1]||(n[1]=Object(o["withKeys"])((function(e){return w(t.value)}),["enter","native"]))},null,8,["modelValue"])]})),_:1}),Object(o["createVNode"])(c,{label:"",prop:"password"},{default:Object(o["withCtx"])((function(){return[Object(o["createVNode"])(r,{onKeyup:n[2]||(n[2]=Object(o["withKeys"])((function(e){return w(t.value)}),["enter","native"])),modelValue:Object(o["unref"])(m).password,"onUpdate:modelValue":n[3]||(n[3]=function(e){return Object(o["unref"])(m).password=e}),type:"password"},null,8,["modelValue"])]})),_:1}),Object(o["createVNode"])(c,{style:{width:"100%"}},{default:Object(o["withCtx"])((function(){return[Object(o["createVNode"])(u,{type:"primary",onClick:n[4]||(n[4]=function(e){return w(t.value)}),style:{width:"100%",height:"47px"}},{default:Object(o["withCtx"])((function(){return[j]})),_:1})]})),_:1})]})),_:1},8,["model","rules"])])])])}}}),O=(n("1e277"),n("6b0d")),w=n.n(O);const v=w()(m,[["__scopeId","data-v-0561fd40"]]);t["default"]=v},b9af:function(e,t,n){e.exports=n.p+"img/2.d9ef58cf.png"},e21c:function(e,t,n){}}]);
|
||||
//# sourceMappingURL=chunk-762e73e2.ff112cc7.js.map
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -13,12 +13,18 @@ const chartsRouter = {
|
|||
roles:['other']
|
||||
},
|
||||
children: [
|
||||
// {
|
||||
// path: 'line',
|
||||
// component: () => import('@/views/charts/line.vue'),
|
||||
// name: 'line',
|
||||
// meta: { title: '折现图', noCache: true , roles:['other'] }
|
||||
// },
|
||||
{
|
||||
path: 'map',
|
||||
component: () => import('@/views/charts/map.vue'),
|
||||
name: 'map',
|
||||
meta: { title: '地图', noCache: true , roles:['other'] }
|
||||
},
|
||||
{
|
||||
path: 'migration',
|
||||
component: () => import('@/views/charts/migration.vue'),
|
||||
name: 'migration',
|
||||
meta: { title: '迁徙图', noCache: true , roles:['other'] }
|
||||
},
|
||||
{
|
||||
path: 'simple',
|
||||
component: () => import('@/views/charts/simple.vue'),
|
||||
|
|
|
|||
|
|
@ -30,36 +30,66 @@
|
|||
<line-charts height="200px" width="100%" id="lineS"/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<!-- <el-col :xs="24" :sm="12" :lg="8">-->
|
||||
<!-- <el-card class="box-card">-->
|
||||
<!-- <template #header>-->
|
||||
<!-- <div class="card-header">-->
|
||||
<!-- <span>散点图</span>-->
|
||||
<!-- </div>-->
|
||||
<!-- </template>-->
|
||||
<!-- <scatter-charts height="200px" width="100%" id="scatter"/>-->
|
||||
<!-- </el-card>-->
|
||||
<!-- </el-col>-->
|
||||
<!-- <el-col :xs="24" :sm="12" :lg="8">-->
|
||||
<!-- <el-card class="box-card">-->
|
||||
<!-- <template #header>-->
|
||||
<!-- <div class="card-header">-->
|
||||
<!-- <span>仪表盘</span>-->
|
||||
<!-- </div>-->
|
||||
<!-- </template>-->
|
||||
<!-- <gauge-charts height="200px" width="100%" id="gauge"/>-->
|
||||
<!-- </el-card>-->
|
||||
<!-- </el-col>-->
|
||||
<!-- <el-col :xs="24" :sm="12" :lg="8">-->
|
||||
<!-- <el-card class="box-card">-->
|
||||
<!-- <template #header>-->
|
||||
<!-- <div class="card-header">-->
|
||||
<!-- <span>漏斗图</span>-->
|
||||
<!-- </div>-->
|
||||
<!-- </template>-->
|
||||
<!-- <funnel-charts height="200px" width="100%" id="funnel"/>-->
|
||||
<!-- </el-card>-->
|
||||
<!-- </el-col>-->
|
||||
<el-col :xs="24" :sm="12" :lg="8">
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>设备数</span>
|
||||
</div>
|
||||
</template>
|
||||
<pie-charts height="200px" width="100%" id="pieS"/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="8">
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>圆环进度条</span>
|
||||
</div>
|
||||
</template>
|
||||
<progress-charts height="200px" width="100%" id="progress"/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="8">
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>漏斗图</span>
|
||||
</div>
|
||||
</template>
|
||||
<rotate-charts height="200px" width="100%" id="rotate"/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="8">
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>牛气冲天</span>
|
||||
</div>
|
||||
</template>
|
||||
<bullish-charts height="200px" width="100%" id="bullish"/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="8">
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>雷达图</span>
|
||||
</div>
|
||||
</template>
|
||||
<painting-charts height="200px" width="100%" id="painting"/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="8">
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>桑基图</span>
|
||||
</div>
|
||||
</template>
|
||||
<sankey-charts height="200px" width="100%" id="sankey"/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
|
|
@ -70,13 +100,14 @@
|
|||
import LiquidFillCharts from './components/complex/liquidFill.vue'
|
||||
import HistogramCharts from './components/complex/Histogram.vue'
|
||||
import LineCharts from './components/complex/line.vue'
|
||||
import ScatterCharts from './components/simple/scatter.vue'
|
||||
import GaugeCharts from './components/simple/gauge.vue'
|
||||
import FunnelCharts from './components/simple/funnel.vue'
|
||||
|
||||
import PieCharts from './components/complex/pie.vue'
|
||||
import ProgressCharts from './components/complex/progress.vue'
|
||||
import RotateCharts from './components/complex/rotate.vue'
|
||||
import BullishCharts from './components/complex/bullish.vue'
|
||||
import PaintingCharts from './components/complex/painting.vue'
|
||||
import SankeyCharts from './components/complex/sankey.vue'
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.card-header {
|
||||
display: flex;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,271 @@
|
|||
<template>
|
||||
<div :id="id" :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import * as echarts from "echarts";
|
||||
import {EChartsType} from "echarts/core";
|
||||
import {onMounted} from "vue";
|
||||
|
||||
let props = defineProps({
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
config:{
|
||||
type: Object,
|
||||
default: ()=>{}
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
})
|
||||
const color = ['#3c90ff', '#fff225', '#24ffdf', '#ff9c3c', '#7536ff']
|
||||
const indicator = [
|
||||
{
|
||||
text: '文明村',
|
||||
min: 0,
|
||||
max: 100
|
||||
},
|
||||
{
|
||||
text: '卫生村',
|
||||
min: 0,
|
||||
max: 100
|
||||
},
|
||||
{
|
||||
text: '森林村庄',
|
||||
min: 0,
|
||||
max: 100
|
||||
},
|
||||
{
|
||||
text: '全面小康',
|
||||
min: 0,
|
||||
max: 100
|
||||
},
|
||||
{
|
||||
text: '景区村庄',
|
||||
min: 0,
|
||||
max: 100
|
||||
}
|
||||
]
|
||||
const Data = [80,61,70,86,77]
|
||||
function setData() {
|
||||
return [
|
||||
{
|
||||
value: Data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
lineStyle: {
|
||||
color: '#4BFFFC',
|
||||
shadowColor: '#4BFFFC',
|
||||
shadowBlur: 5
|
||||
},
|
||||
shadowColor: '#4BFFFC',
|
||||
shadowBlur: 5
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
// 单项区域填充样式
|
||||
color: {
|
||||
type: 'radial',
|
||||
x: 0.5, //右
|
||||
y: 0.5, //下
|
||||
r: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 1,
|
||||
color: '#4BFFFC'
|
||||
},
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(0,0,0,0)'
|
||||
}
|
||||
],
|
||||
globalCoord: false
|
||||
},
|
||||
opacity: 0.8 // 区域透明度
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
function setgauge(i) {
|
||||
return {
|
||||
type: 'gauge',
|
||||
detail: false,
|
||||
splitNumber: 10, //刻度数量
|
||||
radius: '80%', //图表尺寸
|
||||
center: ['50%', '50%'],
|
||||
startAngle: 90 + 72 * i + 18, //开始刻度的角度
|
||||
endAngle: 90 + 72 * (i + 1) - 18, //结束刻度的角度
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#66ccff',
|
||||
width: 1
|
||||
},
|
||||
length: 6,
|
||||
splitNumber: 1
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
}
|
||||
function setSpot() {
|
||||
var scatterData = []
|
||||
Data.map((o, i) => {
|
||||
scatterData.push({
|
||||
value: [o, i],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: color[i],
|
||||
borderColor: '#fff',
|
||||
borderWidth: 1,
|
||||
shadowColor: color[i],
|
||||
shadowBlur: 8
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
return scatterData
|
||||
}
|
||||
|
||||
const options = {
|
||||
backgroundColor: '#0E1327',
|
||||
polar: {
|
||||
center: ['50%', '50%'],
|
||||
radius: '60%'
|
||||
},
|
||||
radar: {
|
||||
shape: 'circle',
|
||||
center: ['50%', '50%'],
|
||||
radius: '60%',
|
||||
indicator: indicator,
|
||||
axisName: {
|
||||
color: '#b7e9fd',
|
||||
fontSize: 13,
|
||||
padding: -20
|
||||
},
|
||||
nameGap: 45,
|
||||
splitNumber: 4,
|
||||
splitArea: {
|
||||
// 坐标轴在 grid 区域中的分隔区域，默认不显示。
|
||||
show: true,
|
||||
areaStyle: {
|
||||
// 分隔区域的样式设置。
|
||||
color: ['rgba(27, 50, 66, 0.4)']
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
//指向外圈文本的分隔线样式
|
||||
lineStyle: {
|
||||
color: '#5aa3d0'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(99,192,251,0.2)', // 分隔线颜色
|
||||
width: 2 // 分隔线线宽
|
||||
}
|
||||
}
|
||||
},
|
||||
angleAxis: {
|
||||
type: 'category',
|
||||
data: name,
|
||||
minInterval: 1,
|
||||
boundaryGap: false,
|
||||
clockwise: false,
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
radiusAxis: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
interval: 25,
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
//指向外圈文本的分隔线样式
|
||||
lineStyle: {
|
||||
color: '#5aa3d0'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 12,
|
||||
color: '#5aa3d0',
|
||||
align: 'left',
|
||||
margin: -5
|
||||
}
|
||||
},
|
||||
series: [
|
||||
setgauge(0),
|
||||
setgauge(1),
|
||||
setgauge(2),
|
||||
setgauge(3),
|
||||
setgauge(4),
|
||||
{
|
||||
type: 'radar',
|
||||
silent: true,
|
||||
lineStyle: {
|
||||
color: '#66ffff'
|
||||
},
|
||||
areaStyle: {
|
||||
color: 'rgba(102, 255, 255, 0.31)'
|
||||
},
|
||||
data: setData()
|
||||
},
|
||||
{
|
||||
type: 'scatter',
|
||||
coordinateSystem: 'polar',
|
||||
symbolSize: 20,
|
||||
data: setSpot()
|
||||
}
|
||||
]
|
||||
};
|
||||
let chart:EChartsType;
|
||||
const initChart =()=> {
|
||||
let chart = echarts.init(document.getElementById(props.id))
|
||||
chart.setOption(options)
|
||||
return chart
|
||||
}
|
||||
onMounted(()=>{
|
||||
chart = initChart()
|
||||
|
||||
|
||||
window.addEventListener('resize',function (){
|
||||
chart&&chart.resize()
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,200 @@
|
|||
<template>
|
||||
<div :id="id" :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import * as echarts from "echarts";
|
||||
import {EChartsType} from "echarts/core";
|
||||
import {onMounted} from "vue";
|
||||
|
||||
let props = defineProps({
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
config:{
|
||||
type: Object,
|
||||
default: ()=>{}
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
})
|
||||
let color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'];
|
||||
let echartData = [
|
||||
{
|
||||
name: '设备1',
|
||||
value: '3720',
|
||||
},
|
||||
{
|
||||
name: '设备2',
|
||||
value: '2920',
|
||||
},
|
||||
{
|
||||
name: '设备3',
|
||||
value: '2200',
|
||||
},
|
||||
{
|
||||
name: '设备4',
|
||||
value: '1420',
|
||||
},
|
||||
];
|
||||
let formatNumber = function (num) {
|
||||
let reg = /(?=(\B)(\d{3})+$)/g;
|
||||
return num.toString().replace(reg, ',');
|
||||
};
|
||||
|
||||
const options = {
|
||||
backgroundColor: '#364686',
|
||||
color: color,
|
||||
title: [
|
||||
{
|
||||
text: '设备数',
|
||||
x: 'center',
|
||||
top: '40%',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 18,
|
||||
fontWeight: '100',
|
||||
},
|
||||
},
|
||||
{
|
||||
text: '60%',
|
||||
x: 'center',
|
||||
top: '50%',
|
||||
textStyle: {
|
||||
fontSize: 30,
|
||||
color: '#00f0ff',
|
||||
foontWeight: '500',
|
||||
},
|
||||
},
|
||||
],
|
||||
polar: {
|
||||
radius: ['44%', '50%'],
|
||||
center: ['50%', '50%'],
|
||||
},
|
||||
angleAxis: {
|
||||
max: 100,
|
||||
show: false,
|
||||
},
|
||||
radiusAxis: {
|
||||
type: 'category',
|
||||
show: true,
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['55%', '67%'],
|
||||
center: ['50%', '50%'],
|
||||
data: echartData,
|
||||
hoverAnimation: false,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderColor: '#364684',
|
||||
borderWidth: 2,
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
length: 60,
|
||||
length2: 60,
|
||||
lineStyle: {
|
||||
color: '#e6e6e6',
|
||||
},
|
||||
},
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
formatter: (params) => {
|
||||
return '{icon|●}{name|' + params.name + '}\n{value|' + formatNumber(params.value) + '}';
|
||||
},
|
||||
padding: [0, -70, 30, -70],
|
||||
rich: {
|
||||
icon: {
|
||||
fontSize: 14,
|
||||
align: 'left',
|
||||
padding: [4, 0, 0, 0],
|
||||
},
|
||||
name: {
|
||||
fontSize: 14,
|
||||
align: 'left',
|
||||
padding: [4, 0, 0, 0],
|
||||
color: '#fff',
|
||||
},
|
||||
value: {
|
||||
fontSize: 18,
|
||||
fontWeight: 'bold',
|
||||
color: '#fff',
|
||||
align: 'left',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
type: 'pie',
|
||||
startAngle: 90,
|
||||
radius: '50%',
|
||||
hoverAnimation: false,
|
||||
center: ['50%', '50%'],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(50,171,241, 1)',
|
||||
},
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(55,70,130, 0)',
|
||||
},
|
||||
]),
|
||||
// borderWidth: 1,
|
||||
// borderColor: '',
|
||||
shadowBlur: 10,
|
||||
// shadowColor: 'rgba(55,70,130, 1)'
|
||||
},
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 100,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
let chart:EChartsType;
|
||||
const initChart =()=> {
|
||||
let chart = echarts.init(document.getElementById(props.id))
|
||||
chart.setOption(options)
|
||||
return chart
|
||||
}
|
||||
onMounted(()=>{
|
||||
chart = initChart()
|
||||
window.addEventListener('resize',function (){
|
||||
chart&&chart.resize()
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,149 @@
|
|||
<template>
|
||||
<div :id="id" :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import * as echarts from "echarts";
|
||||
import {EChartsType} from "echarts/core";
|
||||
import {onMounted} from "vue";
|
||||
|
||||
let props = defineProps({
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
config:{
|
||||
type: Object,
|
||||
default: ()=>{}
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
const options = {
|
||||
title: [
|
||||
{
|
||||
text: '已完成',
|
||||
x: 'center',
|
||||
top: '52%',
|
||||
textStyle: {
|
||||
color: '#FFFFFF',
|
||||
fontSize: 16,
|
||||
fontWeight: '100',
|
||||
},
|
||||
},
|
||||
{
|
||||
text: '75%',
|
||||
x: 'center',
|
||||
y: 'center',
|
||||
textStyle: {
|
||||
fontSize: '12',
|
||||
color: '#FFFFFF',
|
||||
fontFamily: 'DINAlternate-Bold, DINAlternate',
|
||||
foontWeight: '600',
|
||||
},
|
||||
},
|
||||
],
|
||||
backgroundColor: '#111',
|
||||
polar: {
|
||||
radius: ['42%', '52%'],
|
||||
center: ['50%', '50%'],
|
||||
},
|
||||
angleAxis: {
|
||||
max: 100,
|
||||
show: false,
|
||||
},
|
||||
radiusAxis: {
|
||||
type: 'category',
|
||||
show: true,
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '',
|
||||
type: 'bar',
|
||||
roundCap: true,
|
||||
barWidth: 30,
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: 'rgba(66, 66, 66, .3)',
|
||||
},
|
||||
data: [60],
|
||||
coordinateSystem: 'polar',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#16CEB9',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#6648FF',
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
type: 'pie',
|
||||
startAngle: 80,
|
||||
radius: ['56%'],
|
||||
hoverAnimation: false,
|
||||
center: ['50%', '50%'],
|
||||
itemStyle: {
|
||||
color: 'rgba(66, 66, 66, .1)',
|
||||
borderWidth: 1,
|
||||
borderColor: '#5269EE',
|
||||
},
|
||||
data: [100],
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
type: 'pie',
|
||||
startAngle: 80,
|
||||
radius: ['38%'],
|
||||
hoverAnimation: false,
|
||||
center: ['50%', '50%'],
|
||||
itemStyle: {
|
||||
color: 'rgba(66, 66, 66, .1)',
|
||||
borderWidth: 1,
|
||||
borderColor: '#5269EE',
|
||||
},
|
||||
data: [100],
|
||||
},
|
||||
],
|
||||
};
|
||||
let chart:EChartsType;
|
||||
const initChart =()=> {
|
||||
let chart = echarts.init(document.getElementById(props.id))
|
||||
chart.setOption(options)
|
||||
return chart
|
||||
}
|
||||
onMounted(()=>{
|
||||
chart = initChart()
|
||||
window.addEventListener('resize',function (){
|
||||
chart&&chart.resize()
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,413 @@
|
|||
|
||||
<template>
|
||||
<div :id="id" :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import * as echarts from "echarts";
|
||||
import {EChartsType} from "echarts/core";
|
||||
import {onMounted} from "vue";
|
||||
|
||||
let props = defineProps({
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
config:{
|
||||
type: Object,
|
||||
default: ()=>{}
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
})
|
||||
var data = [],data2=[];
|
||||
var trafficWay = [
|
||||
{
|
||||
name: '病假',
|
||||
value: 20
|
||||
},{
|
||||
name: '事假',
|
||||
value: 1
|
||||
},{
|
||||
name: '婚假',
|
||||
value: 30
|
||||
},{
|
||||
name: '丧假',
|
||||
value: 40
|
||||
},{
|
||||
name: '年休假',
|
||||
value: 40
|
||||
}];
|
||||
var color=['#2A8BFD','#BAFF7F','#00FAC1','#00CAFF','#FDE056','#4ED33C','#FF8A26','#FF5252','#9689FF','#CB00FF']
|
||||
for (var i = 0; i < trafficWay.length; i++) {
|
||||
data.push({
|
||||
value: trafficWay[i].value,
|
||||
name: trafficWay[i].name,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 8,
|
||||
shadowBlur: 20,
|
||||
borderRadius:20,
|
||||
borderColor:color[i],
|
||||
shadowColor: color[i]
|
||||
}
|
||||
}
|
||||
}, {
|
||||
value: 5,
|
||||
name: '',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
color: 'rgba(0, 0, 0, 0)',
|
||||
borderColor: 'rgba(0, 0, 0, 0)',
|
||||
borderWidth: 0
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
data2.push({
|
||||
value: trafficWay[i].value,
|
||||
name: trafficWay[i].name,
|
||||
},
|
||||
{
|
||||
value: 5,
|
||||
name: '',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
color: 'rgba(0, 0, 0, 0)',
|
||||
borderColor: 'rgba(0, 0, 0, 0)',
|
||||
borderWidth: 0,
|
||||
opacity:0.2
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
let angle = 0;//角度，用来做简单的动画效果的
|
||||
|
||||
const option = {
|
||||
backgroundColor:"#061740",
|
||||
color : color,
|
||||
legend:{
|
||||
right:'10%',
|
||||
top:'10%',
|
||||
icon:'rect',
|
||||
itemWidth:15,
|
||||
itemHeight:15,
|
||||
textStyle:{
|
||||
color:'#ffffff',
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{//外线1
|
||||
name: "ring5",
|
||||
type: 'custom',
|
||||
coordinateSystem: "none",
|
||||
renderItem: function(params, api) {
|
||||
return {
|
||||
type: 'arc',
|
||||
shape: {
|
||||
cx: api.getWidth() / 3,
|
||||
cy: api.getHeight() / 2,
|
||||
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
|
||||
startAngle: (0+angle) * Math.PI / 180,
|
||||
endAngle: (90+angle) * Math.PI / 180
|
||||
},
|
||||
style: {
|
||||
stroke: '#4EE9E6',
|
||||
fill: "transparent",
|
||||
lineWidth: 1.5
|
||||
},
|
||||
silent: true
|
||||
};
|
||||
},
|
||||
data: [0]
|
||||
},
|
||||
{//内线1
|
||||
name: "ring5",
|
||||
type: 'custom',
|
||||
coordinateSystem: "none",
|
||||
renderItem: function(params, api) {
|
||||
return {
|
||||
type: 'arc',
|
||||
shape: {
|
||||
cx: api.getWidth() / 3,
|
||||
cy: api.getHeight() / 2,
|
||||
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
|
||||
startAngle: (180+angle) * Math.PI / 180,
|
||||
endAngle: (270+angle) * Math.PI / 180
|
||||
},
|
||||
style: {
|
||||
stroke: "#4EE9E6",
|
||||
fill: "transparent",
|
||||
lineWidth: 1.5
|
||||
},
|
||||
silent: true
|
||||
};
|
||||
},
|
||||
data: [0]
|
||||
},
|
||||
{//外线2
|
||||
name: "ring5",
|
||||
type: 'custom',
|
||||
coordinateSystem: "none",
|
||||
renderItem: function(params, api) {
|
||||
return {
|
||||
type: 'arc',
|
||||
shape: {
|
||||
cx: api.getWidth() / 3,
|
||||
cy: api.getHeight() / 2,
|
||||
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
|
||||
startAngle: (270+-angle) * Math.PI / 180,
|
||||
endAngle: (40+-angle) * Math.PI / 180
|
||||
},
|
||||
style: {
|
||||
stroke: "#4EE9E6",
|
||||
fill: "transparent",
|
||||
lineWidth: 1.5
|
||||
},
|
||||
silent: true
|
||||
};
|
||||
},
|
||||
data: [0]
|
||||
},
|
||||
{//外线2
|
||||
name: "ring5",
|
||||
type: 'custom',
|
||||
coordinateSystem: "none",
|
||||
renderItem: function(params, api) {
|
||||
return {
|
||||
type: 'arc',
|
||||
shape: {
|
||||
cx: api.getWidth() / 3,
|
||||
cy: api.getHeight() / 2,
|
||||
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
|
||||
startAngle: (90+-angle) * Math.PI / 180,
|
||||
endAngle: (220+-angle) * Math.PI / 180
|
||||
},
|
||||
style: {
|
||||
stroke: "#4EE9E6",
|
||||
fill: "transparent",
|
||||
lineWidth: 1.5
|
||||
},
|
||||
silent: true
|
||||
};
|
||||
},
|
||||
data: [0]
|
||||
},
|
||||
{//绿点1
|
||||
name: "ring5",
|
||||
type: 'custom',
|
||||
coordinateSystem: "none",
|
||||
renderItem: function(params, api) {
|
||||
let x0 = api.getWidth() / 3;
|
||||
let y0 = api.getHeight() / 2;
|
||||
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
|
||||
let point = getCirlPoint(x0, y0, r, (90+-angle))
|
||||
return {
|
||||
type: 'circle',
|
||||
shape: {
|
||||
cx: point.x,
|
||||
cy: point.y,
|
||||
r: 4
|
||||
},
|
||||
style: {
|
||||
stroke: "#66FFFF",//粉
|
||||
fill: "#66FFFF"
|
||||
},
|
||||
silent: true
|
||||
};
|
||||
},
|
||||
data: [0]
|
||||
},
|
||||
{//绿点2
|
||||
name: "ring5", //绿点
|
||||
type: 'custom',
|
||||
coordinateSystem: "none",
|
||||
renderItem: function(params, api) {
|
||||
let x0 = api.getWidth() / 3;
|
||||
let y0 = api.getHeight() / 2;
|
||||
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
|
||||
let point = getCirlPoint(x0, y0, r, (270+-angle))
|
||||
return {
|
||||
type: 'circle',
|
||||
shape: {
|
||||
cx: point.x,
|
||||
cy: point.y,
|
||||
r: 4
|
||||
},
|
||||
style: {
|
||||
stroke: "#66FFFF",//粉
|
||||
fill: "#66FFFF"
|
||||
},
|
||||
silent: true
|
||||
};
|
||||
},
|
||||
data: [0]
|
||||
},
|
||||
{//绿点3
|
||||
name: "ring5",
|
||||
type: 'custom',
|
||||
coordinateSystem: "none",
|
||||
renderItem: function(params, api) {
|
||||
let x0 = api.getWidth() / 3;
|
||||
let y0 = api.getHeight() / 2;
|
||||
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6;
|
||||
let point = getCirlPoint(x0, y0, r, (90+angle))
|
||||
return {
|
||||
type: 'circle',
|
||||
shape: {
|
||||
cx: point.x,
|
||||
cy: point.y,
|
||||
r: 4
|
||||
},
|
||||
style: {
|
||||
stroke: "#66FFFF",//粉
|
||||
fill: "#66FFFF"
|
||||
},
|
||||
silent: true
|
||||
};
|
||||
},
|
||||
data: [0]
|
||||
},
|
||||
{//绿点4
|
||||
name: "ring5", //绿点
|
||||
type: 'custom',
|
||||
coordinateSystem: "none",
|
||||
renderItem: function(params, api) {
|
||||
let x0 = api.getWidth() / 3;
|
||||
let y0 = api.getHeight() / 2;
|
||||
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6;
|
||||
let point = getCirlPoint(x0, y0, r, (270+angle))
|
||||
return {
|
||||
type: 'circle',
|
||||
shape: {
|
||||
cx: point.x,
|
||||
cy: point.y,
|
||||
r: 4
|
||||
},
|
||||
style: {
|
||||
stroke: "#66FFFF",//粉
|
||||
fill: "#66FFFF"
|
||||
},
|
||||
silent: true
|
||||
};
|
||||
},
|
||||
data: [0]
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
type: 'pie',
|
||||
clockWise: false,
|
||||
radius: ['98%', '95%'],
|
||||
hoverAnimation: false,
|
||||
center:['33.33%','50%'],
|
||||
top:"center",
|
||||
itemStyle: {
|
||||
normal:{
|
||||
label: {
|
||||
show:false
|
||||
}
|
||||
}
|
||||
},
|
||||
data:data
|
||||
},
|
||||
{
|
||||
type: 'pie',
|
||||
top:"center",
|
||||
startAngle:90,
|
||||
clockwise:false,
|
||||
center:['33.33%','50%'],
|
||||
legendHoverLink:false,
|
||||
hoverAnimation: false,
|
||||
radius: ['94%', '55%'],
|
||||
itemStyle: {
|
||||
opacity:0.15
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data:data2
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
type: 'pie',
|
||||
clockWise: false,
|
||||
center:['33.33%','50%'],
|
||||
radius: ['39%', '38%'],
|
||||
hoverAnimation: false,
|
||||
top:"center",
|
||||
itemStyle: {
|
||||
normal:{
|
||||
label: {
|
||||
show:false
|
||||
}
|
||||
}
|
||||
},
|
||||
data:data
|
||||
},
|
||||
]
|
||||
};
|
||||
//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
|
||||
function getCirlPoint(x0, y0, r, angle) {
|
||||
let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
|
||||
let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
|
||||
return {
|
||||
x: x1,
|
||||
y: y1
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
let chart:EChartsType;
|
||||
const initChart =()=> {
|
||||
let chart = echarts.init(document.getElementById(props.id))
|
||||
draw(chart)
|
||||
return chart
|
||||
}
|
||||
function draw(chart){
|
||||
angle = angle+3
|
||||
chart.setOption(option, true)
|
||||
//window.requestAnimationFrame(draw);
|
||||
}
|
||||
|
||||
onMounted(()=>{
|
||||
chart = initChart()
|
||||
|
||||
setInterval(function() {
|
||||
//用setInterval做动画感觉有问题
|
||||
draw(chart)
|
||||
}, 100);
|
||||
|
||||
window.addEventListener('resize',function (){
|
||||
chart&&chart.resize()
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,337 @@
|
|||
<template>
|
||||
<div :id="id" :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import * as echarts from "echarts";
|
||||
import {EChartsType} from "echarts/core";
|
||||
import {onMounted} from "vue";
|
||||
|
||||
let props = defineProps({
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
config:{
|
||||
type: Object,
|
||||
default: ()=>{}
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
})
|
||||
let datalist = [
|
||||
{
|
||||
name: "公共平台"
|
||||
},
|
||||
{
|
||||
name: "系统0000"
|
||||
},
|
||||
{
|
||||
name: "系统0011"
|
||||
},
|
||||
{
|
||||
name: "系统0022"
|
||||
},
|
||||
{
|
||||
name: "系统0033"
|
||||
},
|
||||
{
|
||||
name: "系统0044"
|
||||
},
|
||||
{
|
||||
name: "系统0055"
|
||||
},{
|
||||
name: "系统11"
|
||||
},
|
||||
{
|
||||
name: "系统22"
|
||||
},
|
||||
{
|
||||
name: "系统33"
|
||||
},
|
||||
{
|
||||
name: "系统44"
|
||||
},
|
||||
{
|
||||
name: "系统55"
|
||||
},
|
||||
{
|
||||
name: "系统66"
|
||||
},
|
||||
{
|
||||
name: "系统77"
|
||||
},
|
||||
{
|
||||
name: "系统88"
|
||||
},
|
||||
{
|
||||
name: "系统99"
|
||||
}
|
||||
];
|
||||
let linksData = [
|
||||
{
|
||||
source: "公共平台",
|
||||
target: "系统0000",
|
||||
value: 1044305
|
||||
},
|
||||
{
|
||||
source: "公共平台",
|
||||
target: "系统0011",
|
||||
value: 651527
|
||||
},
|
||||
{
|
||||
source: "公共平台",
|
||||
target: "系统0022",
|
||||
value: 651527
|
||||
},
|
||||
{
|
||||
source: "公共平台",
|
||||
target: "系统0033",
|
||||
value: 486710
|
||||
},
|
||||
{
|
||||
source: "公共平台",
|
||||
target: "系统0044",
|
||||
value: 212670
|
||||
},
|
||||
{
|
||||
source: "公共平台",
|
||||
target: "系统0055",
|
||||
value: 210400
|
||||
},{
|
||||
source: "系统0011",
|
||||
target: "系统11",
|
||||
value: 645246
|
||||
},
|
||||
{
|
||||
source: "系统0022",
|
||||
target: "系统22",
|
||||
value: 513275
|
||||
},
|
||||
{
|
||||
source: "系统0011",
|
||||
target: "系统33",
|
||||
value: 282986
|
||||
},
|
||||
{
|
||||
source: "系统0011",
|
||||
target: "系统44",
|
||||
value: 118655
|
||||
},
|
||||
{
|
||||
source: "系统0022",
|
||||
target: "系统55",
|
||||
value: 105989
|
||||
},
|
||||
{
|
||||
source: "系统0022",
|
||||
target: "系统66",
|
||||
value: 95100
|
||||
},
|
||||
{
|
||||
source: "系统0033",
|
||||
target: "系统77",
|
||||
value: 87796
|
||||
},
|
||||
{
|
||||
source: "系统0044",
|
||||
target: "系统88",
|
||||
value: 47658
|
||||
},
|
||||
{
|
||||
source: "系统0055",
|
||||
target: "系统99",
|
||||
value: 243660
|
||||
},
|
||||
|
||||
|
||||
];
|
||||
let Color = [
|
||||
"#61FEFF",
|
||||
"#937FE6",
|
||||
"#2B56D3",
|
||||
"#87E7AA",
|
||||
"#937FE6",
|
||||
"#FF9B97",
|
||||
"#8f23f5",
|
||||
"#0576ea",
|
||||
"#2cb8cf",
|
||||
"#8A7EE0",
|
||||
"#2cb8cf",
|
||||
"#4e70f0",
|
||||
"#1fa3de",
|
||||
"#bbc951",
|
||||
"#FFC14B",
|
||||
"#b785a6",
|
||||
|
||||
]; let Color1 = [
|
||||
"#04E0F3",
|
||||
"#682EFC",
|
||||
"#35A7FE",
|
||||
"#0DC09F",
|
||||
"#682EFC",
|
||||
"#ED6663",
|
||||
"#8f23f5",
|
||||
"#0576ea",
|
||||
"#2cb8cf",
|
||||
"#8A7EE0",
|
||||
"#2cb8cf",
|
||||
"#4e70f0",
|
||||
"#1fa3de",
|
||||
"#bbc951",
|
||||
"#FFC14B",
|
||||
"#b785a6",
|
||||
|
||||
];
|
||||
let sourceLabel = [
|
||||
"right",
|
||||
"left",
|
||||
"left",
|
||||
"left",
|
||||
"left",
|
||||
"left",
|
||||
"left",
|
||||
"left",
|
||||
"left",
|
||||
"left",
|
||||
"left",
|
||||
"left",
|
||||
"left",
|
||||
"left",
|
||||
"left",
|
||||
"left"
|
||||
];
|
||||
let itemStyleColor = [];
|
||||
let labelSource = [];
|
||||
for (let i = 0; i < datalist.length; i++) {
|
||||
datalist[i].label = {
|
||||
normal: {
|
||||
position: sourceLabel[i]
|
||||
}
|
||||
};
|
||||
labelSource.push(sourceLabel[i]);
|
||||
}
|
||||
for (let d = 0; d < datalist.length; d++) {
|
||||
datalist[d].itemStyle = {
|
||||
normal: {
|
||||
// color: Color[d]
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 1,
|
||||
x2: 0,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 1,
|
||||
color: Color[d], // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0,
|
||||
color: Color1[d], // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
global: false, // 缺省为 false
|
||||
},
|
||||
}
|
||||
};
|
||||
itemStyleColor.push(datalist[d]);
|
||||
}
|
||||
|
||||
const options = {
|
||||
backgroundColor: "#031d7a",
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
triggerOn: "mousemove",
|
||||
formatter: function(params) {
|
||||
if (params.name == "公共平台") {
|
||||
return " 公共平台 "
|
||||
} else {
|
||||
let value = params.data.value;
|
||||
if (!value && value !== 0) return 0;
|
||||
let str = value.toString();
|
||||
let reg = str.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
|
||||
if (params.data.source == "公共平台") {
|
||||
return params.data.target + " : " + str.replace(reg, "$1,");
|
||||
} else {
|
||||
return params.data.source + " : " + str.replace(reg, "$1,");
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
type: "sankey",
|
||||
layout: "none",
|
||||
top: "4%",
|
||||
bottom: "12%",
|
||||
left: "20",
|
||||
right: "20",
|
||||
nodeGap: 15,
|
||||
nodeWidth: 25,
|
||||
focusNodeAdjacency: "allEdges",
|
||||
data: itemStyleColor,
|
||||
links: linksData,
|
||||
label: {
|
||||
normal: {
|
||||
color: "#fff",
|
||||
fontSize: 14,
|
||||
formatter: function(params) {
|
||||
if (params.data.name == '公共平台') {
|
||||
let strs = params.data.name.split(''); //字符串数组
|
||||
let str = ''
|
||||
for (let i = 0, s; s = strs[i++];) { //遍历字符串数组
|
||||
str += s;
|
||||
if (!(i % 1)) str += '\n'; //按需要求余
|
||||
}
|
||||
return "{white|" + str + "}"
|
||||
} else {
|
||||
return params.data.name
|
||||
}
|
||||
},
|
||||
rich: {
|
||||
white: {
|
||||
fontSize: 16,
|
||||
lineHeight: 30,
|
||||
padding: [0, 0, 0, -26]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
opacity: 0.4,
|
||||
color: "source",
|
||||
curveness: 0.5
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 1,
|
||||
borderColor: "transparent"
|
||||
}
|
||||
}
|
||||
}]
|
||||
};
|
||||
let chart:EChartsType;
|
||||
const initChart =()=> {
|
||||
let chart = echarts.init(document.getElementById(props.id))
|
||||
chart.setOption(options)
|
||||
return chart
|
||||
}
|
||||
onMounted(()=>{
|
||||
chart = initChart()
|
||||
window.addEventListener('resize',function (){
|
||||
chart&&chart.resize()
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
|
||||
/*
|
||||
* Licensed to the Apache Software Foundation (ASF) under one
|
||||
* or more contributor license agreements. See the NOTICE file
|
||||
* distributed with this work for additional information
|
||||
* regarding copyright ownership. The ASF licenses this file
|
||||
* to you under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance
|
||||
* with the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
|
||||
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("echarts")):"function"==typeof define&&define.amd?define(["exports","echarts"],e):e(t.bmap={},t.echarts)}(this,function(t,e){"use strict";function o(t,e){this._bmap=t,this.dimensions=["lng","lat"],this._mapOffset=[0,0],this._api=e,this._projection=new BMap.MercatorProjection}function n(t,o){return o=o||[0,0],e.util.map([0,1],function(e){var n=o[e],i=t[e]/2,a=[],r=[];return a[e]=n-i,r[e]=n+i,a[1-e]=r[1-e]=o[1-e],Math.abs(this.dataToPoint(a)[e]-this.dataToPoint(r)[e])},this)}function i(){function t(t){this._root=t}return t.prototype=new BMap.Overlay,t.prototype.initialize=function(t){return t.getPanes().labelPane.appendChild(this._root),this._root},t.prototype.draw=function(){},t}function a(t,e){return t&&e&&t[0]===e[0]&&t[1]===e[1]}o.prototype.dimensions=["lng","lat"],o.prototype.setZoom=function(t){this._zoom=t},o.prototype.setCenter=function(t){this._center=this._projection.lngLatToPoint(new BMap.Point(t[0],t[1]))},o.prototype.setMapOffset=function(t){this._mapOffset=t},o.prototype.getBMap=function(){return this._bmap},o.prototype.dataToPoint=function(t){var e=new BMap.Point(t[0],t[1]),o=this._bmap.pointToOverlayPixel(e),n=this._mapOffset;return[o.x-n[0],o.y-n[1]]},o.prototype.pointToData=function(t){var e=this._mapOffset;return[(t=this._bmap.overlayPixelToPoint({x:t[0]+e[0],y:t[1]+e[1]})).lng,t.lat]},o.prototype.getViewRect=function(){var t=this._api;return new e.graphic.BoundingRect(0,0,t.getWidth(),t.getHeight())},o.prototype.getRoamTransform=function(){return e.matrix.create()},o.prototype.prepareCustoms=function(t){var o=this.getViewRect();return{coordSys:{type:"bmap",x:o.x,y:o.y,width:o.width,height:o.height},api:{coord:e.util.bind(this.dataToPoint,this),size:e.util.bind(n,this)}}};var r;o.dimensions=o.prototype.dimensions,o.create=function(t,e){var n,a=e.getDom();t.eachComponent("bmap",function(t){var p=e.getZr().painter,s=p.getViewportRoot();if("undefined"==typeof BMap)throw new Error("BMap api is not loaded");if(r=r||i(),n)throw new Error("Only one bmap component can exist");if(!t.__bmap){var m=a.querySelector(".ec-extension-bmap");m&&(s.style.left="0px",s.style.top="0px",a.removeChild(m)),(m=document.createElement("div")).style.cssText="width:100%;height:100%",m.classList.add("ec-extension-bmap"),a.appendChild(m);var c=t.__bmap=new BMap.Map(m),d=new r(s);c.addOverlay(d),p.getViewportRootOffset=function(){return{offsetLeft:0,offsetTop:0}}}var c=t.__bmap,f=t.get("center"),l=t.get("zoom");if(f&&l){var h=new BMap.Point(f[0],f[1]);c.centerAndZoom(h,l)}(n=new o(c,e)).setMapOffset(t.__mapOffset||[0,0]),n.setZoom(l),n.setCenter(f),t.coordinateSystem=n}),t.eachSeries(function(t){"bmap"===t.get("coordinateSystem")&&(t.coordinateSystem=n)})},e.extendComponentModel({type:"bmap",getBMap:function(){return this.__bmap},setCenterAndZoom:function(t,e){this.option.center=t,this.option.zoom=e},centerOrZoomChanged:function(t,e){var o=this.option;return!(a(t,o.center)&&e===o.zoom)},defaultOption:{center:[104.114129,37.550339],zoom:5,mapStyle:{},roam:!1}}),e.extendComponentView({type:"bmap",render:function(t,e,o){function n(){i||o.dispatchAction({type:"bmapRoam"})}var i=!0,a=t.getBMap(),r=o.getZr().painter.getViewportRoot(),p=t.coordinateSystem,s=function(e,n){if(!i){var a=r.parentNode.parentNode.parentNode,s=[-parseInt(a.style.left,10)||0,-parseInt(a.style.top,10)||0];r.style.left=s[0]+"px",r.style.top=s[1]+"px",p.setMapOffset(s),t.__mapOffset=s,o.dispatchAction({type:"bmapRoam"})}};a.removeEventListener("moving",this._oldMoveHandler),a.removeEventListener("zoomend",this._oldZoomEndHandler),a.addEventListener("moving",s),a.addEventListener("zoomend",n),this._oldMoveHandler=s,this._oldZoomEndHandler=n;var m=t.get("roam");m&&"scale"!==m?a.enableDragging():a.disableDragging(),m&&"move"!==m?(a.enableScrollWheelZoom(),a.enableDoubleClickZoom(),a.enablePinchToZoom()):(a.disableScrollWheelZoom(),a.disableDoubleClickZoom(),a.disablePinchToZoom());var c=t.__mapStyle,d=t.get("mapStyle")||{},f=JSON.stringify(d);JSON.stringify(c)!==f&&(Object.keys(d).length&&a.setMapStyle(d),t.__mapStyle=JSON.parse(f)),i=!1}}),e.registerCoordinateSystem("bmap",o),e.registerAction({type:"bmapRoam",event:"bmapRoam",update:"updateLayout"},function(t,e){e.eachComponent("bmap",function(t){var e=t.getBMap(),o=e.getCenter();t.setCenterAndZoom([o.lng,o.lat],e.getZoom())})});t.version="1.0.0"});
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,289 @@
|
|||
|
||||
<template>
|
||||
<div :id="id" :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import 'echarts-liquidfill/src/liquidFill.js'
|
||||
import './china.js'
|
||||
import './bmap.min.js'
|
||||
import * as echarts from "echarts";
|
||||
import {EChartsType} from "echarts/core";
|
||||
import {onMounted} from "vue";
|
||||
|
||||
let props = defineProps({
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
config:{
|
||||
type: Object,
|
||||
default: ()=>{}
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
})
|
||||
|
||||
//城市经纬度
|
||||
var geoCoordMap = {
|
||||
"北京": [116.46, 39.92],
|
||||
"成都": [104.06, 30.67],
|
||||
"杭州": [120.19, 30.26],
|
||||
"济南": [117, 36.65],
|
||||
"福州": [119.3, 26.08],
|
||||
"上海": [121.48, 31.22],
|
||||
"重庆": [106.54, 29.59],
|
||||
"深圳": [114.07, 22.62],
|
||||
"宁波": [121.56, 29.86],
|
||||
"南昌": [115.89, 28.68],
|
||||
"广州": [113.23, 23.16],
|
||||
"厦门": [118.1, 24.46],
|
||||
"太原": [112.53, 37.87],
|
||||
"哈尔滨": [126.63, 45.75],
|
||||
"西安": [108.95, 34.27],
|
||||
"沈阳": [123.38, 41.8],
|
||||
"大连": [121.62, 38.92],
|
||||
"海口": [110.35, 20.02],
|
||||
"长沙": [113, 28.21],
|
||||
"银川": [106.27, 38.47],
|
||||
"石家庄": [114.48, 38.03],
|
||||
"昆明": [102.73, 25.04],
|
||||
"武汉": [114.31, 30.52],
|
||||
"呼和浩特": [111.65, 40.82],
|
||||
"天津": [117.2, 39.13],
|
||||
"贵阳": [106.71, 26.57],
|
||||
"兰州": [103.73, 36.03],
|
||||
"青岛": [120.33, 36.07],
|
||||
"南京": [118.78, 32.04],
|
||||
"长春": [125.35, 43.88],
|
||||
"郑州": [113.65, 34.76],
|
||||
"西宁": [101.74, 36.56],
|
||||
"合肥": [117.27, 31.86],
|
||||
"南宁": [108.33, 22.84],
|
||||
"拉萨": [91.11, 29.97],
|
||||
"乌鲁木齐": [87.68, 43.77]
|
||||
};
|
||||
|
||||
|
||||
//数据部分
|
||||
var data = [
|
||||
{name:"北京",value:88.8},
|
||||
{name:"成都",value:88.7},
|
||||
{name:"厦门",value:88.01},
|
||||
{name:"杭州",value:87.9},
|
||||
{name:"济南",value:87.48},
|
||||
{name:"福州",value:87.47},
|
||||
{name:"上海",value:87.43},
|
||||
{name:"重庆",value:87.38},
|
||||
{name:"深圳",value:87.37},
|
||||
{name:"昆明",value:87.26},
|
||||
{name:"宁波",value:87.1},
|
||||
{name:"南昌",value:86.06},
|
||||
{name:"广州",value:85.89},
|
||||
{name:"太原",value:84.45},
|
||||
{name:"哈尔滨",value:83.96},
|
||||
{name:"西安",value:83.24},
|
||||
{name:"沈阳",value:82.96},
|
||||
{name:"大连",value:82.94},
|
||||
{name:"海口",value:82.88},
|
||||
{name:"长沙",value:82.85},
|
||||
{name:"银川",value:82.49},
|
||||
{name:"石家庄",value:82.24},
|
||||
{name:"武汉",value:81.68},
|
||||
{name:"呼和浩特",value:81.61},
|
||||
{name:"天津",value:80.99},
|
||||
{name:"贵阳",value:80.71},
|
||||
{name:"兰州",value:80.69},
|
||||
{name:"南京",value:80.65},
|
||||
{name:"青岛",value:80.61},
|
||||
{name:"长春",value:80.1},
|
||||
{name:"郑州",value:79.56},
|
||||
{name:"西宁",value:79.07},
|
||||
{name:"南宁",value:78.2},
|
||||
{name:"合肥",value:77.29},
|
||||
{name:"乌鲁木齐",value:76.91},
|
||||
{name:"拉萨",value:76.01}
|
||||
];
|
||||
var convertData = function(data) {
|
||||
var res = [];
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var geoCoord = geoCoordMap[data[i].name];
|
||||
if (geoCoord) {
|
||||
res.push({
|
||||
name: data[i].name,
|
||||
value: geoCoord.concat(data[i].value)
|
||||
});
|
||||
}
|
||||
}
|
||||
return res;
|
||||
};
|
||||
|
||||
|
||||
const options = {
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
dataView: {
|
||||
show: true,
|
||||
readOnly: true
|
||||
},
|
||||
restore: {
|
||||
show: true
|
||||
},
|
||||
saveAsImage: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
top:40,
|
||||
right:40
|
||||
},
|
||||
title: {
|
||||
//text: '2020年全国大厅监测得分',
|
||||
top:40,
|
||||
//subtext: 'from 零点有数',
|
||||
left: 'center',
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
fontSize: 30
|
||||
},
|
||||
subtextStyle: {
|
||||
fontSize: 20
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
left: 'left',
|
||||
data: ['强', '中', '弱'],
|
||||
textStyle: {
|
||||
color: '#ccc'
|
||||
}
|
||||
},
|
||||
backgroundColor: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0, color: '#0f2c70' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1, color: '#091732' // 100% 处的颜色
|
||||
}],
|
||||
globalCoord: false // 缺省为 false
|
||||
},
|
||||
visualMap: {
|
||||
min: 75,
|
||||
max: 90,
|
||||
left: 40,
|
||||
bottom: 40,
|
||||
calculable: false,
|
||||
text: ['高', '低'],
|
||||
inRange: {
|
||||
color: ['rgb(4, 1, 255)', 'rgb(225, 1, 255)']
|
||||
},
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
fontSize: 10
|
||||
}
|
||||
},
|
||||
geo: {
|
||||
map: 'china',
|
||||
show: true,
|
||||
roam: true,
|
||||
label: {
|
||||
emphasis: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: '#091632',
|
||||
borderColor: '#1773c3',
|
||||
shadowColor: '#1773c3',
|
||||
shadowBlur: 20
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'map',
|
||||
map: 'china',
|
||||
geoIndex: 1,
|
||||
aspectScale: 0.75, //长宽比
|
||||
showLegendSymbol: true, // 存在legend时显示
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
},
|
||||
emphasis: {
|
||||
show: false,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
roam: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: '#031525',
|
||||
borderColor: '#3B5077',
|
||||
borderWidth: 1.5
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: '#0f2c70'
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '城市',
|
||||
type: 'scatter',
|
||||
coordinateSystem: 'geo',
|
||||
data: convertData(data),
|
||||
symbolSize: function (val) {
|
||||
return val[2]/8;
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
formatter: '{b}',
|
||||
position: 'bottom',
|
||||
textStyle:{
|
||||
fontSize:10,
|
||||
fontWeight:'bolder',
|
||||
color:'#ffffff'
|
||||
},
|
||||
show: true
|
||||
},
|
||||
emphasis: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#ddb926'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
let chart:EChartsType;
|
||||
const initChart =()=> {
|
||||
let chart = echarts.init(document.getElementById(props.id))
|
||||
chart.setOption(options)
|
||||
return chart
|
||||
}
|
||||
onMounted(()=>{
|
||||
chart = initChart()
|
||||
window.addEventListener('resize',function (){
|
||||
chart&&chart.resize()
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,282 @@
|
|||
|
||||
<template>
|
||||
<div :id="id" :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import 'echarts-liquidfill/src/liquidFill.js'
|
||||
import {geoJson} from './get.js'
|
||||
import * as echarts from "echarts";
|
||||
import {EChartsType} from "echarts/core";
|
||||
import {onMounted} from "vue";
|
||||
|
||||
let props = defineProps({
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
config:{
|
||||
type: Object,
|
||||
default: ()=>{}
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
})
|
||||
|
||||
var geoGpsMap = [109.1162, 34.2004]
|
||||
var geoCoordMap = {
|
||||
"江苏": [118.8062, 31.9208],
|
||||
'内蒙古': [110.3467, 41.4899],
|
||||
"辽宁": [123.1238, 42.1216],
|
||||
"陕西": [109.1162, 34.2004],
|
||||
"甘肃": [103.5901, 36.3043],
|
||||
"青海": [101.4038, 36.8207],
|
||||
"新疆": [87.9236, 43.5883],
|
||||
|
||||
"河南": [113.4668, 34.6234],
|
||||
"西藏": [116.3896, 39.91],
|
||||
"浙江": [119.5313, 29.8773],
|
||||
"福建": [119.4543, 25.9222],
|
||||
"湖南": [113.0823, 28.2568],
|
||||
"四川": [113.0823, 28.2568],
|
||||
"云南": [102.9199, 25.4663],
|
||||
"广东": [113.12244, 23.009505],
|
||||
"海南": [110.3893, 19.8516]
|
||||
};
|
||||
|
||||
var value = {
|
||||
'江苏': 10000,
|
||||
'内蒙古': 10000,
|
||||
'辽宁': 10000,
|
||||
'陕西': 10000,
|
||||
'福建': 10000,
|
||||
'甘肃': 10000,
|
||||
'青海': 10000,
|
||||
'新疆': 10000,
|
||||
'湖北': 10000,
|
||||
'浙江': 10000,
|
||||
'河南': 10000,
|
||||
'湖南': 10000,
|
||||
'云南': 10000,
|
||||
'广东': 10000,
|
||||
'海南': 10000,
|
||||
'西藏': 10000,
|
||||
|
||||
|
||||
|
||||
};
|
||||
var colors = '#f9b207';
|
||||
|
||||
var year = ["长春", "长春", "青岛", "青岛", "成都", "成都"];
|
||||
var mapData = [];
|
||||
|
||||
/*柱子Y名称*/
|
||||
var categoryData = [];
|
||||
var barData = [];
|
||||
|
||||
for (var key in geoCoordMap) {
|
||||
mapData.push({
|
||||
"year": '陕西',
|
||||
"name": key,
|
||||
"value": value[key] / 100,
|
||||
"value1": value[key] / 100,
|
||||
});
|
||||
}
|
||||
|
||||
mapData.sort(function sortNumber(a, b) {
|
||||
return a.value - b.value
|
||||
});
|
||||
for (var j = 0; j < mapData.length; j++) {
|
||||
barData.push(mapData[j].value1);
|
||||
categoryData.push(mapData[j].name);
|
||||
}
|
||||
|
||||
echarts.registerMap('china', geoJson);
|
||||
var convertData = function(data) {
|
||||
var res = [];
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var geoCoord = geoCoordMap[data[i].name];
|
||||
if (geoCoord) {
|
||||
res.push({
|
||||
name: data[i].name,
|
||||
value: geoCoord.concat(data[i].value)
|
||||
});
|
||||
}
|
||||
}
|
||||
return res;
|
||||
};
|
||||
var convertToLineData = function(data, gps) {
|
||||
var res = [];
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var dataItem = data[i];
|
||||
var toCoord = geoCoordMap[dataItem.name];
|
||||
debugger;
|
||||
var fromCoord = gps; //郑州
|
||||
// var toCoord = geoGps[Math.random()*3];
|
||||
if (fromCoord && toCoord) {
|
||||
res.push([{
|
||||
coord: fromCoord,
|
||||
value: dataItem.value
|
||||
}, {
|
||||
coord: toCoord,
|
||||
}]);
|
||||
}
|
||||
}
|
||||
return res;
|
||||
};
|
||||
|
||||
|
||||
|
||||
const options = {
|
||||
backgroundColor: '#001540',
|
||||
geo: {
|
||||
show: true,
|
||||
map: 'china',
|
||||
roam: true,
|
||||
zoom: 1,
|
||||
center: [101.4038, 36.8207],
|
||||
label: {
|
||||
emphasis: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderColor: 'rgba(147, 235, 248, 1)',
|
||||
borderWidth: 1,
|
||||
areaColor: {
|
||||
type: 'radial',
|
||||
x: 0.5,
|
||||
y: 0.5,
|
||||
r: 0.8,
|
||||
colorStops: [{
|
||||
offset: 0,
|
||||
color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
|
||||
}],
|
||||
globalCoord: false // 缺省为 false
|
||||
},
|
||||
shadowColor: 'rgba(128, 217, 248, 1)',
|
||||
// shadowColor: 'rgba(255, 255, 255, 1)',
|
||||
shadowOffsetX: -2,
|
||||
shadowOffsetY: 2,
|
||||
shadowBlur: 10
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: '#389BB7',
|
||||
borderWidth: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
|
||||
//地图？
|
||||
{
|
||||
type: 'map',
|
||||
map: 'china',
|
||||
geoIndex: 0,
|
||||
aspectScale: 0.75, //长宽比
|
||||
showLegendSymbol: false, // 存在legend时显示
|
||||
label: {
|
||||
normal: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
show: false,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
roam: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: '#031525',
|
||||
borderColor: '#FFFFFF',
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: '#2B91B7'
|
||||
}
|
||||
},
|
||||
animation: false
|
||||
},
|
||||
//地图点的动画效果
|
||||
{
|
||||
// name: 'Top 5',
|
||||
type: 'effectScatter',
|
||||
coordinateSystem: 'geo',
|
||||
data: convertData(mapData.sort(function(a, b) {
|
||||
return b.value - a.value;
|
||||
}).slice(0, 20)),
|
||||
symbolSize: function(val) {
|
||||
return val[2] / 10;
|
||||
},
|
||||
showEffectOn: 'render',
|
||||
rippleEffect: {
|
||||
brushType: 'stroke'
|
||||
},
|
||||
hoverAnimation: true,
|
||||
label: {
|
||||
normal: {
|
||||
formatter: '{b}',
|
||||
position: 'right',
|
||||
show: true
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: colors,
|
||||
shadowBlur: 10,
|
||||
shadowColor: colors
|
||||
}
|
||||
},
|
||||
zlevel: 1
|
||||
},
|
||||
//地图线的动画效果
|
||||
{
|
||||
type: 'lines',
|
||||
zlevel: 2,
|
||||
effect: {
|
||||
show: true,
|
||||
period: 4, //箭头指向速度，值越小速度越快
|
||||
trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
|
||||
symbol: 'arrow', //箭头图标
|
||||
symbolSize: 3, //图标大小
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: colors,
|
||||
width: 0.1, //尾迹线条宽度
|
||||
opacity: 0.5, //尾迹线条透明度
|
||||
curveness: .3 //尾迹线条曲直度
|
||||
}
|
||||
},
|
||||
data: convertToLineData(mapData, geoGpsMap)
|
||||
}
|
||||
]
|
||||
};
|
||||
let chart:EChartsType;
|
||||
const initChart =()=> {
|
||||
let chart = echarts.init(document.getElementById(props.id))
|
||||
chart.setOption(options)
|
||||
return chart
|
||||
}
|
||||
onMounted(()=>{
|
||||
chart = initChart()
|
||||
window.addEventListener('resize',function (){
|
||||
chart&&chart.resize()
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<template>
|
||||
<div class="echarts-map">
|
||||
<map-charts height="100%" width="100%" id="sankey"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup lang="ts">
|
||||
import MapCharts from './components/map/index.vue'
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.echarts-map{
|
||||
height: calc(100vh - 150px);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<template>
|
||||
<div class="echarts-map">
|
||||
<migration-charts height="100%" width="100%" id="migration"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup lang="ts">
|
||||
import MigrationCharts from './components/migration/index.vue'
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.echarts-map{
|
||||
height: calc(100vh - 150px);
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue