diff --git a/package-lock.json b/package-lock.json
index 5d15efb..8314769 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1315,6 +1315,30 @@
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA=="
     },
+    "bl": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
+      "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
+      "dev": true,
+      "requires": {
+        "buffer": "^5.5.0",
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.4.0"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+          "dev": true,
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
+          }
+        }
+      }
+    },
     "boolbase": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
@@ -1395,6 +1419,16 @@
         "update-browserslist-db": "^1.0.0"
       }
     },
+    "buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "dev": true,
+      "requires": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
+      }
+    },
     "buffer-equal": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/buffer-equal/-/buffer-equal-0.0.1.tgz",
@@ -1555,6 +1589,16 @@
       "integrity": "sha512-hv95iU5uXPbK83mjrJKuZyFM/LBAoCV/XhVGkS5Je6tl7sxr6A0ITMw5WoRV46/UaJ46Nllm3Xt7IaJhXTIkzw==",
       "dev": true
     },
+    "commist": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/commist/-/commist-1.1.0.tgz",
+      "integrity": "sha512-rraC8NXWOEjhADbZe9QBNzLAN5Q3fsTPQtBV+fEVj6xKIgDgNiEVE6ZNfHpZOqfQ21YUzfVNUXLOEZquYvQPPg==",
+      "dev": true,
+      "requires": {
+        "leven": "^2.1.0",
+        "minimist": "^1.1.0"
+      }
+    },
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -2029,6 +2073,31 @@
         "readable-stream": "^2.0.2"
       }
     },
+    "duplexify": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-4.1.2.tgz",
+      "integrity": "sha512-fz3OjcNCHmRP12MJoZMPglx8m4rrFP8rovnk4vT8Fs+aonZoCwGg10dSsQsfP/E62eZcPTMSMP6686fu9Qlqtw==",
+      "dev": true,
+      "requires": {
+        "end-of-stream": "^1.4.1",
+        "inherits": "^2.0.3",
+        "readable-stream": "^3.1.1",
+        "stream-shift": "^1.0.0"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+          "dev": true,
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
+          }
+        }
+      }
+    },
     "earcut": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.3.tgz",
@@ -2040,6 +2109,24 @@
       "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
       "dev": true
     },
+    "echarts": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.4.0.tgz",
+      "integrity": "sha512-uPsO9VRUIKAdFOoH3B0aNg7NRVdN7aM39/OjovjO9MwmWsAkfGyeXJhK+dbRi51iDrQWliXV60/XwLA7kg3z0w==",
+      "dev": true,
+      "requires": {
+        "tslib": "2.3.0",
+        "zrender": "5.4.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+          "dev": true
+        }
+      }
+    },
     "electron-to-chromium": {
       "version": "1.4.167",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.167.tgz",
@@ -2052,6 +2139,15 @@
       "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
       "dev": true
     },
+    "end-of-stream": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
+      "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
+      "dev": true,
+      "requires": {
+        "once": "^1.4.0"
+      }
+    },
     "epic-spinners": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/epic-spinners/-/epic-spinners-2.0.0.tgz",
@@ -2855,6 +2951,29 @@
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
       "dev": true
     },
+    "help-me": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/help-me/-/help-me-3.0.0.tgz",
+      "integrity": "sha512-hx73jClhyk910sidBB7ERlnhMlFsJJIBqSVMFDwPN8o2v9nmp5KgLq1Xz1Bf1fCMMZ6mPrX159iG0VLy/fPMtQ==",
+      "dev": true,
+      "requires": {
+        "glob": "^7.1.6",
+        "readable-stream": "^3.6.0"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+          "dev": true,
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
+          }
+        }
+      }
+    },
     "human-signals": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-3.0.1.tgz",
@@ -3027,6 +3146,12 @@
       "integrity": "sha512-L3BJStEf5NAqNuzrpfbN71dp43mYIcBUlCRea/vdyv5dW/AYa1d4bpelko4SHdY3I6eN9Wzyasxirj1/vv5kmg==",
       "dev": true
     },
+    "js-sdsl": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.1.4.tgz",
+      "integrity": "sha512-Y2/yD55y5jteOAmY50JbUZYwk3CP3wnLPEZnlR1w9oKhITrBEtAxwuWKebFf8hMrPMgbYwFoWK/lH2sBkErELw==",
+      "dev": true
+    },
     "js-yaml": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
