echart组件

package-lock.json

@@ -1404,8 +1404,7 @@
     "@types/json-schema": {
       "version": "7.0.8",
       "resolved": "https://registry.nlark.com/@types/json-schema/download/@types/json-schema-7.0.8.tgz?cache=0&sync_timestamp=1625608429445&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40types%2Fjson-schema%2Fdownload%2F%40types%2Fjson-schema-7.0.8.tgz",
-      "integrity": "sha1-7fG/Hb9OBEE8qOWxezt9fVS1mBg=",
-      "dev": true
+      "integrity": "sha1-7fG/Hb9OBEE8qOWxezt9fVS1mBg="
     },
     "@types/mime": {
       "version": "1.3.2",
@@ -1842,6 +1841,63 @@
           "integrity": "sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo=",
           "dev": true
         },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
+          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
         "ssri": {
           "version": "8.0.1",
           "resolved": "https://registry.nlark.com/ssri/download/ssri-8.0.1.tgz",
@@ -1850,6 +1906,28 @@
           "requires": {
             "minipass": "^3.1.1"
           }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
+        "vue-loader-v16": {
+          "version": "npm:vue-loader@16.3.3",
+          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.3.3.tgz",
+          "integrity": "sha512-/1GzCuQ6MRORbC+leKTKoTGtpQt60bYe0gDGEextSteA2OM+v201FPha5jzmjQzVhRcwieZeUvezAtG5a/e5cw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "chalk": "^4.1.0",
+            "hash-sum": "^2.0.0",
+            "loader-utils": "^2.0.0"
+          }
         }
       }
     },
@@ -2181,7 +2259,6 @@
       "version": "6.12.6",
       "resolved": "https://registry.nlark.com/ajv/download/ajv-6.12.6.tgz",
       "integrity": "sha1-uvWmLoArB9l3A0WG+MO69a3ybfQ=",
-      "dev": true,
       "requires": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -2198,8 +2275,7 @@
     "ajv-keywords": {
       "version": "3.5.2",
       "resolved": "https://registry.npm.taobao.org/ajv-keywords/download/ajv-keywords-3.5.2.tgz?cache=0&sync_timestamp=1616882351228&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fajv-keywords%2Fdownload%2Fajv-keywords-3.5.2.tgz",
-      "integrity": "sha1-MfKdpatuANHC0yms97WSlhTVAU0=",
-      "dev": true
+      "integrity": "sha1-MfKdpatuANHC0yms97WSlhTVAU0="
     },
     "alphanum-sort": {
       "version": "1.0.2",
@@ -2678,6 +2754,11 @@
       "integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=",
       "dev": true
     },
+    "batch-processor": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/batch-processor/-/batch-processor-1.0.0.tgz",
+      "integrity": "sha1-dclcMrdI4IUNEMKxaPa9vpiRrOg="
+    },
     "bcrypt-pbkdf": {
       "version": "1.0.2",
       "resolved": "https://registry.npm.taobao.org/bcrypt-pbkdf/download/bcrypt-pbkdf-1.0.2.tgz",
@@ -2702,8 +2783,7 @@
     "big.js": {
       "version": "5.2.2",
       "resolved": "https://registry.nlark.com/big.js/download/big.js-5.2.2.tgz",
-      "integrity": "sha1-ZfCvOC9Xi83HQr2cKB6cstd2gyg=",
-      "dev": true
+      "integrity": "sha1-ZfCvOC9Xi83HQr2cKB6cstd2gyg="
     },
     "binary-extensions": {
       "version": "2.2.0",
@@ -3275,6 +3355,11 @@
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
       "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
     },
+    "claygl": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/claygl/-/claygl-1.3.0.tgz",
+      "integrity": "sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ=="
+    },
     "clean-css": {
       "version": "4.2.3",
       "resolved": "https://registry.nlark.com/clean-css/download/clean-css-4.2.3.tgz?cache=0&sync_timestamp=1624616732831&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fclean-css%2Fdownload%2Fclean-css-4.2.3.tgz",
@@ -4741,6 +4826,31 @@
         "safer-buffer": "^2.1.0"
       }
     },
+    "echarts": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.1.2.tgz",
+      "integrity": "sha512-okUhO4sw22vwZp+rTPNjd/bvTdpug4K4sHNHyrV8NdAncIX9/AarlolFqtJCAYKGFYhUBNjIWu1EznFrSWTFxg==",
+      "requires": {
+        "tslib": "2.0.3",
+        "zrender": "5.1.1"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
+          "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
+        }
+      }
+    },
+    "echarts-gl": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/echarts-gl/-/echarts-gl-2.0.7.tgz",
+      "integrity": "sha512-ZP6BSIEhA4uj4VRphbASV4lfa0Vszp17zMumLo5f48IP6T9zzxRa/fr/UwGaqYMCNh5qbJ8OvWkP28AV7zi06w==",
+      "requires": {
+        "claygl": "^1.2.1",
+        "zrender": "^5.1.1"
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
@@ -4759,6 +4869,14 @@
       "integrity": "sha1-w+oGC6HjbkHIeUOkftLarcVFvis=",
       "dev": true
     },
+    "element-resize-detector": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/element-resize-detector/-/element-resize-detector-1.2.3.tgz",
+      "integrity": "sha512-+dhNzUgLpq9ol5tyhoG7YLoXL3ssjfFW+0gpszXPwRU6NjGr1fVHMEAF8fVzIiRJq57Nre0RFeIjJwI8Nh2NmQ==",
+      "requires": {
+        "batch-processor": "1.0.0"
+      }
+    },
     "element-ui": {
       "version": "2.15.3",
       "resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.15.3.tgz",
@@ -4814,8 +4932,7 @@
     "emojis-list": {
       "version": "3.0.0",
       "resolved": "https://registry.npm.taobao.org/emojis-list/download/emojis-list-3.0.0.tgz",
-      "integrity": "sha1-VXBmIEatKeLpFucariYKvf9Pang=",
-      "dev": true
+      "integrity": "sha1-VXBmIEatKeLpFucariYKvf9Pang="
     },
     "encodeurl": {
       "version": "1.0.2",
@@ -5470,8 +5587,7 @@
     "fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npm.taobao.org/fast-deep-equal/download/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha1-On1WtVnWy8PrUSMlJE5hmmXGxSU=",
-      "dev": true
+      "integrity": "sha1-On1WtVnWy8PrUSMlJE5hmmXGxSU="
     },
     "fast-diff": {
       "version": "1.2.0",
@@ -5519,8 +5635,7 @@
     "fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npm.taobao.org/fast-json-stable-stringify/download/fast-json-stable-stringify-2.1.0.tgz",
-      "integrity": "sha1-h0v2nG9ATCtdmcSBNBOZ/VWJJjM=",
-      "dev": true
+      "integrity": "sha1-h0v2nG9ATCtdmcSBNBOZ/VWJJjM="
     },
     "fast-levenshtein": {
       "version": "2.0.6",
@@ -7136,8 +7251,7 @@
     "json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npm.taobao.org/json-schema-traverse/download/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha1-afaofZUTq4u4/mO9sJecRI5oRmA=",
-      "dev": true
+      "integrity": "sha1-afaofZUTq4u4/mO9sJecRI5oRmA="
     },
     "json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
@@ -7169,7 +7283,6 @@
       "version": "2.2.0",
       "resolved": "https://registry.npm.taobao.org/json5/download/json5-2.2.0.tgz",
       "integrity": "sha1-Lf7+cgxrpSXZ69kJlQ8FFTFsiaM=",
-      "dev": true,
       "requires": {
         "minimist": "^1.2.5"
       }
@@ -7212,6 +7325,11 @@
       "integrity": "sha1-B8BQNKbDSfoG4k+jWqdttFgM5N0=",
       "dev": true
     },