@@ -3132,6 +3257,12 @@
         }
       }
     },
+    "leven": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/leven/-/leven-2.1.0.tgz",
+      "integrity": "sha512-nvVPLpIHUxCUoRLrFqTgSxXJ614d8AgQoWl7zPe/2VadE8+1dpU3LBhowRuBAcuwruWtOdD8oYC9jDNJjXDPyA==",
+      "dev": true
+    },
     "levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -3428,6 +3559,67 @@
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
       "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q=="
     },
+    "mqtt": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/mqtt/-/mqtt-4.3.7.tgz",
+      "integrity": "sha512-ew3qwG/TJRorTz47eW46vZ5oBw5MEYbQZVaEji44j5lAUSQSqIEoul7Kua/BatBW0H0kKQcC9kwUHa1qzaWHSw==",
+      "dev": true,
+      "requires": {
+        "commist": "^1.0.0",
+        "concat-stream": "^2.0.0",
+        "debug": "^4.1.1",
+        "duplexify": "^4.1.1",
+        "help-me": "^3.0.0",
+        "inherits": "^2.0.3",
+        "lru-cache": "^6.0.0",
+        "minimist": "^1.2.5",
+        "mqtt-packet": "^6.8.0",
+        "number-allocator": "^1.0.9",
+        "pump": "^3.0.0",
+        "readable-stream": "^3.6.0",
+        "reinterval": "^1.1.0",
+        "rfdc": "^1.3.0",
+        "split2": "^3.1.0",
+        "ws": "^7.5.5",
+        "xtend": "^4.0.2"
+      },
+      "dependencies": {
+        "concat-stream": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-2.0.0.tgz",
+          "integrity": "sha512-MWufYdFw53ccGjCA+Ol7XJYpAlW6/prSMzuPOTRnJGcGzuhLn4Scrz7qf6o8bROZ514ltazcIFJZevcfbo0x7A==",
+          "dev": true,
+          "requires": {
+            "buffer-from": "^1.0.0",
+            "inherits": "^2.0.3",
+            "readable-stream": "^3.0.2",
+            "typedarray": "^0.0.6"
+          }
+        },
+        "readable-stream": {
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+          "dev": true,
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
+          }
+        }
+      }
+    },
+    "mqtt-packet": {
+      "version": "6.10.0",
+      "resolved": "https://registry.npmjs.org/mqtt-packet/-/mqtt-packet-6.10.0.tgz",
+      "integrity": "sha512-ja8+mFKIHdB1Tpl6vac+sktqy3gA8t9Mduom1BA75cI+R9AHnZOiaBQwpGiWnaVJLDGRdNhQmFaAqd7tkKSMGA==",
+      "dev": true,
+      "requires": {
+        "bl": "^4.0.2",
+        "debug": "^4.1.1",
+        "process-nextick-args": "^2.0.1"
+      }
+    },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -3504,6 +3696,16 @@
         "boolbase": "^1.0.0"
       }
     },
+    "number-allocator": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/number-allocator/-/number-allocator-1.0.12.tgz",
+      "integrity": "sha512-sGB0qoQGmKimery9JubBQ9pQUr1V/LixJAk3Ygp7obZf6mpSXime8d7XHEobbIimkdZpgjkNlLt6G7LPEWFYWg==",
+      "dev": true,
+      "requires": {
+        "debug": "^4.3.1",
+        "js-sdsl": "4.1.4"
+      }
+    },
     "object-inspect": {
       "version": "1.12.2",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
@@ -3721,6 +3923,16 @@
       "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz",
       "integrity": "sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw=="
     },
+    "pump": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
+      "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
+      "dev": true,
+      "requires": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
     "punycode": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
@@ -3796,6 +4008,18 @@
       "resolved": "https://registry.npmjs.org/regression/-/regression-2.0.1.tgz",
       "integrity": "sha512-A4XYsc37dsBaNOgEjkJKzfJlE394IMmUPlI/p3TTI9u3T+2a+eox5Pr/CPUqF0eszeWZJPAc6QkroAhuUpWDJQ=="
     },