+    "klona": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.4.tgz",
+      "integrity": "sha512-ZRbnvdg/NxqzC7L9Uyqzf4psi1OM4Cuc+sJAkQPjO6XkQIJTNbfK2Rsmbw8fx1p2mkZdp2FZYo2+LwXYY/uwIA=="
+    },
     "launch-editor": {
       "version": "2.2.1",
       "resolved": "https://registry.npm.taobao.org/launch-editor/download/launch-editor-2.2.1.tgz",
@@ -7283,21 +7401,34 @@
       }
     },
     "less-loader": {
-      "version": "5.0.0",
-      "resolved": "https://registry.nlark.com/less-loader/download/less-loader-5.0.0.tgz",
-      "integrity": "sha1-SY3eOmxsT4h0WO6e0/CGoSrRtGY=",
-      "dev": true,
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/less-loader/-/less-loader-7.3.0.tgz",
+      "integrity": "sha512-Mi8915g7NMaLlgi77mgTTQvK022xKRQBIVDSyfl3ErTuBhmZBQab0mjeJjNNqGbdR+qrfTleKXqbGI4uEFavxg==",
       "requires": {
-        "clone": "^2.1.1",
-        "loader-utils": "^1.1.0",
-        "pify": "^4.0.1"
+        "klona": "^2.0.4",
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
       },
       "dependencies": {
-        "clone": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npm.taobao.org/clone/download/clone-2.1.2.tgz",
-          "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=",
-          "dev": true
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "schema-utils": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
+          "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+          "requires": {
+            "@types/json-schema": "^7.0.8",
+            "ajv": "^6.12.5",
+            "ajv-keywords": "^3.5.2"
+          }
         }
       }
     },
@@ -9398,8 +9529,7 @@
     "punycode": {
       "version": "2.1.1",
       "resolved": "https://registry.npm.taobao.org/punycode/download/punycode-2.1.1.tgz",
-      "integrity": "sha1-tYsBCsQMIsVldhbI0sLALHv0eew=",
-      "dev": true
+      "integrity": "sha1-tYsBCsQMIsVldhbI0sLALHv0eew="
     },
     "q": {
       "version": "1.5.1",
@@ -11395,7 +11525,6 @@
       "version": "4.4.1",
       "resolved": "https://registry.npm.taobao.org/uri-js/download/uri-js-4.4.1.tgz",
       "integrity": "sha1-mxpSWVIlhZ5V9mnZKPiMbFfyp34=",
-      "dev": true,
       "requires": {
         "punycode": "^2.1.0"
       }
@@ -11618,87 +11747,6 @@
         }
       }
     },
-    "vue-loader-v16": {
-      "version": "npm:vue-loader@16.3.3",
-      "resolved": "https://registry.nlark.com/vue-loader/download/vue-loader-16.3.3.tgz?cache=0&sync_timestamp=1626830452707&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fvue-loader%2Fdownload%2Fvue-loader-16.3.3.tgz",
-      "integrity": "sha1-5EDk6xJ4bhYTi12YthIgjynd9TI=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "chalk": "^4.1.0",
-        "hash-sum": "^2.0.0",
-        "loader-utils": "^2.0.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.nlark.com/ansi-styles/download/ansi-styles-4.3.0.tgz",
-          "integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.1",
-          "resolved": "https://registry.nlark.com/chalk/download/chalk-4.1.1.tgz",
-          "integrity": "sha1-yAs/qyi/Y3HmhjMl7uZ+YYt35q0=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz",
-          "integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz",
-          "integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
-          "dev": true,
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.nlark.com/has-flag/download/has-flag-4.0.0.tgz?cache=0&sync_timestamp=1626715907927&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fhas-flag%2Fdownload%2Fhas-flag-4.0.0.tgz",
-          "integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
-          "dev": true,
-          "optional": true
-        },
-        "loader-utils": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz",
-          "integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.nlark.com/supports-color/download/supports-color-7.2.0.tgz?cache=0&sync_timestamp=1626703400240&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz",
-          "integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
     "vue-ref": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/vue-ref/-/vue-ref-2.0.0.tgz",
@@ -12643,6 +12691,21 @@
           "dev": true
         }
       }
+    },
+    "zrender": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.1.1.tgz",
+      "integrity": "sha512-oeWlmUZPQdS9f5hK4pV21tHPqA3wgQ7CkKkw7l0CCBgWlJ/FP+lRgLFtUBW6yam4JX8y9CdHJo1o587VVrbcoQ==",
+      "requires": {
+        "tslib": "2.0.3"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
+          "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
+        }
+      }
     }
   }
 }

package.json

@@ -15,7 +15,10 @@
     "mapbox-gl": "1.13.1",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
-    "vuex": "^3.4.0"
+    "vuex": "^3.4.0",
+    "echarts": "^5.1.1",
+    "echarts-gl": "^2.0.4",
+    "element-resize-detector": "^1.2.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

src/assets/css/index.less

@@ -32,7 +32,58 @@ i {
     border-color: @font-color  !important;
   }
 }
+.el-picker-panel {
+  box-shadow: 0 2px 12px 0 rgba(0, 100, 200, 0.9)!important;
+  background: rgba(0, 100, 200, 0.45)!important;
+  border-color: @main-color;
+  color: @font-color!important;
+
+  .el-picker-panel__icon-btn {
+    color: @active-color!important;
+  }
+
+  .el-date-picker__header-label {
+    color: inherit;
+    font-size: 1.7vh!important;
+  }
+
+  table {
+    td {
+      .cell {
+        font-size: 1.3vh!important;
+        color: inherit;
+      }
+    }
+
+    td.current {
+      color: @active-color!important;
+    }
+  }
+}
+.el-picker-panel__body {
+  background: rgba(0, 100, 200, 0.45)!important;
+}
 