+    "reinterval": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reinterval/-/reinterval-1.1.0.tgz",
+      "integrity": "sha512-QIRet3SYrGp0HUHO88jVskiG6seqUGC5iAG7AwI/BV4ypGcuqk9Du6YQBUOUqm9c8pw1eyLoIaONifRua1lsEQ==",
+      "dev": true
+    },
+    "resize-detector": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/resize-detector/-/resize-detector-0.3.0.tgz",
+      "integrity": "sha512-R/tCuvuOHQ8o2boRP6vgx8hXCCy87H1eY9V5imBYeVNyNVpuL9ciReSccLj2gDcax9+2weXy3bc8Vv+NRXeEvQ==",
+      "dev": true
+    },
     "resolve": {
       "version": "1.22.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
@@ -4026,6 +4250,28 @@
       "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
       "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
     },
+    "split2": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/split2/-/split2-3.2.2.tgz",
+      "integrity": "sha512-9NThjpgZnifTkJpzTZ7Eue85S49QwpNhZTq6GRJwObb6jnLFNGB7Qm73V5HewTROPyxD0C29xqmaI68bQtV+hg==",
+      "dev": true,
+      "requires": {
+        "readable-stream": "^3.0.0"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+          "dev": true,
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
+          }
+        }
+      }
+    },
     "ssf": {
       "version": "0.11.2",
       "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz",
@@ -4073,6 +4319,12 @@
         }
       }
     },
+    "stream-shift": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.1.tgz",
+      "integrity": "sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==",
+      "dev": true
+    },
     "string-argv": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.1.tgz",
@@ -4352,6 +4604,16 @@
       "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.4.tgz",
       "integrity": "sha512-KP4lq9uSz0KZbaqCllRhnxMV3mYRsRWJfdsAhZyt5bV5O1RTpoeDptBRV9NOa/JgOpfaA9ane88VF7OjWNK/DA=="
     },
+    "vue-echarts": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/vue-echarts/-/vue-echarts-6.2.3.tgz",
+      "integrity": "sha512-xHzUvgsgk/asJTcNa8iVVwoovZU3iEUHvmBa3bzbiP3Y6OMxM1YXsoWOKVmVVaUusGs4ob4pSwjwNy2FemAz9w==",
+      "dev": true,
+      "requires": {
+        "resize-detector": "^0.3.0",
+        "vue-demi": "^0.13.2"
+      }
+    },
     "vue-eslint-parser": {
       "version": "8.3.0",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz",
@@ -4512,6 +4774,12 @@
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
       "dev": true
     },
+    "ws": {
+      "version": "7.5.9",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
+      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
+      "dev": true
+    },
     "xlsx": {
       "version": "0.18.5",
       "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.18.5.tgz",
@@ -4575,6 +4843,23 @@
           "dev": true
         }
       }
+    },
+    "zrender": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.4.0.tgz",
+      "integrity": "sha512-rOS09Z2HSVGFs2dn/TuYk5BlCaZcVe8UDLLjj1ySYF828LATKKdxuakSZMvrDz54yiKPDYVfjdKqcX8Jky3BIA==",
+      "dev": true,
+      "requires": {
+        "tslib": "2.3.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+          "dev": true
+        }
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 23c09ea..36f8420 100644
--- a/package.json
+++ b/package.json
@@ -52,16 +52,19 @@
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-typescript": "^10.0.0",
     "autoprefixer": "^10.4.4",
+    "echarts": "^5.4.0",
     "eslint": "^8.13.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-vue": "^8.7.0",
     "husky": "^8.0.1",
     "lint-staged": "^13.0.1",
+    "mqtt": "^4.3.7",
     "postcss": "^8.4.12",
     "prettier": "^2.6.2",
     "typescript": "^4.5.4",
     "vite": "^2.9.9",
     "vite-plugin-windicss": "^1.8.8",
+    "vue-echarts": "^6.2.3",
     "vue-eslint-parser": "^8.3.0",
     "vue-tsc": "^1.0.10",
     "windicss": "^3.5.6"