+.el-date-picker {
+  color: #fff!important;
+}
+.el-input__inner__picker {
+  cursor: pointer!important;
+  position: relative!important;
+  padding: 0!important;
+  font-size: 36px!important;
+  color: @font-light-color!important;
+  font-family: timeFont!important;
+  height: 100%!important;
+  line-height: 45px!important;
+  box-shadow: 0 0px 8px 0 rgba(0, 100, 200, 0.9)!important;
+  padding: 0 25px!important;
+  border: 0.1vh solid @main-color!important;
+  border-radius: 25px!important;
+  &:hover {
+    border-color: #fff!important;
+  }
+}
 .el-button.active {
   background-color: @active-color  !important;
   border-color: @font-color  !important;
@@ -274,65 +325,9 @@ i {
   color: @main-color;
 }
 
-// 边框修饰性样式
-.border {
-  position: absolute;
-  width: 1.8vh;
-  height: 1.8vh;
-  background-color: transparent;
-  border: 0.3vh solid @border-decora-color;
-  border-radius: 0.2vh;
-}
 
-.border-left-top {
-  border-bottom: none;
-  border-right: none;
-  left: 0;
-  top: 0;
-}
 
-.border-right-top {
-  border-bottom: none;
-  border-left: none;
-  right: 0;
-  top: 0;
-}
-
-.border-left-bottom {
-  border-top: none;
-  border-right: none;
-  left: 0;
-  bottom: 0;
-}
-
-.border-right-bottom {
-  border-top: none;
-  border-left: none;
-  right: 0;
-  bottom: 0;
-}
 
-// 各模块简单基本样式
-.part {
-  height: 100%;
-  padding: 1.2vh;
-  box-sizing: border-box;
-  position: relative;
-  background: @linear-color;
-
-  .title {
-    text-align: left;
-    padding-top: 0.5vh;
-    padding-left: 0.5vh;
-    font-size: 1.8vh;
-    color: #8fccff;
-
-    i {
-      color: #aedaff;
-      margin-right: 0.2vh;
-    }
-  }
-}
 
 // 地区选择列表
 .el-tag {

src/components/DateWidget/DateWidget.vue

@@ -8,6 +8,7 @@
       value-format="yyyy"
       :clearable="false"
       @change="clearPlay"
+      :picker-options="pickerOptions"
     ></el-date-picker>
     <label class="el-input__inner__picker" @click="showDatePicker">
       {{ curTime }}
@@ -23,32 +24,55 @@
 export default {
   data() {
     return {
-      dateLevel: 'year',
-      curTime: '',
-      play: false
+      curTime: '2009',
+      play: false,
+      range: ['2008', '2013'],
+      pickerOptions: {
+        disabledDate(time) {
+          return (
+            new Date('2008').getTime() > time.getTime() ||
+            new Date('2015').getTime() < time.getTime()
+          )
+        }
+      }
     }
   },
   methods: {
     showDatePicker() {
       console.log('asdfsadf')
+
+      console.log(this.$refs.datePicker.focus)
       this.$refs.datePicker.focus()
-      console.log(this.$refs.datePicker)
     },
     // 清除播放事件
-    clearPlay(e) {
-      console.log(e)
+    clearPlay() {
       this.play = false
-      // clearInterval(this.timer)
+      clearInterval(this.timer)
     },
     timePlay() {
-      console.log('ss')
+      this.play = !this.play
+      if (this.play) {
+        this.timer = setInterval(() => {
+          console.log(this.curTime)
+          if (Number(this.curTime) < Number(this.range[1])) {
+            this.curTime++
+          } else {
+            this.clearPlay()
+          }
+        }, 1000)
+      } else {
+        this.clearPlay()
+      }
     }
   }
 }
 </script>
 
-<style lang="less" scoped>
-@import url('../../assets/css/public.less');
+<style lang="less">
+// @import url('../../assets/css/public.less');
+/deep/.el-picker-panel__body {
+  background: rgba(0, 100, 200, 0.45);
+}
 .time-info {
   cursor: pointer;
   flex-direction: row;
@@ -67,54 +91,6 @@ export default {
     bottom: 0;
     width: 0;
   }
-  /deep/.el-date-picker {
-    color: #fff;
-  }
-  .el-input__inner__picker {
-    cursor: pointer;
-    position: relative;
-    padding: 0;
-    font-size: 36px;
-    color: @font-light-color;
-    font-family: timeFont;
-    height: 100%;
-    line-height: 45px;
-    box-shadow: 0 0px 8px 0 rgba(0, 100, 200, 0.9);
-    padding: 0 25px;
-    border: 0.1vh solid @main-color;
-    border-radius: 25px;
-    &:hover {
-      border-color: #fff;
-    }
-  }
-  /deep/.el-picker-panel {
-    box-shadow: 0 2px 12px 0 rgba(0, 100, 200, 0.9);
-    background: rgba(0, 100, 200, 0.45);
-    border-color: @main-color;
-    color: @font-color;
-
-    .el-picker-panel__icon-btn {
-      color: @active-color;
-    }
-
-    .el-date-picker__header-label {
-      color: inherit;
-      font-size: 1.7vh;
-    }
-
-    table {
-      td {
-        .cell {
-          font-size: 1.3vh;
-          color: inherit;
-        }
-      }
-
-      td.current {
-        color: @active-color;
-      }
-    }
-  }
 
   i {
     cursor: pointer;

src/components/Echart/Echarts.vue

+<template>
+  <div class="chart" ref="chart"></div>
+</template>
+
+<script>
+// import echarts from "echarts";
+import * as echarts from "echarts";
+import elementResizeDetectorMaker from "element-resize-detector";
+
+export default {
+  name: "Echarts2D",
+  props: {
+    options: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      chart: null,
+      functionStack: [],
+      canDo: false,
+    };
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$refs.chart);
+      let erd = elementResizeDetectorMaker();
+      erd.listenTo(this.$refs.chart, () => {
+        this.chart.resize();
+      });
+      this.functionStack.forEach((e) => {
+        e.func(e.param);
+      });
+      this.canDo = true;
+    },
+    reloadChart() {
+      this.$nextTick(() => {
+        if (this.canDo) {
+          this.chart.setOption(this.options);
+        } else {
+          this.chart.setOption(this.options);
+        }
+      });
+    },
+  },
+  watch: {
+    options: {
+      handler() {
+        this.reloadChart();
+      },
+      deep: true,
+    },
+  },
+  async mounted() {
+    await this.initChart();
+    let that = this;
+
+    // 扩大echarts点击面的大小，即点击灰色面也可以触发
+    that.chart.getZr().on("click", function (params) {
+      const pointInPixel = [params.offsetX, params.offsetY];
+      if (that.chart.containPixel("grid", pointInPixel)) {
+        /*此处添加具体执行代码*/
+        const pointInGrid = that.chart.convertFromPixel(
+          { seriesIndex: 0 },
+          pointInPixel
+        );
+        //X轴序号
+        const xIndex = pointInGrid[0];
+
+        //获取当前图表的option
+        const op = that.chart.getOption();
+        let name = "";
+        //获得图表中我们想要的数据 判断数据在x轴还是y轴
+        if (op.xAxis[0].type === "category") {
+          name = op.xAxis[0].data[xIndex];
+        } else {
+          name = op.yAxis[0].data[xIndex];
+        }
+
+        that.$emit("barClick", { name, data: params });
+      }
+    });
+
+    this.reloadChart();
+  },
+};
+</script>
+
+<style scoped>
+.chart {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/components/PartInfo/PartInfo.vue

+<template>
+  <div class="part info">
+    <label class="title" for="title">
+      <i class="el-icon-s-flag"></i>
+      {{ param.title }}
+    </label>
+    <label class="main" for="pm">
+      {{ param.value }}
+      <!-- <label class="sub">吨</label> -->
+    </label>
+    <div class="border border-left-top"></div>
+    <div class="border border-right-top"></div>
+    <div class="border border-left-bottom"></div>
+    <div class="border border-right-bottom"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    param: {
+      type: Object
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+</style>
\ No newline at end of file

src/components/PartWrap/PartWrap.vue

+<template>
+  <div class="part info">
+    <label class="title" for="title">
+      <i class="el-icon-s-flag"></i>
+      sdf
+    </label>
+    <div>
+      <slot></slot>
+    </div>
+    <div class="border border-left-top"></div>
+    <div class="border border-right-top"></div>
+    <div class="border border-left-bottom"></div>
+    <div class="border border-right-bottom"></div>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="less" scoped>
+// 各模块简单基本样式
+.part {
+  height: 100%;
+  padding: 1.2vh;
+  box-sizing: border-box;
+  position: relative;
+  background: @linear-color;
+
+  .title {
+    text-align: left;
+    padding-top: 0.5vh;
+    padding-left: 0.5vh;
+    font-size: 1.8vh;
+    color: #8fccff;
+
+    i {
+      color: #aedaff;
+      margin-right: 0.2vh;
+    }
+  }
+}
+// 边框修饰性样式
+.border {
+  position: absolute;
+  width: 1.8vh;
+  height: 1.8vh;
+  background-color: transparent;
+  border: 0.3vh solid @border-decora-color;
+  border-radius: 0.2vh;
+}
+
+.border-left-top {
+  border-bottom: none;
+  border-right: none;
+  left: 0;
+  top: 0;
+}
+
+.border-right-top {
+  border-bottom: none;
+  border-left: none;
+  right: 0;
+  top: 0;
+}
+
+.border-left-bottom {
+  border-top: none;
+  border-right: none;
+  left: 0;
+  bottom: 0;
+}
+
+.border-right-bottom {
+  border-top: none;
+  border-left: none;
+  right: 0;
+  bottom: 0;
+}
+.info {
+  display: flex;
+  flex-direction: column;
+  padding: 1.5vh 0.5vh;
+  position: relative;
+  // width: 15vw;
+  margin-bottom: 1vh;
+  label {
+    text-align: center;
+    line-height: 90px;
+    height: 90px;
+    .sub {
+      font-size: 14px;
+    }
+  }
+  label.title {
+    // width: 100%;
+    // font-size: 1.4vh;
+    padding-left: 10px;
+    height: 2vh;
+    line-height: 1.8vh;
+    color: @main-color;
+    text-align: left;
+    padding-top: 0.5vh;
+    // padding-left: 0.5vh;
+    font-size: 1.8vh;
+    color: #8fccff;
+  }
+  label.main {
+    text-align: left;
+    margin-left: 32px;
+    color: @font-light-color;
+    font-family: timeFont;
+    font-size: 47px;
+  }
+}
+</style>

src/pages/methaneUpgrade/index.vue

@@ -2,34 +2,80 @@
   <!-- 农村沼气转型升级 -->
   <div class="contain">
     <DateWidget class="date-widget" />
+    <!-- <PartInfo class="part-info" :param="{ title: 'adf', value: 'adf' }" /> -->
+    <div v-show="false" style="width: 100%; height: 400px">
+      <Echart ref="echart3" :options="echart3_option" />
+    </div>
+    <div class="echartqq">
+      <PartWrap
+        ><div style="width: 600px; height: 400px">
+          <Echart ref="echart3" :options="echart3_option" /></div
+      ></PartWrap>
+    </div>
+    <div>
+      <PartWrap><div style="width: 100; height: 100px">asdf</div></PartWrap>
+    </div>
   </div>
 </template>
 
 <script>
-import DateWidget from "../../components/DateWidget/DateWidget.vue"
+import DateWidget from '../../components/DateWidget/DateWidget.vue'
+// import PartInfo from '../../components/PartInfo/PartInfo.vue'
+import Echart from '../../components/Echart/Echarts.vue'
+import PartWrap from '../../components/PartWrap/PartWrap.vue'
 export default {
   name: 'MethaneUpgrade',
   data() {
     return {
       dateLevel: 'year',
       curTime: '',
-      play: false
+      play: false,
+      echart3_option: {
+        xAxis: {
+          type: 'category',
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            data: [150, 230, 224, 218, 135, 147, 260],
+            type: 'line'
+          }
+        ]
+      }
     }
   },
   components: {
-    DateWidget
+    DateWidget,
+    // PartInfo,
+    Echart,
+    PartWrap
   },
-  methods: {
-
-  }
+  methods: {}
 }
 </script>
 
 <style lang="less" scoped>
 // @import url('../../assets/css/public.less');
-.date-widget{
-  position: absolute;
-  top: 12vh;
+.contain {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  .date-widget {
+    position: absolute;
+    top: 12vh;
+  }
+  // .part-info {
+  //   position: absolute;
+  //   top: 32vh;
+  // }
+  .echartqq {
+    position: absolute;
+    bottom: 3vh;
+    left: 3vh;
+    z-index: 21;
+  }
 }
-
 </style>
\ No newline at end of file

src/views/Home.vue

@@ -10,10 +10,7 @@
           <div class="a-menu" @click="$router.push('/methane_upgrade')">
             沼气
           </div>
-          <div
-            class="a-menu"
-            @click="$router.push('/biomass_energy_warm')"
-          >
+          <div class="a-menu" @click="$router.push('/biomass_energy_warm')">
             生物
           </div>
           <div
@@ -56,10 +53,14 @@ export default {
 </script>
 
 <style scoped lang="less">
-@import url('../assets/css/public.less');
+// @import url('../assets/css/public.less');
 .body {
   width: 100%;
   height: 100%;
+  .content-cont {
+    width: 100%;
+    height: 100%;
+  }
   .contain {
     position: relative;
     .header {
@@ -102,8 +103,8 @@ export default {
         align-items: center;
         margin-right: 40px;
         .a-menu {
-          width:50px ;
-          height:50px ;
+          width: 50px;
+          height: 50px;
           background-color: @main-color;
           margin-right: 20px;
           border-radius: 50%;