diff --git a/src/composables/utils/useMqtt.ts b/src/composables/utils/useMqtt.ts
new file mode 100644
index 0000000..50a161b
--- /dev/null
+++ b/src/composables/utils/useMqtt.ts
@@ -0,0 +1,31 @@
+import MQTT from '@/utils/mqtt'
+import type { OnMessageCallback } from 'mqtt'
+import { onUnmounted, ref } from 'vue'
+
+export default function useMqtt() {
+  const PublicMqtt = ref<MQTT | null>(null)
+
+  const startMqtt = (val: string, callback: OnMessageCallback) => {
+    // set mqtt topic
+    PublicMqtt.value = new MQTT(val)
+    // init mqtt
+    PublicMqtt.value.init()
+    // link mqtt
+    PublicMqtt.value.link()
+    getMessage(callback)
+  }
+  const getMessage = (callback: OnMessageCallback) => {
+    // PublicMqtt.value?.client.on('message', callback);
+    PublicMqtt.value?.get(callback)
+  }
+  onUnmounted(() => {
+    if (PublicMqtt.value) {
+      PublicMqtt.value.unsubscribes()
+      PublicMqtt.value.over()
+    }
+  })
+
+  return {
+    startMqtt,
+  }
+}
diff --git a/src/main.ts b/src/main.ts
index 9211494..9a55156 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -9,6 +9,36 @@ import vuesticGlobalConfig from './services/vuestic-ui/global-config'
 import App from './App.vue'
 import 'virtual:windi.css'
 
+// import ECharts modules
+import ECharts from 'vue-echarts'
+import { use } from 'echarts/core'
+// import ECharts modules manually to reduce bundle size
+import { CanvasRenderer } from 'echarts/renderers'
+import { LineChart, BarChart, PieChart } from 'echarts/charts'
+import {
+  GridComponent,
+  TooltipComponent,
+  TitleComponent,
+  LegendComponent,
+  DataZoomComponent,
+  ToolboxComponent,
+  BrushComponent,
+} from 'echarts/components'
+// use echarts necessary component
+use([
+  CanvasRenderer,
+  LineChart,
+  PieChart,
+  BarChart,
+  GridComponent,
+  TooltipComponent,
+  TitleComponent,
+  LegendComponent,
+  DataZoomComponent,
+  ToolboxComponent,
+  BrushComponent,
+])
+
 const app = createApp(App)
 
 app.use(stores)
@@ -16,6 +46,8 @@ app.use(router)
 app.use(i18n)
 app.use(createVuestic({ config: vuesticGlobalConfig }))
 
+app.component('EChart', ECharts)
+
 if (import.meta.env.VITE_APP_GTM_ENABLED) {
   app.use(
     createGtm({
diff --git a/src/utils/mqtt.ts b/src/utils/mqtt.ts
new file mode 100644
index 0000000..f2f2293
--- /dev/null
+++ b/src/utils/mqtt.ts
@@ -0,0 +1,61 @@
+import type { MqttClient, OnMessageCallback } from 'mqtt'
+import * as mqtt from 'mqtt/dist/mqtt.min.js'
+
+class MQTT {
+  url: string
+  topic: string
+  client!: MqttClient
+  constructor(topic: string) {
+    this.topic = topic
+    this.url = 'ws://192.168.2.1:8083'
+  }
+
+  // init mqtt
+  init() {
+    const options = {
+      clean: true,
+      clientId: '111',
+      //   password: '111',
+      //   username: '1111',
+      connectTimeout: 4000,
+    }
+    this.client = mqtt.connect(this.url, options)
+    this.client.on('error', (error: any) => {
+      console.log(error)
+    })
+    this.client.on('reconnect', (error: Error) => {
+      console.log(error)
+    })
+  }
+  // unsubscribes
+  unsubscribes() {
+    this.client.unsubscribe(this.topic, (error: Error) => {
+      if (!error) {
+        console.log(this.topic, 'cancel subscribe success')
+      } else {
+        console.log(this.topic, 'cancel subscribe fail')
+      }
+    })
+  }
+  // subscribe
+  link() {
+    this.client.on('connect', () => {
+      this.client.subscribe(this.topic, (error: any) => {
+        if (!error) {
+          console.log('subscribe success')
+        } else {
+          console.log('subscribe fail')
+        }
+      })
+    })
+  }
+  // message callback
+  get(callback: OnMessageCallback) {
+    this.client.on('message', callback)
+  }
+  // close client
+  over() {
+    this.client.end()
+  }
+}
+export default MQTT