@mhg/blog
Version:
1 lines • 97.9 kB
HTML
<!DOCTYPE html><html lang="zh-Hans"><head hexo-theme="https://github.com/volantis-x/hexo-theme-volantis/#6.0.3"><meta name="generator" content="Hexo 8.1.2"><meta name="Volantis" content="6.0.3"><meta charset="utf-8"><meta name="robots" content="noindex,follow"><link rel="canonical" href="https://blog.mhuig.top/notes/Echarts/"><meta http-equiv="x-dns-prefetch-control" content="on"><link rel="dns-prefetch" href="https://static.mhuig.top"><link rel="preconnect" href="https://static.mhuig.top" crossorigin=""><meta name="renderer" content="webkit"><meta name="force-rendering" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"><meta name="HandheldFriendly" content="True"><meta name="mobile-web-app-capable" content="yes"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=5"><meta content="black-translucent" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection"><script>function registerServiceWorker(e){"localhost"!=window.location.hostname&&"serviceWorker"in navigator&&navigator.serviceWorker.register(`${e}`).then((function(e){"localhost"==window.location.hostname&&(e.onupdatefound=function(){var r=e.installing;r.onstatechange=function(){switch(r.state){case"installed":navigator.serviceWorker.controller?console.log("Updated Service Worker."):console.log("Service Worker Sucess!");break;case"redundant":console.log("The installing service worker became redundant.")}}})})).catch((function(e){console.error("Error during service worker registration:",e),"undefined"==typeof swinstallretry&&(swinstallretry=1,registerServiceWorker("/jquery.js"))}))}registerServiceWorker("/jquery.js")</script><link rel="apple-touch-icon" sizes="180x180" href="/lib/favicon/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="/lib/favicon/favicon-32x32.png"><link rel="icon" type="image/png" sizes="192x192" href="/lib/favicon/android-chrome-192x192.png"><link rel="icon" type="image/png" sizes="144x144" href="/lib/favicon/android-chrome-144x144.png"><link rel="icon" type="image/png" sizes="16x16" href="/lib/favicon/favicon-16x16.png"><link rel="manifest" href="/lib/favicon/site.webmanifest"><link rel="mask-icon" href="/lib/favicon/safari-pinned-tab.svg" color="#5bbad5"><meta name="apple-mobile-web-app-title" content="MHuiG Magicland"><meta name="apple-mobile-web-app-status-bar-style" content="black"><meta name="application-name" content="MHuiG Magicland"><meta name="msapplication-TileColor" content="#87ceeb"><meta name="msapplication-TileImage" content="/lib/favicon/mstile-144x144.png"><meta name="theme-color" content="#87ceeb" media="(prefers-color-scheme: light)"><meta name="theme-color" content="#21232f" media="(prefers-color-scheme: dark)"><link href="/opensearch.xml" rel="search" title="MHuiG Magicland" type="application/opensearchdescription+xml"><link rel="sitemap" type="application/xml" title="MHuiG Blog Site Map" href="https://blog.mhuig.top/sitemap.xml"><link rel="author" href="https://mhuig.top"><meta name="author" content="MHuiG"><meta name="creator" content="MHuiG"><link rel="archives" href="https://blog.mhuig.top/archives/"><link rel="preload" href="/css/style.css" as="style"><link rel="preload" href="https://static.mhuig.top/npm/volantis-static@0.0.1660614606622/media/fonts/VarelaRound/VarelaRound-Regular.ttf" as="font" type="font/ttf" crossorigin="anonymous"><link rel="preload" href="https://static.mhuig.top/npm/volantis-static@0.0.1660614606622/media/fonts/VarelaRound/VarelaRound-Regular.ttf" as="font" type="font/ttf" crossorigin="anonymous"><link rel="alternate" href="/atom.xml" title="Magicland" type="application/atom+xml"><link rel="alternate" href="/rss2.xml" title="Magicland" type="application/rss+xml"><title>Echarts-数据可视化技术: Echarts - Magicland</title><meta name="keywords" content="大数据,Echarts, BigData,交互式图表库,可视化配置,动态数据展示,MHuiG, @MHuiG, Blog, 博客, Magicland, 魔法世界"><meta desc="" name="description" content="ECharts是Apache开源的JavaScript数据可视化库，支持折线图、柱状图等50+图表类型，通过JSON配置实现主题切换、动态排序等交互效果。其基于ZRender引擎，支持Canvas/SVG双渲染，适配Web/移动端及Vue/React框架，广泛应用于金融分析、大屏监控等场景。 - MHuiG - Magicland"><meta property="og:type" content="website"><meta property="og:title" content="Magicland"><meta property="og:url" content="https://blog.mhuig.top/notes/Echarts/"><meta property="og:site_name" content="Magicland"><meta property="og:description" content="ECharts是Apache开源的JavaScript数据可视化库，支持折线图、柱状图等50+图表类型，通过JSON配置实现主题切换、动态排序等交互效果。其基于ZRender引擎，支持Canvas/SVG双渲染，适配Web/移动端及Vue/React框架，广泛应用于金融分析、大屏监控等场景。"><meta property="og:locale"><meta property="og:image" content="https://blog.mhuig.top/lib/favicon/android-chrome-192x192.png"><meta property="article:published_time" content="2022-05-10T06:36:00.000Z"><meta property="article:modified_time" content="2025-11-20T10:18:00.000Z"><meta property="article:author" content="MHuiG"><meta property="article:tag" content="BigData"><meta property="article:tag" content="交互式图表库"><meta property="article:tag" content="动态数据展示"><meta property="article:tag" content="可视化配置"><meta name="twitter:card" content="summary"><meta name="twitter:image" content="https://blog.mhuig.top/lib/favicon/android-chrome-192x192.png"><meta name="twitter:creator" content="@iMHuiG"><meta name="twitter:site" content="@iMHuiG"><style>#safearea{display:none}.post-story+.post-story{content-visibility:auto;contain-intrinsic-size:10px 500px}:root{--color-site-body:#87ceeb;--color-site-bg:#87ceeb;--color-site-inner:#555;--color-site-footer:#666;--color-card:#fff;--color-text:#444;--color-block:#f6f6f6;--color-inlinecode:#d56d28;--color-codeblock:#fff7ea;--color-h1:#3a3a3a;--color-h2:#3a3a3a;--color-h3:#333;--color-h4:#444;--color-h5:#555;--color-h6:#666;--color-p:#444;--color-list:#666;--color-list-hl:#1a78c2;--color-meta:#888;--color-read-bkg:#e0d8c8;--color-read-post:#f8f1e2;--color-copyright-bkg:#f5f5f5}*{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;outline:0;margin:0;padding:0}::-webkit-scrollbar{height:4px;width:4px}::-webkit-scrollbar-track-piece{background:0 0}::-webkit-scrollbar-thumb{background:#2196f3;cursor:pointer;border-radius:2px;-webkit-border-radius:2px}::-webkit-scrollbar-thumb:hover{background:#ff5722}html{color:var(--color-text);width:100%;height:100%;font-family:"Varela Round","PingFang SC","Microsoft YaHei",Helvetica,Arial,Menlo,Monaco,monospace,sans-serif;font-size:16px}html>::-webkit-scrollbar{height:4px;width:4px}html>::-webkit-scrollbar-track-piece{background:0 0}html>::-webkit-scrollbar-thumb{background:#2196f3;cursor:pointer;border-radius:2px;-webkit-border-radius:2px}html>::-webkit-scrollbar-thumb:hover{background:#ff5722}body{background-color:var(--color-site-body);text-rendering:optimizelegibility;-webkit-tap-highlight-color:transparent;line-height:1.6;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body.modal-active{overflow:hidden}@media screen and (max-width:680px){body.modal-active{position:fixed;top:0;right:0;bottom:0;left:0}}a{color:#2196f3;cursor:pointer;text-decoration:none;transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all 0.28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease}a:hover{color:#ff5722}a:active,a:hover{outline:0}ol,ul{padding-left:0}ol li,ul li{list-style:none}header{display:-webkit-box;display:-moz-box;display:block}img{border:0;background:0 0;max-width:100%}svg:not(:root){overflow:hidden}hr{-moz-box-sizing:content-box;box-sizing:content-box;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;height:0;border:0;border-radius:1px;-webkit-border-radius:1px;border-bottom:1px solid rgba(68,68,68,.1)}button,input{color:inherit;font:inherit;margin:0}button{overflow:visible;text-transform:none;-webkit-appearance:button;cursor:pointer}@supports (backdrop-filter:blur(20px)){.blur{background:rgba(255,255,255,.9)!important;backdrop-filter:saturate(200%) blur(20px)}}.shadow{box-shadow:0 1px 2px 0 rgba(0,0,0,.1);-webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,.1)}.shadow.floatable{transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all 0.28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease}.shadow.floatable:hover{box-shadow:0 2px 4px 0 rgba(0,0,0,.1),0 4px 8px 0 rgba(0,0,0,.1),0 8px 16px 0 rgba(0,0,0,.1);-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.1),0 4px 8px 0 rgba(0,0,0,.1),0 8px 16px 0 rgba(0,0,0,.1)}#l_cover{min-height:64px}.cover-wrapper{top:0;left:0;max-width:100%;height:100vh;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;display:flex;flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-khtml-flex-wrap:nowrap;-moz-flex-wrap:nowrap;-o-flex-wrap:nowrap;-ms-flex-wrap:nowrap;-webkit-box-direction:normal;-moz-box-direction:normal;-webkit-box-orient:vertical;-moz-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;align-items:center;align-self:center;align-content:center;color:var(--color-site-inner);padding:0 16px;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;position:relative;overflow:hidden;margin-bottom:-100px}.cover-wrapper .cover-bg{position:absolute;width:100%;height:100%;background-position:center;background-size:cover;-webkit-background-size:cover;-moz-background-size:cover}.cover-wrapper .cover-bg.lazyload:not(.loaded){opacity:0;-webkit-opacity:0;-moz-opacity:0}.cover-wrapper .cover-bg.lazyload.loaded{animation-delay:0s;animation-duration:.5s;animation-fill-mode:forwards;animation-timing-function:ease-out;animation-name:fadeIn}@-moz-keyframes fadeIn{0%{opacity:0;-webkit-opacity:0;-moz-opacity:0;filter:blur(12px);transform:scale(1.02);-webkit-transform:scale(1.02);-khtml-transform:scale(1.02);-moz-transform:scale(1.02);-o-transform:scale(1.02);-ms-transform:scale(1.02)}100%{opacity:1;-webkit-opacity:1;-moz-opacity:1}}@-webkit-keyframes fadeIn{0%{opacity:0;-webkit-opacity:0;-moz-opacity:0;filter:blur(12px);transform:scale(1.02);-webkit-transform:scale(1.02);-khtml-transform:scale(1.02);-moz-transform:scale(1.02);-o-transform:scale(1.02);-ms-transform:scale(1.02)}100%{opacity:1;-webkit-opacity:1;-moz-opacity:1}}@-o-keyframes fadeIn{0%{opacity:0;-webkit-opacity:0;-moz-opacity:0;filter:blur(12px);transform:scale(1.02);-webkit-transform:scale(1.02);-khtml-transform:scale(1.02);-moz-transform:scale(1.02);-o-transform:scale(1.02);-ms-transform:scale(1.02)}100%{opacity:1;-webkit-opacity:1;-moz-opacity:1}}@keyframes fadeIn{0%{opacity:0;-webkit-opacity:0;-moz-opacity:0;filter:blur(12px);transform:scale(1.02);-webkit-transform:scale(1.02);-khtml-transform:scale(1.02);-moz-transform:scale(1.02);-o-transform:scale(1.02);-ms-transform:scale(1.02)}100%{opacity:1;-webkit-opacity:1;-moz-opacity:1}}.cover-wrapper .cover-body{z-index:1;position:relative;width:100%;height:100%}.cover-wrapper#full{height:calc(100vh + 100px);padding-bottom:100px}.cover-wrapper#half{max-height:640px;min-height:400px;height:calc(36vh - 64px + 200px)}.cover-wrapper #scroll-down{width:100%;height:64px;position:absolute;bottom:100px;text-align:center;cursor:pointer}.cover-wrapper #scroll-down .scroll-down-effects{color:#fff;font-size:24px;line-height:64px;position:absolute;width:24px;left:calc(50% - 12px);text-shadow:0 1px 2px rgba(0,0,0,.1);animation:scroll-down-effect 1.5s infinite;-webkit-animation:scroll-down-effect 1.5s infinite;-khtml-animation:scroll-down-effect 1.5s infinite;-moz-animation:scroll-down-effect 1.5s infinite;-o-animation:scroll-down-effect 1.5s infinite;-ms-animation:scroll-down-effect 1.5s infinite}@-moz-keyframes scroll-down-effect{0%{top:0;opacity:1;-webkit-opacity:1;-moz-opacity:1}50%{top:-16px;opacity:.4;-webkit-opacity:0.4;-moz-opacity:0.4}100%{top:0;opacity:1;-webkit-opacity:1;-moz-opacity:1}}@-webkit-keyframes scroll-down-effect{0%{top:0;opacity:1;-webkit-opacity:1;-moz-opacity:1}50%{top:-16px;opacity:.4;-webkit-opacity:0.4;-moz-opacity:0.4}100%{top:0;opacity:1;-webkit-opacity:1;-moz-opacity:1}}@-o-keyframes scroll-down-effect{0%{top:0;opacity:1;-webkit-opacity:1;-moz-opacity:1}50%{top:-16px;opacity:.4;-webkit-opacity:0.4;-moz-opacity:0.4}100%{top:0;opacity:1;-webkit-opacity:1;-moz-opacity:1}}@keyframes scroll-down-effect{0%{top:0;opacity:1;-webkit-opacity:1;-moz-opacity:1}50%{top:-16px;opacity:.4;-webkit-opacity:0.4;-moz-opacity:0.4}100%{top:0;opacity:1;-webkit-opacity:1;-moz-opacity:1}}.cover-wrapper .cover-body{margin-top:64px;margin-bottom:100px}.cover-wrapper .cover-body,.cover-wrapper .cover-body .bottom,.cover-wrapper .cover-body .top{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;display:flex;-webkit-box-direction:normal;-moz-box-direction:normal;-webkit-box-orient:vertical;-moz-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;align-items:center;justify-content:center;-webkit-justify-content:center;-khtml-justify-content:center;-moz-justify-content:center;-o-justify-content:center;-ms-justify-content:center;max-width:100%}.cover-wrapper .cover-body .bottom{margin-top:32px}.cover-wrapper .cover-body .title{font-family:"Varela Round","PingFang SC","Microsoft YaHei",Helvetica,Arial,Helvetica,monospace;font-size:3.125rem;line-height:1.2;text-shadow:0 1px 2px rgba(0,0,0,.1)}.cover-wrapper .cover-body .subtitle{font-size:20px}.cover-wrapper .cover-body .logo{max-height:120px;max-width:calc(100% - 4 * 16px)}@media screen and (min-height:1024px){.cover-wrapper .cover-body .title{font-size:3rem}.cover-wrapper .cover-body .subtitle{font-size:1.05rem}.cover-wrapper .cover-body .logo{max-height:150px}}.cover-wrapper .cover-body .m_search{position:relative;max-width:calc(100% - 16px);width:320px;vertical-align:middle}.cover-wrapper .cover-body .m_search .form{position:relative;display:-webkit-box;display:-moz-box;display:block;width:100%}.cover-wrapper .cover-body .m_search .icon,.cover-wrapper .cover-body .m_search .input{transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all 0.28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease}.cover-wrapper .cover-body .m_search .icon{position:absolute;display:-webkit-box;display:-moz-box;display:block;line-height:2.5rem;width:32px;top:0;left:5px;color:rgba(68,68,68,.75)}.cover-wrapper .cover-body .m_search .input{display:-webkit-box;display:-moz-box;display:block;height:2.5rem;width:100%;box-shadow:none;-webkit-box-shadow:none;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;font-size:.875rem;-webkit-appearance:none;padding-left:36px;border-radius:1.4rem;-webkit-border-radius:1.4rem;background:rgba(255,255,255,.6);backdrop-filter:blur(10px);border:none;color:var(--color-text)}@media screen and (max-width:500px){.cover-wrapper .cover-body .m_search .input{padding-left:36px}}.cover-wrapper .cover-body .m_search .input:hover{background:rgba(255,255,255,.8)}.cover-wrapper .cover-body .m_search .input:focus{background:#fff}.cover-wrapper .list-h{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;display:flex;-webkit-box-direction:normal;-moz-box-direction:normal;-webkit-box-orient:horizontal;-moz-box-orient:horizontal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;flex-wrap:wrap;-webkit-flex-wrap:wrap;-khtml-flex-wrap:wrap;-moz-flex-wrap:wrap;-o-flex-wrap:wrap;-ms-flex-wrap:wrap;align-items:stretch;border-radius:4px;-webkit-border-radius:4px;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.cover-wrapper .list-h a{-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1 0;-ms-flex:1 0;flex:1 0;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;display:flex;font-weight:600}.cover-wrapper .list-h a img{display:-webkit-box;display:-moz-box;display:block;border-radius:2px;-webkit-border-radius:2px;margin:4px;min-width:40px;max-width:44px}@media screen and (max-width:768px){.cover-wrapper .list-h a img{min-width:36px;max-width:40px}}@media screen and (max-width:500px){.cover-wrapper .list-h a img{margin:2px 4px;min-width:32px;max-width:36px}}@media screen and (max-width:375px){.cover-wrapper .list-h a img{min-width:28px;max-width:32px}}.cover-wrapper{max-width:100%}.cover-wrapper.search .bottom .menu{margin-top:16px}.cover-wrapper.search .bottom .menu .list-h a{white-space:nowrap;-webkit-box-direction:normal;-moz-box-direction:normal;-webkit-box-orient:horizontal;-moz-box-orient:horizontal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;align-items:baseline;padding:2px;margin:4px;color:var(--color-site-inner);opacity:.75;-webkit-opacity:0.75;-moz-opacity:0.75;text-shadow:0 1px 2px rgba(0,0,0,.05);border-bottom:2px solid transparent}.cover-wrapper.search .bottom .menu .list-h a i{margin-right:4px}.cover-wrapper.search .bottom .menu .list-h a p{font-size:.9375rem}.cover-wrapper.search .bottom .menu .list-h a.active,.cover-wrapper.search .bottom .menu .list-h a:active,.cover-wrapper.search .bottom .menu .list-h a:hover{opacity:1;-webkit-opacity:1;-moz-opacity:1;border-bottom:2px solid var(--color-site-inner)}.cover-wrapper.dock .menu,.cover-wrapper.featured .menu,.cover-wrapper.focus .menu{border-radius:6px;-webkit-border-radius:6px}.cover-wrapper.dock .menu .list-h a,.cover-wrapper.featured .menu .list-h a,.cover-wrapper.focus .menu .list-h a{-webkit-box-direction:normal;-moz-box-direction:normal;-webkit-box-orient:vertical;-moz-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;align-items:center;padding:12px;line-height:24px;border-radius:4px;-webkit-border-radius:4px;border-bottom:none;text-align:center;align-content:flex-end;color:rgba(68,68,68,.7);font-size:1.5rem}@media screen and (max-width:500px){.cover-wrapper.dock .menu .list-h a,.cover-wrapper.featured .menu .list-h a,.cover-wrapper.focus .menu .list-h a{padding:12px 8px}}.cover-wrapper.dock .menu .list-h a i,.cover-wrapper.featured .menu .list-h a i,.cover-wrapper.focus .menu .list-h a i{margin:8px}.cover-wrapper.dock .menu .list-h a p,.cover-wrapper.featured .menu .list-h a p,.cover-wrapper.focus .menu .list-h a p{font-size:.875rem}.cover-wrapper.dock .menu .list-h a.active,.cover-wrapper.featured .menu .list-h a.active,.cover-wrapper.focus .menu .list-h a.active{background:var(--color-card);backdrop-filter:none}.cover-wrapper.dock .menu .list-h a.active i,.cover-wrapper.dock .menu .list-h a.active i+p,.cover-wrapper.featured .menu .list-h a.active i,.cover-wrapper.featured .menu .list-h a.active i+p,.cover-wrapper.focus .menu .list-h a.active i,.cover-wrapper.focus .menu .list-h a.active i+p{color:#2196f3}.cover-wrapper.dock .menu .list-h a.active img+p,.cover-wrapper.featured .menu .list-h a.active img+p,.cover-wrapper.focus .menu .list-h a.active img+p{color:var(--color-text)}.cover-wrapper.dock .menu .list-h a:hover,.cover-wrapper.featured .menu .list-h a:hover,.cover-wrapper.focus .menu .list-h a:hover{background:var(--color-card)}.cover-wrapper.featured .menu .list-h{margin:-2px}.cover-wrapper.featured .menu .list-h a{margin:2px;background:rgba(255,255,255,.5)}@supports (backdrop-filter:blur(20px)){.cover-wrapper.featured .menu .list-h a{background:rgba(255,255,255,.5);backdrop-filter:saturate(200%) blur(20px)}}@media (prefers-color-scheme:dark){:root{--color-mode:'dark'}:root:not([color-scheme]){--color-site-body:#121212;--color-read-bkg:#21232f;--color-read-post:#252d38;--color-site-bg:#21232f;--color-site-inner:#efefef;--color-site-footer:#666;--color-card:#252d38;--color-text:rgba(238,238,238,0.871);--color-block:rgba(68,68,68,0.65);--color-codeblock:#444;--color-inlinecode:#d56d28;--color-h1:rgba(255,255,255,0.871);--color-h2:rgba(255,255,255,0.871);--color-h3:rgba(255,255,255,0.6);--color-h4:rgba(255,255,255,0.6);--color-h5:rgba(255,255,255,0.6);--color-h6:rgba(255,255,255,0.6);--color-p:rgba(217,217,217,0.871);--color-list:rgba(217,217,217,0.871);--color-list-hl:#4dabf5;--color-meta:rgba(191,191,191,0.871);--color-link:rgba(191,191,191,0.871);--color-copyright-bkg:#21252b}:root:not([color-scheme]) img{filter:brightness(70%)!important}:root:not([color-scheme]) .blur{background:rgba(33,35,47,.9)!important}:root:not([color-scheme]) .white-box.blur{background:rgba(37,45,56,.9)!important}:root:not([color-scheme]) .nav-main .u-search-input{background:var(--color-card)!important}:root:not([color-scheme]) #l_main .article .prev-next>a{background:var(--color-block)!important}:root:not([color-scheme]) #l_main .article .prev-next>a:hover{background:var(--color-site-bg)!important}:root:not([color-scheme]) .article blockquote{background:var(--color-block)!important}:root:not([color-scheme]) .article-title a{color:var(--color-h1)!important}:root:not([color-scheme]) details>summary{color:var(--color-p)!important;background:var(--color-site-bg)!important}:root:not([color-scheme]) details{border:1px solid var(--color-site-bg)!important;background:var(--color-site-bg)!important}:root:not([color-scheme]) #u-search .modal,:root:not([color-scheme]) #u-search .modal-body,:root:not([color-scheme]) #u-search .modal-header{background:var(--color-card)!important}:root:not([color-scheme]) #u-search .modal-body .modal-results .result:hover{background:var(--color-block)!important}:root:not([color-scheme]) .u-search-input:hover{background:var(--color-block)!important}:root:not([color-scheme]) .u-search-input:focus{background:var(--color-site-body)!important}}[color-scheme=dark]{--color-site-body:#121212;--color-read-bkg:#21232f;--color-read-post:#252d38;--color-site-bg:#21232f;--color-site-inner:#efefef;--color-site-footer:#666;--color-card:#252d38;--color-text:rgba(238,238,238,0.871);--color-block:rgba(68,68,68,0.65);--color-codeblock:#444;--color-inlinecode:#d56d28;--color-h1:rgba(255,255,255,0.871);--color-h2:rgba(255,255,255,0.871);--color-h3:rgba(255,255,255,0.6);--color-h4:rgba(255,255,255,0.6);--color-h5:rgba(255,255,255,0.6);--color-h6:rgba(255,255,255,0.6);--color-p:rgba(217,217,217,0.871);--color-list:rgba(217,217,217,0.871);--color-list-hl:#4dabf5;--color-meta:rgba(191,191,191,0.871);--color-link:rgba(191,191,191,0.871);--color-copyright-bkg:#21252b}[color-scheme=dark] img{filter:brightness(70%)!important}[color-scheme=dark] .blur{background:rgba(33,35,47,.9)!important}[color-scheme=dark] .white-box.blur{background:rgba(37,45,56,.9)!important}[color-scheme=dark] .nav-main .u-search-input{background:var(--color-card)!important}[color-scheme=dark] #l_main .article .prev-next>a{background:var(--color-block)!important}[color-scheme=dark] #l_main .article .prev-next>a:hover{background:var(--color-site-bg)!important}[color-scheme=dark] .article blockquote{background:var(--color-block)!important}[color-scheme=dark] .article-title a{color:var(--color-h1)!important}[color-scheme=dark] details>summary{color:var(--color-p)!important;background:var(--color-site-bg)!important}[color-scheme=dark] details{border:1px solid var(--color-site-bg)!important;background:var(--color-site-bg)!important}[color-scheme=dark] #u-search .modal,[color-scheme=dark] #u-search .modal-body,[color-scheme=dark] #u-search .modal-header{background:var(--color-card)!important}[color-scheme=dark] #u-search .modal-body .modal-results .result:hover{background:var(--color-block)!important}[color-scheme=dark] .u-search-input:hover{background:var(--color-block)!important}[color-scheme=dark] .u-search-input:focus{background:var(--color-site-body)!important}@media screen and (max-width:500px){[color-scheme=dark] .l_header .m_search{background:var(--color-site-bg)!important}}@font-face{font-family:'Varela Round';src:url("https://static.mhuig.top/npm/volantis-static@0.0.1660614606622/media/fonts/VarelaRound/VarelaRound-Regular.ttf");font-weight:'normal';font-style:'normal';font-display:swap}@font-face{font-family:'Varela Round';src:url("https://static.mhuig.top/npm/volantis-static@0.0.1660614606622/media/fonts/VarelaRound/VarelaRound-Regular.ttf");font-weight:'normal';font-style:'normal';font-display:swap}.l_header{position:fixed;z-index:1000;top:0;width:100%;height:64px;background:var(--color-card);box-shadow:0 1px 2px 0 rgba(0,0,0,.1);-webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,.1)}.l_header.auto{transition:opacity .4s ease;-webkit-transition:opacity .4s ease;-khtml-transition:opacity 0.4s ease;-moz-transition:opacity .4s ease;-o-transition:opacity .4s ease;-ms-transition:opacity .4s ease;visibility:hidden}.l_header.auto.show{opacity:1!important;-webkit-opacity:1!important;-moz-opacity:1!important;visibility:visible}.l_header .container{margin-left:16px;margin-right:16px}.l_header #wrapper{height:100%;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.l_header #wrapper .nav-main,.l_header #wrapper .nav-sub{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;display:flex;flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-khtml-flex-wrap:nowrap;-moz-flex-wrap:nowrap;-o-flex-wrap:nowrap;-ms-flex-wrap:nowrap;justify-content:space-between;-webkit-justify-content:space-between;-khtml-justify-content:space-between;-moz-justify-content:space-between;-o-justify-content:space-between;-ms-justify-content:space-between;align-items:center}.l_header #wrapper .nav-main{transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all 0.28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease}.l_header #wrapper.sub .nav-main{transform:translateY(-64px);-webkit-transform:translateY(-64px);-khtml-transform:translateY(-64px);-moz-transform:translateY(-64px);-o-transform:translateY(-64px);-ms-transform:translateY(-64px)}.l_header #wrapper .nav-sub{transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all 0.28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease;opacity:0;-webkit-opacity:0;-moz-opacity:0;height:64px;width:calc(100% - 2 * 16px);position:absolute}.l_header #wrapper .nav-sub ::-webkit-scrollbar{display:-webkit-box;display:-moz-box;display:none}@media screen and (min-width:2048px){.l_header #wrapper .nav-sub{max-width:55vw;margin:auto}}.l_header #wrapper.sub .nav-sub{opacity:1;-webkit-opacity:1;-moz-opacity:1}.l_header #wrapper .title{position:relative;color:var(--color-text);padding-left:24px;max-height:64px}.l_header #wrapper .nav-main .title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0;line-height:64px;padding:0 24px;font-size:1.25rem;font-family:"Varela Round","PingFang SC","Microsoft YaHei",Helvetica,Arial,Helvetica,monospace}.l_header #wrapper .nav-main .title img{height:64px}.l_header .nav-sub{max-width:1080px;margin:auto}.l_header .nav-sub .title{font-weight:700;font-family:"Varela Round","PingFang SC","Microsoft YaHei",Helvetica,Arial,Menlo,Monaco,monospace,sans-serif;line-height:1.2;max-height:64px;white-space:normal;flex-shrink:1}.l_header .switcher{display:-webkit-box;display:-moz-box;display:none;line-height:64px;align-items:center}.l_header .switcher .s-toc{display:-webkit-box;display:-moz-box;display:none}@media screen and (max-width:768px){.l_header .switcher .s-toc{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;display:flex}}.l_header .switcher>li{height:48px;transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all 0.28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease;margin:2px}@media screen and (max-width:500px){.l_header .switcher>li{margin:0 1px;height:48px}}.l_header .switcher>li>a{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;display:flex;justify-content:center;-webkit-justify-content:center;-khtml-justify-content:center;-moz-justify-content:center;-o-justify-content:center;-ms-justify-content:center;align-items:center;width:48px;height:48px;padding:.85em 1.1em;border-radius:100px;-webkit-border-radius:100px;border:none;transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all 0.28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease;color:#2196f3}.l_header .switcher>li>a:hover{border:none}.l_header .switcher>li>a.active,.l_header .switcher>li>a:active{border:none;background:var(--color-site-bg)}@media screen and (max-width:500px){.l_header .switcher>li>a{width:36px;height:48px}}.l_header .nav-sub .switcher{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;display:flex}.l_header .m_search{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;display:flex;height:64px;width:240px;transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all 0.28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease}@media screen and (max-width:1024px){.l_header .m_search{width:44px;min-width:44px}.l_header .m_search input::placeholder{opacity:0;-webkit-opacity:0;-moz-opacity:0}.l_header .m_search:hover{width:240px}.l_header .m_search:hover input::placeholder{opacity:1;-webkit-opacity:1;-moz-opacity:1}}@media screen and (min-width:500px){.l_header .m_search:hover .input{width:100%}.l_header .m_search:hover .input::placeholder{opacity:1;-webkit-opacity:1;-moz-opacity:1}}@media screen and (max-width:500px){.l_header .m_search{min-width:0}.l_header .m_search input::placeholder{opacity:1;-webkit-opacity:1;-moz-opacity:1}}.l_header .m_search .form{position:relative;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;display:flex;width:100%;align-items:center}.l_header .m_search .icon{position:absolute;width:36px;left:5px;color:var(--color-meta)}@media screen and (max-width:500px){.l_header .m_search .icon{display:-webkit-box;display:-moz-box;display:none}}.l_header .m_search .input{display:-webkit-box;display:-moz-box;display:block;padding-top:8px;padding-bottom:8px;line-height:1.3;width:100%;color:var(--color-text);background:#fafafa;box-shadow:none;-webkit-box-shadow:none;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;padding-left:40px;font-size:.875rem;border-radius:8px;-webkit-border-radius:8px;border:none;transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all 0.28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease}@media screen and (min-width:500px){.l_header .m_search .input:focus{box-shadow:0 4px 8px 0 rgba(0,0,0,.1);-webkit-box-shadow:0 4px 8px 0 rgba(0,0,0,.1)}}@media screen and (max-width:500px){.l_header .m_search .input{background:var(--color-block);padding-left:8px;border:none}.l_header .m_search .input:focus,.l_header .m_search .input:hover{border:none}}@media (max-width:500px){.l_header .m_search{left:0;width:0;overflow:hidden;position:absolute;background:#fff;transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all 0.28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease}.l_header .m_search .input{border-radius:32px;-webkit-border-radius:32px;margin-left:16px;padding-left:16px}.l_header.z_search-open .m_search{width:100%}.l_header.z_search-open .m_search .input{width:calc(100% - 120px)}}ul.m-pc>li>a{color:inherit;border-bottom:2px solid transparent}ul.m-pc>li>a.active,ul.m-pc>li>a:active{border-bottom:2px solid #2196f3}ul.list-v li:hover>ul.list-v,ul.m-pc li:hover>ul.list-v{display:-webkit-box;display:-moz-box;display:block}ul.nav-list-h{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;display:flex;align-items:stretch}ul.nav-list-h>li{position:relative;justify-content:center;-webkit-justify-content:center;-khtml-justify-content:center;-moz-justify-content:center;-o-justify-content:center;-ms-justify-content:center;height:100%;line-height:2.4;border-radius:4px;-webkit-border-radius:4px}ul.nav-list-h>li>a{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:600}ul.list-v{z-index:1;display:-webkit-box;display:-moz-box;display:none;position:absolute;background:var(--color-card);box-shadow:0 2px 4px 0 rgba(0,0,0,.08),0 4px 8px 0 rgba(0,0,0,.08),0 8px 16px 0 rgba(0,0,0,.08);-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.08),0 4px 8px 0 rgba(0,0,0,.08),0 8px 16px 0 rgba(0,0,0,.08);margin-top:-6px;border-radius:4px;-webkit-border-radius:4px;padding:8px 0}ul.list-v.show{display:-webkit-box;display:-moz-box;display:block}ul.list-v hr{margin-top:8px;margin-bottom:8px}ul.list-v>li{white-space:nowrap;word-break:keep-all}ul.list-v>li.header{font-size:.78125rem;font-weight:700;line-height:2em;color:var(--color-meta);margin:8px 16px 4px}ul.list-v>li.header i{margin-right:8px}ul.list-v>li ul{margin-left:0;display:-webkit-box;display:-moz-box;display:none;margin-top:-40px}ul.list-v .aplayer-container{min-height:64px;padding:6px 16px}ul.list-v>li>a{transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all 0.28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease;display:-webkit-box;display:-moz-box;display:block;color:var(--color-list);font-size:.875rem;font-weight:700;line-height:36px;padding:0 20px 0 16px;text-overflow:ellipsis;margin:0 4px;border-radius:4px;-webkit-border-radius:4px}@media screen and (max-width:1024px){ul.list-v>li>a{line-height:40px}}ul.list-v>li>a>i{margin-right:8px}ul.list-v>li>a.active,ul.list-v>li>a:active{color:var(--color-list-hl)}ul.list-v>li>a:hover{color:var(--color-list-hl);background:var(--color-site-bg)}.l_header .menu>ul>li>a{display:-webkit-box;display:-moz-box;display:block;padding:0 8px}.l_header .menu>ul>li>a>i{margin-right:4px}.l_header ul.nav-list-h>li{color:var(--color-list);line-height:64px}.l_header ul.nav-list-h>li>a{max-height:64px;overflow:hidden;color:inherit}.l_header ul.nav-list-h>li>a.active,.l_header ul.nav-list-h>li>a:active{color:#2196f3}.l_header ul.nav-list-h>li:hover>a{color:var(--color-list-hl)}.l_header ul.nav-list-h>li i.music{animation:rotate-effect 1.5s linear infinite;-webkit-animation:rotate-effect 1.5s linear infinite;-khtml-animation:rotate-effect 1.5s linear infinite;-moz-animation:rotate-effect 1.5s linear infinite;-o-animation:rotate-effect 1.5s linear infinite;-ms-animation:rotate-effect 1.5s linear infinite}@-moz-keyframes rotate-effect{0%{transform:rotate(0);-webkit-transform:rotate(0);-khtml-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0)}25%{transform:rotate(90deg);-webkit-transform:rotate(90deg);-khtml-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg)}50%{transform:rotate(180deg);-webkit-transform:rotate(180deg);-khtml-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);-ms-transform:rotate(180deg)}75%{transform:rotate(270deg);-webkit-transform:rotate(270deg);-khtml-transform:rotate(270deg);-moz-transform:rotate(270deg);-o-transform:rotate(270deg);-ms-transform:rotate(270deg)}100%{transform:rotate(360deg);-webkit-transform:rotate(360deg);-khtml-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg)}}@-webkit-keyframes rotate-effect{0%{transform:rotate(0);-webkit-transform:rotate(0);-khtml-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0)}25%{transform:rotate(90deg);-webkit-transform:rotate(90deg);-khtml-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg)}50%{transform:rotate(180deg);-webkit-transform:rotate(180deg);-khtml-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);-ms-transform:rotate(180deg)}75%{transform:rotate(270deg);-webkit-transform:rotate(270deg);-khtml-transform:rotate(270deg);-moz-transform:rotate(270deg);-o-transform:rotate(270deg);-ms-transform:rotate(270deg)}100%{transform:rotate(360deg);-webkit-transform:rotate(360deg);-khtml-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg)}}@-o-keyframes rotate-effect{0%{transform:rotate(0);-webkit-transform:rotate(0);-khtml-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0)}25%{transform:rotate(90deg);-webkit-transform:rotate(90deg);-khtml-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg)}50%{transform:rotate(180deg);-webkit-transform:rotate(180deg);-khtml-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);-ms-transform:rotate(180deg)}75%{transform:rotate(270deg);-webkit-transform:rotate(270deg);-khtml-transform:rotate(270deg);-moz-transform:rotate(270deg);-o-transform:rotate(270deg);-ms-transform:rotate(270deg)}100%{transform:rotate(360deg);-webkit-transform:rotate(360deg);-khtml-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg)}}@keyframes rotate-effect{0%{transform:rotate(0);-webkit-transform:rotate(0);-khtml-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0)}25%{transform:rotate(90deg);-webkit-transform:rotate(90deg);-khtml-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg)}50%{transform:rotate(180deg);-webkit-transform:rotate(180deg);-khtml-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);-ms-transform:rotate(180deg)}75%{transform:rotate(270deg);-webkit-transform:rotate(270deg);-khtml-transform:rotate(270deg);-moz-transform:rotate(270deg);-o-transform:rotate(270deg);-ms-transform:rotate(270deg)}100%{transform:rotate(360deg);-webkit-transform:rotate(360deg);-khtml-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg)}}.menu-phone li ul.list-v{right:calc(100% - .5 * 16px)}.menu-phone li ul.list-v ul{right:calc(100% - .5 * 16px)}#wrapper{max-width:1080px;margin:auto}@media screen and (min-width:2048px){#wrapper{max-width:55vw}}#wrapper .menu{-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1 1;-ms-flex:1 1;flex:1 1;margin:0 16px 0 0}#wrapper .menu .list-v ul{left:calc(100% - .5 * 16px)}.menu-phone{display:-webkit-box;display:-moz-box;display:none;margin-top:16px;right:8px;transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all 0.28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease}.menu-phone ul{right:calc(100% - .5 * 16px)}@media screen and (max-width:500px){.menu-phone{display:-webkit-box;display:-moz-box;display:block}}.l_header{max-width:65vw;left:calc((100% - 65vw) * .5);border-bottom-left-radius:8px;border-bottom-right-radius:8px}@media screen and (max-width:2048px){.l_header{max-width:1112px;left:calc((100% - 1112px) * .5)}}@media screen and (max-width:1112px){.l_header{left:0;border-radius:0;-webkit-border-radius:0;max-width:100%}}@media screen and (max-width:500px){.l_header .container{margin-left:0;margin-right:0}.l_header #wrapper .nav-main .title{padding-left:16px;padding-right:16px}.l_header #wrapper .nav-sub{width:100%}.l_header #wrapper .nav-sub .title{overflow-y:scroll;margin-top:2px;padding:8px 16px}.l_header #wrapper .switcher{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;display:flex;margin-right:8px}.l_header .menu{display:-webkit-box;display:-moz-box;display:none}}@media screen and (max-width:500px){.list-v li{max-width:270px}}#u-search{display:-webkit-box;display:-moz-box;display:none;position:fixed;top:0;left:0;width:100%;height:100%;padding:60px 20px;z-index:1001}@media screen and (max-width:680px){#u-search{padding:0}}@media screen and (prefers-color-scheme:dark) and (max-width:500px){.l_header .m_search{background:var(--color-site-bg)!important}}.cover-wrapper .cover-body .subtitle{font-size:.875rem}.fa-brands.color-github,.fa-duotone.color-github,.fa-light.color-github,.fa-regular.color-github,.fa-solid.color-github,.fa-thin.color-github,.fa.color-github,.fad.color-github,.fal.color-github,.far.color-github,.fas.color-github,.iziToast>.iziToast-body .iziToast-icon.color-github{color:#000}.fa-brands.color-friends,.fa-duotone.color-friends,.fa-light.color-friends,.fa-regular.color-friends,.fa-solid.color-friends,.fa-thin.color-friends,.fa.color-friends,.fad.color-friends,.fal.color-friends,.far.color-friends,.fas.color-friends,.iziToast>.iziToast-body .iziToast-icon.color-friends{color:#d31ee9}.fa-brands.color-about,.fa-duotone.color-about,.fa-light.color-about,.fa-regular.color-about,.fa-solid.color-about,.fa-thin.color-about,.fa.color-about,.fad.color-about,.fal.color-about,.far.color-about,.fas.color-about,.iziToast>.iziToast-body .iziToast-icon.color-about{color:#0095ff}.fa-brands.color-travellings,.fa-duotone.color-travellings,.fa-light.color-travellings,.fa-regular.color-travellings,.fa-solid.color-travellings,.fa-thin.color-travellings,.fa.color-travellings,.fad.color-travellings,.fal.color-travellings,.far.color-travellings,.fas.color-travellings,.iziToast>.iziToast-body .iziToast-icon.color-travellings{color:#734ae6}mjx-container{padding:0 0!important}mjx-container:not([display=true]){padding:4px 2px 4px 6px!important}mjx-container[jax=SVG]{direction:ltr}mjx-container[jax=SVG]>svg{overflow:visible}mjx-container[jax=SVG][display=true]{display:-webkit-box;display:-moz-box;display:block;text-align:center;margin:1em 0}mjx-container[jax=SVG][justify=left]{text-align:left}mjx-container[jax=SVG][justify=right]{text-align:right}g[data-mml-node=merror]>g{fill:#f00;stroke:#f00}g[data-mml-node=merror]>rect[data-background]{fill:#ff0;stroke:none}g[data-mml-node=mtable]>line[data-line]{stroke-width:70px;fill:none}g[data-mml-node=mtable]>rect[data-frame]{stroke-width:70px;fill:none}g[data-mml-node=mtable]>.mjx-dashed{stroke-dasharray:140}g[data-mml-node=mtable]>.mjx-dotted{stroke-linecap:round;stroke-dasharray:0,140}g[data-mml-node=mtable]>svg{overflow:visible}[jax=SVG] mjx-tool{display:-webkit-box;display:-moz-box;display:inline-block;position:relative;width:0;height:0}[jax=SVG] mjx-tool>mjx-tip{position:absolute;top:0;left:0}mjx-tool>mjx-tip{display:-webkit-box;display:-moz-box;display:inline-block;padding:.2em;border:1px solid #888;font-size:70%;background-color:#f8f8f8;color:#000;box-shadow:2px 2px 5px #aaa;-webkit-box-shadow:2px 2px 5px #aaa}g[data-mml-node=maction][data-toggle]{cursor:pointer}mjx-status{display:-webkit-box;display:-moz-box;display:block;position:fixed;left:1em;bottom:1em;min-width:25%;padding:.2em .4em;border:1px solid #888;font-size:90%;background-color:#f8f8f8;color:#000}foreignObject[data-mjx-xml]{font-family:initial;line-height:normal;overflow:visible}.MathJax path{stroke-width:3}mjx-container[display=true]{overflow:auto hidden}mjx-container[display=true]+br{display:-webkit-box;display:-moz-box;display:none}</style><link rel="stylesheet" href="/css/style.css" media="print" onload='this.media="all",this.onload=null'><noscript><link rel="stylesheet" href="/css/style.css"></noscript><script>let userColorScheme=localStorage.getItem("color-scheme");userColorScheme&&document.documentElement.setAttribute("color-scheme",userColorScheme)</script><script>window.MSInputMethodContext&&document.documentMode&&document.write('<style>html{overflow-x: hidden !important;overflow-y: hidden !important;}.kill-ie{text-align:center;height: 100%;margin-top: 15%;margin-bottom: 5500%;}.kill-t{font-size: 2rem;}.kill-c{font-size: 1.2rem;}#l_header,#l_body{display: none;}</style><div class="kill-ie"><span class="kill-t"><b>抱歉，您的浏览器无法访问本站</b></span><br/><span class="kill-c">微软已经于2016年终止了对 Internet Explorer (IE) 10 及更早版本的支持，<br/>继续使用存在极大的安全隐患，请使用当代主流的浏览器进行访问。</span><br/><a target="_blank" rel="noopener" href="https://blogs.windows.com/windowsexperience/2021/05/19/the-future-of-internet-explorer-on-windows-10-is-in-microsoft-edge/"><strong>了解详情 ></strong></a></div>')</script><noscript><style>html{overflow-x:hidden!important;overflow-y:hidden!important}.kill-noscript{text-align:center;height:100%;margin-top:15%;margin-bottom:5500%}.kill-t{font-size:2rem}.kill-c{font-size:1.2rem}#l_body,#l_header{display:none}</style><div class="kill-noscript"> <span class="kill-t"><b>抱歉，您的浏览器无法访问本站</b></span><br> <span class="kill-c">本页面需要浏览器支持（启用）JavaScript</span><br> <a target="_blank" rel="external nofollow noopener noreferrer" href="https://www.baidu.com/s?wd=启用JavaScript"><strong>了解详情 ></strong></a></div></noscript><script>function volantisEventListener(e,t,n){this.type=e,this.f=t,this.ele=n}function volantisDom(e){return e||(e=document.createElement("div")),this.ele=e,this.ele.find=e=>{let t=this.ele.querySelector(e);if(t)return new volantisDom(t)},this.ele.hasClass=e=>this.ele.className.match(new RegExp("(\\s|^)"+e+"(\\s|$)")),this.ele.addClass=e=>(this.ele.classList.add(e),this.ele),this.ele.removeClass=e=>(this.ele.classList.remove(e),this.ele),this.ele.toggleClass=e=>(this.ele.hasClass(e)?this.ele.removeClass(e):this.ele.addClass(e),this.ele),this.ele.on=(e,t,n=1)=>(this.ele.addEventListener(e,t,!1),n&&volantis.EventListener.list.push(new volantisEventListener(e,t,this.ele)),this.ele),this.ele.click=(e,t)=>(this.ele.on("click",e,t),this.ele),this.ele.scroll=(e,t)=>(this.ele.on("scroll",e,t),this.ele),this.ele.html=e=>(this.ele.innerHTML=e,this.ele),this.ele.hide=e=>(this.ele.style.display="none",this.ele),this.ele.show=e=>(this.ele.style.display="block",this.ele),this.ele}function RunItem(){function e(e,t){this.name=t||volantis.getFunctionHash(e),this.run=()=>{try{e()}catch(e){console.log(e)}}}this.list=[],this.start=()=>{for(var e=0;e<this.list.length;e++)this.list[e].run()},this.push=(t,n,o=!0)=>{if("function"!=typeof t)return;let l=t;o&&(l=()=>{volantis.requestAnimationFrame(t)}),n=n||volantis.getFunctionHash(t);const i=this.list.findIndex((e=>e.name===n));-1===i?this.list.push(new e(l,n)):this.list[i]=new e(l,n)},this.remove=e=>{for(let t=0;t<this.list.length;t++){this.list[t].name==e&&this.list.splice(t,1)}}}function errorImgAvatar(e){e.src="https://static.mhuig.top/npm/volantis-static@0.0.1660614606622/media/placeholder/avatar/round/3442075.svg",e.onerror=null}function errorImgCover(e){e.src="https://static.mhuig.top/npm/volantis-static@0.0.1660614606622/media/placeholder/cover/76b86c0226ffd.svg",e.onerror=null}!function(){const e=new WeakMap,t=new Proxy({},{get(n,o){const l=e.get(t);return l?.[o]},set(n,o,l){e.has(t)||e.set(t,Object.create(null));return e.get(t)[o]=l,!0},deleteProperty(n,o){const l=e.get(t);return!(!l||!Object.prototype.hasOwnProperty.call(l,o))&&(delete l[o],0===Object.keys(l).length&&e.delete(t),!0)},ownKeys(n){const o=e.get(t);return o?Object.keys(o):[]},getOwnPropertyDescriptor(n,o){const l=e.get(t);if(l&&Object.prototype.hasOwnProperty.call(l,o))return{value:l[o],writable:!0,enumerable:!0,configurable:!0}}});Object.defineProperty(window,"volantis",{value:t,writable:!0,configurable:!0,enumerable:!0})}(),volantis.debug="false",volantis.dom={},volantis.simpleTextHash=e=>{let t=5381;for(let n=0;n<e.length;n++)t=(t<<5)+t+e.charCodeAt(n),t&=t;return t.toString(16).padStart(8,"0")},volantis.getFunctionHash=e=>{const t=e.toString();return volantis.simpleTextHash(t)},volantis.EventListener={},volantis.EventListener.list=[],volantis.EventListener.remove=()=>{volantis.EventListener.list.forEach((function(e){e.ele.removeEventListener(e.type,e.f,!1)})),volantis.EventListener.list=[]},volantis.dom.$=e=>e?new volantisDom(e):null,volantis.pjax={},volantis.pjax.method={complete:new RunItem,error:new RunItem,send:new RunItem},volantis.pjax=Object.assign(volantis.pjax,{push:volantis.pjax.method.complete.push,error:volantis.pjax.method.error.push,send:volantis.pjax.method.send.push}),volantis.rightmenu={},volantis.rightmenu.method={handle:new RunItem},volantis.rightmenu=Object.assign(volantis.rightmenu,{handle:volantis.rightmenu.method.handle.push}),volantis.dark={},volantis.dark.method={toggle:new RunItem},volantis.dark=Object.assign(volantis.dark,{push:volantis.dark.method.toggle.push}),volantis.js=(e,t)=>new Promise((n=>{setTimeout((function(){var o=document.getElementsByTagName("head")[0]||document.documentElement,l=document.createElement("script");if(l.setAttribute("type","text/javascript"),t)if(JSON.stringify(t))for(let e in t)"onload"==e?l[e]=()=>{t[e](),n()}:(l[e]=t[e],l.onload=n);else l.onload=()=>{t(),n()};else l.onload=n;l.setAttribute("src",e),o.appendChild(l)}))})),volantis.css=e=>new Promise((t=>{setTimeout((function(){var n=document.createElement("link");n.rel="stylesheet",n.href=e,n.onload=t,document.getElementsByTagName("head")[0].appendChild(n)}))})),volantis.import={jQuery:()=>"undefined"==typeof jQuery?volantis.js("https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"):new Promise((e=>{e()}))},volantis.throttle=(e,t=200)=>{let n=0;return function(...o){const l=Date.now();l-n>=t&&(e.apply(this,o),n=l)}},volantis.debounce=(e,t=200)=>{let n=null;return function(){n&&clearTimeout(n),n=setTimeout((()=>{e.apply(this,arguments),n=null}),t)}},volantis.requestAnimationFrame=e=>(window.requestAnimationFrame||(window.requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||function(e){return window.setTimeout(e,1e3/60)}),window.requestAnimationFrame(e)),volantis.layoutHelper=(e,t,n)=>{function o(e,t,n){volantis.tempDiv=document.createElement("div"),volantis.tempDiv.innerHTML=t;let o=document.querySelector("#layoutHelper-"+e);o&&(n&&(o.innerHTML=""),o.append(volantis.tempDiv))}n=Object.assign({clean:!1,pjax:!0},n),o(e,t,n.clean),n.pjax&&volantis.pjax.push((()=>{o(e,t,n.clean)}),"layoutHelper-"+e)},volantis.scroll={engine:new RunItem,unengine:new RunItem},volantis.scroll=Object.assign(volantis.scroll,{push:volantis.scroll.engine.push}),volantis.scroll.getScrollTop=()=>{let e;return window.pageYOffset?e=window.pageYOffset:document.compatMode&&"BackCompat"!=document.compatMode?e=document.documentElement.scrollTop:document.body&&(e=document.body.scrollTop),e},volantis.scroll.scrollHeight=function(){return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight)},volantis.scroll.offsetHeight=function(){return Math.min(document.body.offsetHeight,document.documentElement.offsetHeight,document.body.clientHeight,document.documentElement.clientHeight)},volantis.scroll.progress=function(){return volantis.scroll.getScrollTop()/(volantis.scroll.scrollHeight()-volantis.scroll.offsetHeight())},volantis.scroll.handleScrollEvents=()=>{volantis.scroll.lastScrollTop=volantis.scroll.getScrollTop(),volantis.requestAnimationFrame((function e(){const t=volantis.scroll.getScrollTop();volantis.scroll.lastScrollTop!==t?(volantis.scroll.del=t-volantis.scroll.lastScrollTop,volantis.scroll.lastScrollTop=t,volantis.scroll.unengine.list=[],volantis.scroll.engine.start()):volantis.scroll.unengine.start(),volantis.requestAnimationFrame(e)}))},volantis.scroll.handleScrollEvents(),volantis.scroll.ele=null,volantis.scroll.to=(e,t={})=>{e&&(volantis.scroll.ele=e,opt={top:e.getBoundingClientRect().top+document.documentElement.scrollTop,behavior:"smooth"},"top"in t&&(opt.top=t.top),"behavior"in t&&(opt.behavior=t.behavior),"addTop"in t&&(opt.top+=t.addTop),"observerDic"in t||(t.observerDic=100),window.scrollTo(opt),t.observer&&setTimeout((()=>{volantis.scroll.ele==e&&volantis.scroll.unengine.push((()=>{let n=e.getBoundingClientRect().top;n>=-t.observerDic&&n<=t.observerDic||volantis.scroll.to(e,t),volantis.scroll.unengine.remove("unengineObserver")}),"unengineObserver")}),1e3))},volantis.cleanContentVisibility=()=>{document.querySelector(".post-story")&&(console.log("cleanContentVisibility"),document.querySelectorAll(".post-story").forEach((e=>{e.classList.remove("post-story")})))};const nativeSetTimeout=window.setTimeout,nativeSetInterval=window.setInterval,nativeClearTimeout=window.clearTimeout,nativeClearInterval=window.clearInterval;volantis.activeTimeout=[],volantis.activeInterval=[],window.setTimeout=function(e,t,...n){const o=nativeSetTimeout((function(...t){try{return e.apply(this,t)}finally{const e=volantis.activeTimeout.indexOf(o);-1!==e&&volantis.activeTimeout.splice(e,1)}}),t,...n);return volantis.activeTimeout.push(o),o},window.setInterval=function(e,t,...n){const o=nativeSetInterval(e,t,...n);return volantis.activeInterval.push(o),o},window.clearTimeout=function(e){nativeClearTimeout(e);const t=volantis.activeTimeout.indexOf(e);-1!==t&&volantis.activeTimeout.splice(t,1)},window.clearInterval=function(e){nativeClearInterval(e);const t=volantis.activeInterval.indexOf(e);-1!==t&&volantis.activeInterval.splice(t,1)},volantis.getActiveInterval=function(){return[...volantis.activeInterval]},volantis.getActiveTimeout=function(){return[...volantis.activeTimeout]},volantis.clearAllTimers=function(){volantis.getActiveInterval().forEach((function(e){clearInterval(e)})),volantis.getActiveTimeout().forEach((function(e){clearTimeout(e)}))},volantis.pjax.send(volantis.clearAllTimers,"clearAllTimers")</script><script>volantis.GLOBAL_CONFIG={root:"/",debug:!1,default:{avatar:"https://static.mhuig.top/npm/volantis-static@0.0.1660614606622/media/placeholder/avatar/round/3442075.svg",link:"https://static.mhuig.top/npm/volantis-static@0.0.1660614606622/media/placeholder/link/8f277b4ee0ecd.svg",cover:"https://static.mhuig.top/npm/volantis-static@0.0.1660614606622/media/placeholder/cover/76b86c0226ffd.svg",image:"https://static.mhuig.top/npm/volantis-static@0.0.1660614606622/media/placeholder/image/2659360.svg"},lastupdate:new Date(1779510804521),cdn:{izitoast_css:"https://cdn.bootcdn.net/ajax/libs/izitoast/1.4.0/css/iziToast.min.css",izitoast_js:"https://cdn.bootcdn.net/ajax/libs/izitoast/1.4.0/js/iziToast.min.js",fancybox_css:"https://cdn.bootcdn.net/ajax/libs/fancyapps-ui/4.0.31/fancybox.min.css",fancybox_js:"https://cdn.bootcdn.net/ajax/libs/fancyapps-ui/4.0.31/fancybox.umd.min.js"},sidebar:{for_page:["blogger","navigation","webinfo"],for_post:["toc"],webinfo:{lastupd:{enable:!1,friendlyShow:!0},runtime:{data:"2019/08/19",unit:"天"}}},plugins:{message:{enable:!1,icon:{default:"fa-solid fa-info-circle light-blue",quection:"fa-solid fa-question-circle light-blue"},time:{default:5e3,quection:2e4},position:"topRight",transitionIn:"bounceInLeft",transitionOut:"fadeOutRight",titleColor:"var(--color-text)",messageColor:"var(--color-text)",backgroundColor:"var(--color-card)",zindex:2147483647,copyright:{enable:!0,title:"知识共享许可协议",message:"请遵守 CC BY-NC-SA 4.0 协议。",icon:"far fa-copyright light-blue"},aplayer:{enable:!0,play:"fa-solid fa-play",pause:"fa-solid fa-pause"},rightmenu:{enable:!0,notice:!0}},aplayer:{id:1480000098,enable:!0}},search:{dataPath:("/".endsWith("/")?"/":"//")+"content.json"},languages:{search:{hits_empty:"找不到您查询的内容：${query}",hits_stats:"找到 ${hits} 条结果，用时 ${time} 毫秒"}}}</script><script type="application/ld+json">[{"@context":"http://schema.org","@type":"Organization","name":"MHuiG Magicland","url":"https://blog.mhuig.top/","logo":{"@type":"ImageObject","url":"/lib/favicon/android-chrome-192x192.png","width":192,"height":192}},{"@context":"http://schema.org","@type":"Person","name":"MHuiG","image":{"@type":"ImageObject","url":"/lib/favicon/android-chrome-192x192.png"},"url":"https://blog.mhuig.top/","sameAs":["https://github.com/MHuiG","https://twitter.com/iMHuiG","https://t.me/MHuiG","https://keybase.io/MHuiG"],"description":"「Be Yourself, Make a Difference.」"},{"@context":"http://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"https://blog.mhuig.top/","name":"Magicland"}},{"@type":"ListItem","position":2,"item":{"@id":"https://blog.mhuig.top/categories/大数据/","name":"大数据"}},{"@type":"ListItem","position":2,"item":{"@id":"https://blog.mhuig.top/categories/大数据/Echarts/","name":"Echarts"}},{"@type":"ListItem","position":3,"item":{"@id":"https://blog.mhuig.top/notes/Echarts/index.html","name":"Echarts"}}]},{"@context":"http://schema.org","@type":"WebSite","name":"MHuiG Magicland","url":"https://blog.mhuig.top/","keywords":"MHuiG, @MHuiG, Blog, 博客, Magicland, 魔法世界","description":"宠辱不惊，看庭前花开花落；去留无意，望天上云卷云舒。「Be Yourself, Make a Difference.」 - Magic Island","author":{"@type":"Person","name":"MHuiG","image":{"@type":"ImageObject","url":"/lib/favicon/android-chrome-192x192.png"},"url":"https://blog.mhuig.top/","description":"「Be Yourself, Make a Difference.」"},"publisher":{"@type":"Organization","name":"MHuiG Magicland","url":"https://blog.mhuig.top/","logo":{"@type":"ImageObject","url":"/lib/favicon/android-chrome-192x192.png","width":192,"height":192}},"potentialAction":{"@type":"SearchAction","name":"Coco | The Cat of MHuiG","target":{"@type":"EntryPoint","urlTemplate":"https://blog.mhuig.top/havefun/Coco/?s={search_term_string}"},"query-input":"required name=search_term_string"}},{"@context":"http://schema.org","@type":"BlogPosting","headline":"Echarts","description":"ECharts是Apache开源的JavaScript数据可视化库，支持折线图、柱状图等50+图表类型，通过JSON配置实现主题切换、动态排序等交互效果。其基于ZRender引擎，支持Canvas/SVG双渲染，适配Web/移动端及Vue/React框架，广泛应用于金融分析、大屏监控等场景。","inLanguage":"zh-Hans","mainEntityOfPage":{"@type":"WebPage","@id":"https://blog.mhuig.top/notes/Echarts/"},"author":{"@type":"Person","name":"MHuiG","image":{"@type":"ImageObject","url":"/lib/favicon/android-chrome-192x192.png"},"url":"https://blog.mhuig.top/"},"publisher":{"@type":"Organization","name":"MHuiG Magicland","logo":{"@type":"ImageObject","url":"/lib/favicon/android-chrome-192x192.png","width":192,"height":192}},"url":"https://blog.mhuig.top/notes/Echarts/","wordCount":36,"datePublished":"2022-05-10T06:36:00.000Z","dateModified":"2025-11-20T10:18:00.000Z","articleSection":"大数据","keywords":"BigData,交互式图表库,可视化配置,动态数据展示","image":{"@type":"ImageObject","url":"/lib/favicon/android-chrome-192x192.png","width":192,"height":192}}]</script></head><body itemscope="" itemtype="http://schema.org/WebPage"><pjax></pjax><header itemscope="" itemtype="http://schema.org/WPHeader" id="l_header" class="l_header auto shadow floatable blur show" style="opacity:0"><div class="container"><div id="wrapper"><div class="nav-sub"><p class="title"></p><ul class="switcher nav-list-h m-phone" id="pjax-header-nav-list"><li><a id="s-comment" class="fa-solid fa-comments fa-fw" target="_self" title="comment"></a></li><li><a id="s-toc" class="s-toc fa-solid fa-list fa-fw" target="_self" title="toc"></a></li></ul></div><div class="nav-main"> <a class="title flat-box" target="_self" href="/">MHuiG</a><div class="menu navigation"><ul class="nav-list-h m-pc"><li><a class="menuitem flat-box faa-parent animated-hover" title="索引"><i class="fa-duotone fa-list-alt fa-fw"></i> 索引</a><ul class="list-v"><li><a class="menuitem flat-box faa-parent animated-hover" href="/notes/" title="便签" active-action="action-notes"><i class="fa-duotone fa-books fa-fw"></i> 便签</a></li><li><a class="menuitem flat-box faa-parent animated-hover" href="/categories/" title="分类" active-action="action-categories"><i class="fa-duotone fa-folder-open fa-fw"></i> 分类</a></li><li><a class="menuitem flat-box faa-parent animated-hover" href="/tags/" title="标签" active-action="action-tags"><i class="fa-duotone fa-tags fa-fw"></i> 标签</a></li><li><a class="menuitem flat-box faa-parent animated-hover" href="/archives/" title="归档" active-action="action-archives"><i class="fa-duotone fa-archive fa-fw"></i> 归档</a></li></ul></li><li><a class="menuitem flat-box faa-parent animated-hover" href="/pages/friends/" title="友链" active-action="action-pagesfriends"><i class="fa-duotone fa-link fa-fw"></i> 友链</a><ul class="list-v"><li><a class="menuitem flat-box faa-parent animated-hover" href="https://www.travellings.cn/go-by-clouds.html" title="Travelling" target="_blank" active-action="action-https:wwwtravellingscngo-by-cloudshtml" rel="external nofollow noopener noreferrer"><i class="fa-duotone fa-subway fa-fw"></i> Travelling</a></li></ul></li><li><a class="menuitem flat-box faa-parent animated-hover" href="/pages/about/" title="关于" active-action="action-pagesabout"><i class="fa-duotone fa-user-tie fa-fw"></i> 关于</a><ul class="list-v"><li><a class="menuitem flat-box faa-parent animated-hover" href="/pages/time-machine/" title="时光机" active-action="action-pagestime-machine"><i class="fa-duotone fa-clock fa-fw"></i> 时光机</a></li><li><a class="menuitem flat-box faa-parent animated-hover" target="_blank" rel="noopener" href="https://mhuig.top/privacy-policy/" title="隐私政策" active-action="action-https:mhuigtopprivacy-policy"><i class="fa-duotone fa-user-secret fa-fw"></i> 隐私政策</a></li></ul></li><li><a class="menuitem flat-box faa-parent animated-hover" title="更多"><i class="fa-duotone fa-fan fa-spin fa-fw"></i> 更多</a><ul class="list-v"><li><a class="menuitem flat-box faa-parent animated-hover" href="/pages/beer/" title="Sponsor" active-action="action-pagesbeer"><i class="fa-duotone fa-heart-square fa-fw"></i> Sponsor</a></li><hr><li><a class="menuitem flat-box faa-parent animated-hover" title="博客管理"><i class="fa-duotone fa-user-shield fa-fw"></i> 博客管理</a><ul class="list-v"><li><a class="menuitem flat-box header toggle-mode-btn"><i class="fa-duotone fa-bat fa-fw"></i> 暗黑模式</a></li><li></li><li><a class="menuitem flat-box faa-parent animated-hover" href="/pages/rss/" title="RSS订阅" active-action="action-pagesrss"><i class="fa-duotone fa-rss fa-fw"></i> RSS订阅</a></li><li><a class="menuitem flat-box faa-parent animated-hover" href="/sitemap.xml" title="站点地图" active-action="action-sitemapxml"><i class="fa-duotone fa-sitemap fa-fw"></i> 站点地图</a></li><li><a class="menuitem flat-box faa-parent animated-hover" target="_blank" rel="external nofollow noopener noreferrer" href="https://mhuig.instatus.com/" title="Monitors" active-action="action-https:mhuiginstatuscom"><i class="fa-duotone fa-telescope fa-fw"></i> Monitors</a></li><li><a class="menuitem flat-box faa-parent animated-hover" target="_blank" rel="external nofollow noopener noreferrer" href="https://ssl.mhuig.top/" title="SSL Status" active-action="action-https:sslmhuigtop"><i class="fa-brands fa-expeditedssl fa-fw"></i> SSL Status</a></li></ul></li><hr><li><a class="menuitem flat-box faa-parent animated-hover" title="工具箱"><i class="fa-duotone fa-tools fa-fw"></i> 工具箱</a><ul class="list-v"><li><a class="menuitem flat-box faa-parent animated-hover" target="_blank" rel="external nofollow noopener noreferrer" href="https://rssbox.mhuig.top/" title="RSS Box" active-action="action-https:rssboxmhuigtop"><i class="fa-duotone fa-conveyor-belt-boxes fa-fw"></i> RSS Box</a></li><li><a class="menuitem flat-box faa-parent animated-hover" href="/havefun/Coco/" title="My Cat" active-action="action-havefunCoco"><i class="fa-duotone fa-cat fa-fw"></i> My Cat</a></li><li><a class="menuitem flat-box"><i class="fa-duotone fa-compact-disc fa-spin fa-fw music"></i> Music</a><ul class="list-v"><li><div class="aplayer-container"><div class="aplayer-local"></div></div></li></ul></li><li></li><li><a class="menuitem flat-box faa-parent animated-hover" href="/pages/talk/" title="碎言碎语" active-action="action-pagestalk"><i class="fa-duotone fa-comments fa-fw"></i> 碎言碎语</a></li></ul></li><hr><li><a class="menuitem flat-box faa-parent animated-hover" target="_blank" rel="external nofollow noopener noreferrer" href="https://github.com/MHuiG" title="GitHub" active-action="action-https:githubcomMHuiG"><i class="fa-brands fa-github fa-fw"></i> GitHub</a></li></ul></li></ul></div><div class="m_search"><form name="searchform" class="form u-search-form"><i class="icon fa-solid fa-search fa-fw"></i> <input type="text" class="input u-search-input" placeholder="Search..."></form></div><ul class="switcher nav-list-h m-phone"><li><a class="s-search fa-solid fa-search fa-fw" target="_self" title="search"></a></li><li><a class="s-menu fa-solid fa-bars fa-fw" target="_self" title="menu"></a><ul class="menu-phone list-v navigation white-box"><li><a class="menuitem flat-box faa-parent animated-hover" title="索引"><i class="fa-duotone fa-list-alt fa-fw"></i> 索引</a><ul class="list-v"><li><a class="menuitem flat-box faa-parent animated-hover" href="/notes/" title="便签" active-action="action-notes"><i class="fa-duotone fa-books fa-fw"></i> 便签</a></li><li><a class="menuitem flat-box faa-parent animated-hover" href="/categories/" title="分类" active-action="action-categories"><i class="fa-duotone fa-folder-open fa-fw"></i> 分类</a></li><li><a class="menuitem flat-box faa-parent animated-hover" href="/tags/" title="标签" active-action="action-tags"><i class="fa-duotone fa-tags fa-fw"></i> 标签</a></li><li><a class="menuitem flat-box faa-parent animated-hover" href="/archives/" title="归档" active-action="action-archives"><i class="fa-duotone fa-archive fa-fw"></i> 归档</a></li></ul></li><li><a class="menuitem flat-box faa-parent animated-hover" href="/pages/friends/" title="友链" active-action="action-pagesfriends"><i class="fa-duotone fa-link fa-fw"></i> 友链</a><ul class="list-v"><li><a class="menuitem flat-box faa-parent animated-hover" href="https://www.travellings.cn/go-by-clouds.html" title="Travelling" target="_blank" active-action="action-https:wwwtravellingscngo-by-cloudshtml" rel="external nofollow noopener noreferrer"><i class="fa-duotone fa-subway fa-fw"></i> Travelling</a></li></ul></li><li><a class="menuitem flat-box faa-parent animated-hover" href="/pages/about/" title="关于" active-action="action-pagesabout"><i class="fa-duotone fa-user-tie fa-fw"></i> 关于</a><ul class="list-v"><li><a class="menuitem flat-box faa-parent animated-hover" href="/pages/time-machine/" title="时光机" active-action="action-pagestime-machine"><i class="fa-duotone fa-clock fa-fw"></i> 时光机</a></li><li><a class="menuitem flat-box faa-parent animated-hover" target="_blank" rel="noopener" href="https://mhuig.top/privacy-policy/" title="隐私政策" active-action="action-https:mhuigtopprivacy-policy"><i class="fa-duotone fa-user-secret fa-fw"></i> 隐私政策</a></li></ul></li><li><a class="menuitem flat-box faa-parent animated-hover" title="更多"><i class="fa-duotone fa-fan fa-spin fa-fw"></i> 更多</a><ul class="list-v"><li><a class="menuitem flat-box faa-parent animated-hover" href="/pages/beer/" title="Sponsor" active-action="action-pagesbeer"><i class="fa-duotone fa-heart-square fa-fw"></i> Sponsor</a></li><hr><li><a class="menuitem flat-box faa-parent animated-hover" title="博客管理"><i class="fa-duotone fa-user-shield fa-fw"></i> 博客管理</a><ul class="list-v"><li><a class="menuitem flat-box header toggle-mode-btn"><i class="fa-duotone fa-bat fa-fw"></i> 暗黑模式</a></li><li></li><li><a class="menuitem flat-box faa-parent animated-hover" href="/pages/rss/" title="RSS订阅" active-action="action-pagesrss"><i class="fa-duotone fa-rss fa-fw"></i> RSS订阅</a></li><li><a class="menuitem flat-box faa-parent animated-hover" href="/sitemap.xml" title="站点地图" active-action="action-sitemapxml"><i class="fa-duotone fa-sitemap fa-fw"></i> 站点地图</a></li><li><a class="menuitem flat-box faa-parent animated-hover" target="_blank" rel="external nofollow noopener noreferrer" href="https://mhuig.instatus.com/" title="Monitors" active-action="action-https:mhuiginstatuscom"><i class="fa-duotone fa-telescope fa-fw"></i> Monitors</a></li><li><a class="menuitem flat-box faa-parent animated-hover" target="_blank" rel="external nofollow noopener noreferrer" href="https://ssl.mhuig.top/" title="SSL Status" active-action="action-https:sslmhuigtop"><i class="fa-brands fa-expeditedssl fa-fw"></i> SSL Status</a></li></ul></li><hr><li><a class="menuitem flat-box faa-parent animated-hover" title="工具箱"><i class="fa-duotone fa-tools fa-fw"></i> 工具箱</a><ul class="list-v"><li><a class="menuitem flat-box faa-parent animated-hover" target="_blank" rel="external nofollow noopener noreferrer" href="https://rssbox.mhuig.top/" title="RSS Box" active-action="action-https:rssboxmhuigtop"><i class="fa-duotone fa-conveyor-belt-boxes fa-fw"></i> RSS Box</a></li><li><a class="menuitem flat-box faa-parent animated-hover" href="/havefun/Coco/" title="My Cat" active-action="action-havefunCoco"><i class="fa-duotone fa-cat fa-fw"></i> My Cat</a></li><li><a class="menuitem flat-box faa-parent animated-hover" href="/pages/talk/" title="碎言碎语" active-action="action-pagestalk"><i class="fa-duotone fa-comments fa-fw"></i> 碎言碎语</a></li></ul></li><hr><li><a class="menuitem flat-box faa-parent animated-hover" target="_blank" rel="external nofollow noopener noreferrer" href="https://github.com/MHuiG" title="GitHub" active-action="action-https:githubcomMHuiG"><i class="fa-brands fa-github fa-fw"></i> GitHub</a></li></ul></li></ul></li></ul></div></div></div></header><div id="l_body"><div id="l_cover"><div id="none" class="cover-wrapper docs featured" style="display:none"><div class="cover-bg lazyload placeholder" data-bg=""></div><div class="cover-body"><div class="top"><p class="title">Magicland</p><p class="subtitle">「看庭前花开花落,望天上云卷云舒」</p></div><div class="bottom"><div class="menu navigation"><div class="list-h"><a target="_blank" rel="external nofollow noopener noreferrer" href="https://github.com/MHuiG" active-action="action-https:githubcomMHuiG"><i class="fa-brands fa-github color-github fa-fw"></i><p>Github</p></a><a href="/pages/friends/" active-action="action-pagesfriends"><i class="fa-duotone fa-link color-friends fa-fw"></i><p>友链</p></a><a href="/pages/about/" active-action="action-pagesabout"><i class="fa-duotone fa-user-tie color-about fa-fw"></i><p>关于</p></a><a href="https://www.travellings.cn/go-by-clouds.html" target="_blank" active-action="action-https:wwwtravellingscngo-by-cloudshtml" rel="external nofollow noopener noreferrer"><i class="fa-duotone fa-subway color-travellings fa-fw"></i><p>Travelling</p></a></div></div></div></div><div id="scroll-down" style="display:none"><i class="fa fa-chevron-down scroll-down-effects"></i></div></div></div><div id="safearea"><div class="body-wrapper"><div id="l_main" class=""><article itemscope="" itemtype="http://schema.org/Article" class="article post white-box reveal md shadow floatable blur article-type-docs" id="docs" itemprop="blogPost"><link itemprop="mainEntityOfPage" href="https://blog.mhuig.top/notes/Echarts/"><span hidden="" itemprop="publisher" itemscope="" itemtype="http://schema.org/Organization"><meta itemprop="name" content="Magicland"></span><span hidden="" itemprop="post" itemscope="" itemtype="http://schema.org/CreativeWork"><meta itemprop="name" content="Echarts"><meta itemprop="description" content="ECharts是Apache开源的JavaScript数据可视化库，支持折线图、柱状图等50+图表类型，通过JSON配置实现主题切换、动态排序等交互效果。其基于ZRender引擎，支持Canvas/SVG双渲染，适配Web/移动端及Vue/React框架，广泛应用于金融分析、大屏监控等场景。"></span><span hidden=""><meta itemprop="image" content="/lib/favicon/android-chrome-192x192.png"></span><div class="article-meta" id="top"><span hidden="" itemprop="name headline"></span></div><div id="layoutHelper-page-plugins"></div><div id="post-body" itemprop="articleBody"><p><svg style="width:50px;margin:0 auto;display:block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><defs><style>.fa-secondary{opacity:.4}</style></defs><path class="fa-primary" d="M527.4 240H304V16.58C304 7.555 310.1 0 320 0 443.7 0 544 100.3 544 224 544 233 536.4 240 527.4 240zM558.4 288C567.6 288 575 295.8 573.8 305 566.1 360.9 539.1 410.6 499.9 447.3 493.9 452.1 484.5 452.5 478.7 446.7L320 288H558.4z"></path><path class="fa-secondary" d="M32 272C32 150.7 122.1 50.34 238.1 34.25 248.2 32.99 256 40.36 256 49.61V288L412.5 444.5C419.2 451.2 418.7 462.2 411 467.7 371.8 495.6 323.8 512 272 512 139.5 512 32 404.6 32 272z"></path></svg></p><p> <span class="p logo center large">Echarts</span></p><br><span id="more"></span><h1 hidden="">Echarts</h1><style>.prev-next{display:none!important}</style></div><div class="footer"></div><div class="article-meta" id="bottom"><div class="new-meta-box"></div></div><div class="prev-next"><a class="next" href="/notes/Echarts/Overview"><p class="title">Echarts<i class="fa-solid fa-chevron-right" aria-hidden="true"></i></p><p class="content">Echarts是功能强大的数据可视化库，支持折线图、柱状图、饼图、散点图等多种图表类型，提供丰富交互功能实现数据动态展示与用户交互，可通过灵活配置选项定制图表样式和布局，适用于Web、移动及桌面应用场景，帮助用户将复杂数据转化为直观图表以更好理解分析数据。</p></a></div><div class="recommended-article"><div class="recommended-article-header"><i class="fa-solid fa-bookmark fa-fw" aria-hidden="true"></i> <span>推荐阅读</span></div><div class="recommended-article-group"> <a class="recommended-article-item" href="/notes/Echarts/Overview.html" title="Echarts" rel="bookmark"><img src="https://static.mhuig.top/npm/imbox@0.0.15/c/81.webp" class="lazyload" data-srcset="https://static.mhuig.top/npm/imbox@0.0.15/c/81.webp" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Echarts"> <span class="title">Echarts</span></a> <a class="recommended-article-item" href="/notes/Azkaban/index.html" title="Azkaban" rel="bookmark"><img src="https://static.mhuig.top/npm/imbox@0.0.15/c/39.webp" class="lazyload" data-srcset="https://static.mhuig.top/npm/imbox@0.0.15/c/39.webp" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Azkaban"> <span class="title">Azkaban</span></a> <a class="recommended-article-item" href="/notes/NoSQL/index.html" title="NoSQL" rel="bookmark"><img src="https://static.mhuig.top/npm/imbox@0.0.15/c/70.webp" class="lazyload" data-srcset="https://static.mhuig.top/npm/imbox@0.0.15/c/70.webp" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="NoSQL"> <span class="title">NoSQL</span></a> <a class="recommended-article-item" href="/notes/Cryptography/index.html" title="Cryptography" rel="bookmark"><img src="https://static.mhuig.top/npm/imbox@0.0.15/c/36.webp" class="lazyload" data-srcset="https://static.mhuig.top/npm/imbox@0.0.15/c/36.webp" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Cryptography"> <span class="title">Cryptography</span></a> <a class="recommended-article-item" href="/notes/Kafka/index.html" title="Kafka" rel="bookmark"><img src="https://static.mhuig.top/npm/imbox@0.0.15/c/82.webp" class="lazyload" data-srcset="https://static.mhuig.top/npm/imbox@0.0.15/c/82.webp" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Kafka"> <span class="title">Kafka</span></a> <a class="recommended-article-item" href="/notes/Hadoop/index.html" title="Hadoop" rel="bookmark"><img src="https://static.mhuig.top/npm/imbox@0.0.15/c/6.webp" class="lazyload" data-srcset="https://static.mhuig.top/npm/imbox@0.0.15/c/6.webp" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Hadoop"> <span class="title">Hadoop</span></a></div></div></article></div><aside id="l_side" itemscope="" itemtype="http://schema.org/WPSideBar"><section class="widget text desktop mobile pjax"><header><a href="/notes/"><i class="fa-duotone fa-book fa-fw" aria-hidden="true"></i> <span class="name">Notes</span></a></header><div class="content"></div></section><section class="widget list group desktop mobile pjax"><header><i class="fa-duotone fa-chart-pie fa-fw" aria-hidden="true"></i> <span class="name">Echarts-数据可视化技术</span></header><div class="content"><ul class="list entry navigation"><li><a class="flat-box" title="/notes/Echarts/" href="/notes/Echarts/" active-action="action-notesEcharts"><div class="name"> Welcome</div></a></li><li><a class="flat-box" title="/notes/Echarts/Overview" href="/notes/Echarts/Overview" active-action="action-notesEchartsOverview"><div class="name"> Overview</div></a></li></ul></div></section><div class="widget-sticky pjax"></div><div class="pjax"></div><div class="pjax"></div><div class="pjax"></div><div class="pjax"></div><div class="pjax"></div><div class="pjax"></div><div class="pjax"></div><div class="pjax"></div><div class="pjax"></div><div class="pjax"></div><div class="pjax"></div><div class="pjax"></div><div class="pjax"></div><div class="pjax"></div><div class="pjax"></div><div class="pjax"></div><div class="pjax"></div><div class="pjax"></div><div class="pjax"></div><div class="pjax"></div><div class="pjax"></div><div class="pjax"></div><div class="pjax"></div><div class="pjax"></div><div class="pjax"></div><div class="pjax"></div><div class="pjax"></div><div class="pjax"></div><div class="pjax"></div><div class="pjax"></div><div class="pjax"></div><div class="pjax"></div><div class="pjax"></div><div class="pjax"></div></aside><pjax><script>window.pdata={},pdata.ispage=!1,pdata.commentPath="",pdata.commentPlaceholder="",pdata.commentConfig={};var l_header=document.getElementById("l_header");l_header.classList.add("show");var cover_wrapper=document.querySelector("#l_cover .cover-wrapper"),scroll_down=document.getElementById("scroll-down");cover_wrapper.id="none",cover_wrapper.style.display="none",scroll_down.style.display="none"</script></pjax></div><footer class="footer clearfix" itemscope="" itemtype="http://schema.org/WPFooter"><br><br><div class="aplayer-container"><div class="aplayer-local"></div></div><br><div class="social-wrapper" itemprop="about" itemscope="" itemtype="http://schema.org/Thing"><a href="/atom.xml" class="social fa-duotone fa-rss flat-btn" target="_blank" rel="external nofollow noopener noreferrer" itemprop="url"></a><a href="https://mhuig.top/contact/" class="social fa-duotone fa-envelope flat-btn" target="_blank" rel="external nofollow noopener noreferrer" itemprop="url"></a><a href="https://github.com/MHuiG" class="social fa-brands fa-github flat-btn" target="_blank" rel="external nofollow noopener noreferrer" itemprop="url"></a><a href="https://t.me/MHuiG" class="social fa-brands fa-telegram flat-btn" target="_blank" rel="external nofollow noopener noreferrer" itemprop="url"></a></div><div><p>博客内容遵循 <a target="_blank" rel="external nofollow noopener noreferrer" href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh-hans">署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议</a></p></div><div class="copyright"><p><a href="https://icp.gov.moe" target="_blank" rel="external nofollow noopener noreferrer">萌ICP备</a> <a href="https://icp.gov.moe/?keyword=2020012138" target="_blank" rel="external nofollow noopener noreferrer">2020012138号</a><br><a target="_blank" rel="noopener" href="https://mhuig.top/">Copyright © Since 2018 MHuiG</a></p></div></footer><a id="s-top" class="fa-solid fa-arrow-up fa-fw" title="top"></a></div></div><div><script>volantis.dom.bodyAnchor=volantis.dom.$(document.getElementById("safearea")),volantis.dom.topBtn=volantis.dom.$(document.getElementById("s-top")),volantis.dom.wrapper=volantis.dom.$(document.getElementById("wrapper")),volantis.dom.coverAnchor=volantis.dom.$(document.querySelector("#l_cover .cover-wrapper")),volantis.dom.switcher=volantis.dom.$(document.querySelector("#l_header .switcher .s-search")),volantis.dom.header=volantis.dom.$(document.getElementById("l_header")),volantis.dom.search=volantis.dom.$(document.querySelector("#l_header .m_search")),volantis.dom.mPhoneList=volantis.dom.$(document.querySelectorAll("#l_header .m-phone .list-v"))</script><script>volantis.css("https://static.mhuig.top/npm/volantis-static@0.0.1660614606622/libs/@fortawesome/fontawesome-pro/css/all.min.css")</script><script src="/js/app.js"></script><script>const rootElement=document.documentElement,darkModeStorageKey="color-scheme",rootElementDarkModeAttributeName="color-scheme",setLS=(e,t)=>{localStorage.setItem(e,t)},removeLS=e=>{localStorage.removeItem(e)},getLS=e=>localStorage.getItem(e),getModeFromCSSMediaQuery=()=>window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light",resetRootDarkModeAttributeAndLS=()=>{rootElement.removeAttribute("color-scheme"),removeLS("color-scheme")},validColorModeKeys={dark:!0,light:!0},applyCustomDarkModeSettings=e=>{const t=e||getLS("color-scheme");getCustomDarkMode(),t===getModeFromCSSMediaQuery()?resetRootDarkModeAttributeAndLS():validColorModeKeys[t]?rootElement.setAttribute("color-scheme",t):resetRootDarkModeAttributeAndLS()},invertDarkModeObj={dark:"light",light:"dark"},getCustomDarkMode=()=>{let e=getLS("color-scheme");if(validColorModeKeys[e])e=invertDarkModeObj[e];else{if(null!==e)return;e=invertDarkModeObj[getModeFromCSSMediaQuery()]}volantis.dark.mode="dark"==e?"light":"dark"},toggleCustomDarkMode=()=>{let e=getLS("color-scheme");if(validColorModeKeys[e])e=invertDarkModeObj[e];else{if(null!==e)return;e=invertDarkModeObj[getModeFromCSSMediaQuery()]}return setLS("color-scheme",e),e};function bindToggleButton(){document.querySelectorAll("#wrapper .toggle-mode-btn,#rightmenu-wrapper .toggle-mode-btn").forEach((function(e){volantis.dom.$(e).on("click",volantis.dark.toggle)}))}volantis.dark.toggle=()=>{const e=toggleCustomDarkMode();applyCustomDarkModeSettings(e),volantis.dark.method.toggle.start()},applyCustomDarkModeSettings(),document.addEventListener("DOMContentLoaded",(()=>{volantis.requestAnimationFrame(bindToggleButton)})),volantis.pjax.push(bindToggleButton);const darkModelListeners={dark:e=>{e.matches&&(volantis.dark.mode="dark"),volantis.dark.method.toggle.start()},light:e=>{e.matches&&(volantis.dark.mode="light"),volantis.dark.method.toggle.start()}};window.matchMedia("(prefers-color-scheme: dark)").addListener(darkModelListeners.dark),window.matchMedia("(prefers-color-scheme: light)").addListener(darkModelListeners.light)</script><script>function loadIssuesJS(){null!=document.getElementById("sites-api")&&"undefined"==typeof SitesJS&&volantis.js("/js/plugins/tags/sites.js");null!=document.getElementById("friends-api")&&"undefined"==typeof FriendsJS&&volantis.js("/js/plugins/tags/friends.js");null!=document.getElementById("contributors-api")&&"undefined"==typeof ContributorsJS&&volantis.js("/js/plugins/tags/contributors.js")}loadIssuesJS(),volantis.pjax.push((()=>{loadIssuesJS()}))</script><script defer="" src="https://cdn.bootcdn.net/ajax/libs/vanilla-lazyload/17.1.0/lazyload.min.js"></script><script>window.lazyLoadOptions={elements_selector:".lazyload",threshold:0},window.addEventListener("LazyLoad::Initialized",(function(n){window.lazyLoadInstance=n.detail.instance}),!1),document.addEventListener("DOMContentLoaded",(function(){lazyLoadInstance.update()})),document.addEventListener("pjax:complete",(function(){lazyLoadInstance.update()}))</script><script>window.FPConfig={delay:0,ignoreKeywords:["#"],maxRPS:6,hoverDelay:0}</script><script defer="" src="https://static.mhuig.top/npm/volantis-static@0.0.1660614606622/libs/flying-pages/flying-pages.min.js"></script><script>volantis.css("https://cdn.bootcdn.net/ajax/libs/aplayer/1.10.1/APlayer.min.css"),volantis.js("https://cdn.bootcdn.net/ajax/libs/aplayer/1.10.1/APlayer.min.js").then((()=>{function e(){document.querySelector(".aplayer-local-min")&&document.querySelectorAll(".aplayer-local-min").forEach((e=>{new APlayer(Object.assign({container:e,mini:!0,order:"list",volume:"0.7",autoplay:!1,loop:"all",theme:"#1BCDFC",listMaxHeight:"320px",listFolded:"true",preload:"auto",lrcType:3,audio:[{name:"虹之间",artist:"钢琴版伴奏",url:"https://blog.mhuig.top/music-Archive/BetweenTheRainbow.mp3",lrc:"https://blog.mhuig.top/music-Archive/BetweenTheRainbow.lrc",cover:"https://blog.mhuig.top/music-Archive/BetweenTheRainbow.jpg"},{name:"Avem",artist:"Alan Walker",url:"https://blog.mhuig.top/music-Archive/Avem.mp3",lrc:"https://blog.mhuig.top/music-Archive/Avem.lrc",cover:"https://blog.mhuig.top/music-Archive/Avem.jpg"},{name:"Fly",artist:"Marshmello / Leau Culver",url:"https://blog.mhuig.top/music-Archive/fly.mp3",lrc:"https://blog.mhuig.top/music-Archive/fly.lrc",cover:"https://blog.mhuig.top/music-Archive/fly.jpg"},{name:"Alone",artist:"Marshmello",url:"https://blog.mhuig.top/music-Archive/alone.mp3",lrc:"https://blog.mhuig.top/music-Archive/alone.lrc",cover:"https://blog.mhuig.top/music-Archive/alone.jpg"}]},JSON.parse(e.querySelector(".aplayer-local-min-conf").innerText)))}))}document.querySelectorAll(".aplayer-local").forEach((e=>{new APlayer({container:e,fixed:!1,order:"list",volume:"0.7",autoplay:!1,loop:"all",theme:"#1BCDFC",listMaxHeight:"320px",listFolded:"true",preload:"auto",lrcType:3,audio:[{name:"虹之间",artist:"钢琴版伴奏",url:"https://blog.mhuig.top/music-Archive/BetweenTheRainbow.mp3",lrc:"https://blog.mhuig.top/music-Archive/BetweenTheRainbow.lrc",cover:"https://blog.mhuig.top/music-Archive/BetweenTheRainbow.jpg"},{name:"Avem",artist:"Alan Walker",url:"https://blog.mhuig.top/music-Archive/Avem.mp3",lrc:"https://blog.mhuig.top/music-Archive/Avem.lrc",cover:"https://blog.mhuig.top/music-Archive/Avem.jpg"},{name:"Fly",artist:"Marshmello / Leau Culver",url:"https://blog.mhuig.top/music-Archive/fly.mp3",lrc:"https://blog.mhuig.top/music-Archive/fly.lrc",cover:"https://blog.mhuig.top/music-Archive/fly.jpg"},{name:"Alone",artist:"Marshmello",url:"https://blog.mhuig.top/music-Archive/alone.mp3",lrc:"https://blog.mhuig.top/music-Archive/alone.lrc",cover:"https://blog.mhuig.top/music-Archive/alone.jpg"}]})})),e(),volantis.pjax.push(e,"aplayerMin")}))</script><script>function check_giscus(){return"dark"===volantis.dark.mode?volantis.giscus.Theme="dark":volantis.giscus.Theme="light",document.getElementById("giscus_container")}function pjax_giscus(){const t=check_giscus();if(!t)return;let s=Object.assign({theme:{light:"light",dark:"dark"},repo:"MHuiG/talk","repo-id":"MDEwOlJlcG9zaXRvcnkyODQ4NDg1NTg=",category:"Giscus","category-id":"DIC_kwDOEPpxrs4B_X67",mapping:"pathname","reactions-enabled":"1","emit-metadata":"1",lang:"zh-CN","input-position":"top"},pdata.commentConfig);const e=document.createElement("script");e.setAttribute("src","https://giscus.app/client.js"),Object.keys(s).forEach((t=>{"theme"!=t&&e.setAttribute("data-"+t,s[t])})),e.setAttribute("data-theme",volantis.giscus.Theme),e.setAttribute("crossorigin","anonymous"),t.appendChild(e)}function dark_giscus(){if(!check_giscus())return;const t={setConfig:{theme:volantis.giscus.Theme}};document.querySelector("iframe.giscus-frame").contentWindow.postMessage({giscus:t},"https://giscus.app")}volantis.layoutHelper("comments",'<div id="giscus_container"></div>'),volantis.giscus={},pjax_giscus(),volantis.pjax.push(pjax_giscus),volantis.dark.push(dark_giscus)</script><script>async function loadSearchScript(){return volantis.js("/js/search/hexo.js")}function loadSearchService(){loadSearchScript(),document.querySelectorAll(".input.u-search-input").forEach((e=>{e.removeEventListener("focus",loadSearchService,!1)})),document.querySelectorAll(".u-search-form").forEach((e=>{e.addEventListener("submit",(e=>{e.preventDefault()}),!1)}))}function OpenSearch(e){"undefined"==typeof SearchService?loadSearchScript().then((()=>{SearchService.setQueryText(e),SearchService.search()})):(SearchService.setQueryText(e),SearchService.search())}if(window.location.search&&/^\?s=/g.test(window.location.search)){OpenSearch(decodeURI(window.location.search).replace(/\ /g,"-").replace(/^\?s=/g,""))}document.querySelectorAll(".input.u-search-input").forEach((e=>{e.addEventListener("focus",loadSearchService,!1)}))</script><script>function pjax_highlightjs_copyCode(){(document.querySelector(".highlight .code pre")||document.querySelector(".article pre code"))&&VolantisApp.utilCopyCode(".highlight .code pre, .article pre code")}volantis.requestAnimationFrame(pjax_highlightjs_copyCode),volantis.pjax.push(pjax_highlightjs_copyCode)</script><script>function load_swiper(){document.querySelectorAll(".swiper-container")[0]&&(volantis.css("https://cdn.bootcdn.net/ajax/libs/Swiper/8.3.2/swiper-bundle.min.css"),volantis.js("https://cdn.bootcdn.net/ajax/libs/Swiper/8.3.2/swiper-bundle.min.js").then((()=>{pjax_swiper()})))}function pjax_swiper(){volantis.swiper=new Swiper(".swiper-container",{slidesPerView:"auto",spaceBetween:8,centeredSlides:!0,loop:!0,pagination:{el:".swiper-pagination",clickable:!0},navigation:{nextEl:".swiper-button-next",prevEl:".swiper-button-prev"}})}load_swiper(),volantis.pjax.push((()=>{document.querySelectorAll(".swiper-container")[0]&&(void 0===volantis.swiper?load_swiper():pjax_swiper())}))</script><script>volantis.css("https://cdn.bootcdn.net/ajax/libs/pace/1.2.4/themes/blue/pace-theme-minimal.min.css"),volantis.js("https://cdn.bootcdn.net/ajax/libs/pace/1.2.4/pace.min.js").then((()=>{Pace.options.restartOnPushState=!1,volantis.pjax.send(Pace.restart,"Pace.restart"),volantis.scroll.push(volantis.debounce((()=>{Pace.stop(),Pace.trigger("start"),Pace.bar.update(100*volantis.scroll.progress()),document.body.className=document.body.className.replaceAll("pace-running ","")})),"阅读进度")}))</script><pjax></pjax><script>function listenSidebarTOC(){const t=document.querySelectorAll(".toc li");if(!t.length)return;const e=[];Array.from(t).forEach((t=>{const n=t.querySelector(".toc-link"),i=document.getElementById(n.getAttribute("href")?decodeURI(n.getAttribute("href")).replace("#",""):n.getAttribute("toc-action").split("toc-")[1]);return e.push(i),n.getAttribute("href")&&(n.setAttribute("toc-action","toc-"+decodeURI(n.getAttribute("href")).replace("#","")),n.removeAttribute("href")),i&&i.id&&n.addEventListener("click",(t=>{t.preventDefault(),volantis.scroll.to(i,{addTop:5,observer:!0}),history.pushState(null,document.title,"#"+i.id)})),i}));function n(t){if(t.classList.contains("active-current"))return;document.querySelectorAll(".toc .active").forEach((t=>{t.classList.remove("active","active-current")})),t.classList.add("active","active-current");let e=t.parentNode;for(;!e.matches(".toc");)e.matches("li")&&e.classList.add("active"),e=e.parentNode}volantis.activateNavIndex=0,n(t[volantis.activateNavIndex]),e[0]&&volantis.scroll.push(volantis.debounce((()=>{if(e[0].getBoundingClientRect().top>=0)volantis.activateNavIndex=0;else if(e[e.length-1].getBoundingClientRect().top<0)volantis.activateNavIndex=e.length-1;else for(let t=0;t<e.length;t++){const n=e[t],i=e[(t+1)%e.length];if(n.getBoundingClientRect().top<0&&i.getBoundingClientRect().top>=0){volantis.activateNavIndex=t;break}}n(t[volantis.activateNavIndex])})),"sidebar-toc")}document.addEventListener("DOMContentLoaded",(()=>{volantis.requestAnimationFrame(listenSidebarTOC)})),volantis.pjax.push(listenSidebarTOC,"listenSidebarTOC")</script><script>try{let e=(e,t,n=2)=>Math.abs(e-t)<=n,t=(t,n)=>!e(t.width,n.width)||!e(t.height,n.height),n=new WeakMap,i=(e,i=e.getClientBoundingRect())=>{let o=n.get(e);o&&!t(o,i)||(n.set(e,i),e.style["contain-intrinsic-size"]=`${i.width}px ${i.height}px`)},o=new IntersectionObserver(((e,t)=>{e.forEach((e=>{i(e.target,e.boundingClientRect)}))}),{rootMargin:"500px 0px 500px 0px"}),r=new ResizeObserver(((e,t)=>{e.forEach((e=>{i(e.target,e.contentRect)}))})),s=e=>{let t=document.querySelectorAll(e);t.length&&(t.forEach((e=>{o.observe(e),r.observe(e)})),requestAnimationFrame((()=>{requestAnimationFrame((()=>{t[0].style["content-visibility"]="auto"}))})))},a=()=>{"content-visibility"in document.documentElement.style&&s(".post-story")};a(),volantis.pjax.push(a)}catch(e){console.log(e)}</script><script>document.onreadystatechange=function(){if("complete"==document.readyState){const{saveData:e,effectiveType:t}=navigator.connection||navigator.mozConnection||navigator.webkitConnection||{};("none"==getComputedStyle(document.querySelector("#safearea"),null).display||e||/2g/.test(t))&&(document.querySelectorAll(".reveal").forEach((function(e){e.style.opacity="1"})),document.querySelector("#safearea").style.display="block")}}</script><script src="https://cdn.bootcdn.net/ajax/libs/pjax/0.2.8/pjax.min.js"></script><script>const performanceMonitor={slowThreshold:800,slowCount:0,maxSlowAllowed:1,requestStartTime:0,start(){this.requestStartTime=Date.now()},check(){Date.now()-this.requestStartTime>this.slowThreshold?this.slowCount++:this.slowCount=0},res(){return this.slowCount>=this.maxSlowAllowed}};var pjax;document.addEventListener("DOMContentLoaded",(function(){pjax=new Pjax({elements:'a[href]:not([href^="#"]):not([href="javascript:void(0)"]):not([pjax-fancybox]):not([onclick="return false;"]):not([onclick="return!1"]):not([target="_blank"]):not([target="view_window"]):not([href$=".xml"])',selectors:["head title","head meta[name=keywords]","head meta[name=description]","#l_main","#pjax-header-nav-list",".pjax","pjax","meta[name=robots]","link[rel=canonical]","meta[property='og:title']","meta[property='og:description']","meta[property='og:url']","meta[property='og:image']","script[type='application/ld+json']"],cacheBust:!1,timeout:900})})),document.addEventListener("pjax:send",(function(e){window.stop(),performanceMonitor.start();try{var t=window.location.pathname,o=e.triggerElement.href,n=[""];""!=n[0]&&n.forEach((e=>{-1==t.indexOf(e)&&-1==o.indexOf(e)||(window.location.href=o)})),performanceMonitor.res()&&(window.location.href=o)}catch(e){}volantis.pjax.method.send.start()})),document.addEventListener("pjax:complete",(function(){performanceMonitor.check(),document.querySelectorAll("script[data-pjax], .pjax-reload script").forEach((e=>{const t=e.text||e.textContent||e.innerHTML||"",o=document.createElement("script");Object.keys(e.attributes).forEach((t=>{o.setAttribute(e.attributes[t].nodeName,e.attributes[t].nodeValue)})),t&&o.appendChild(document.createTextNode(t)),e.parentNode.replaceChild(o,e)})),volantis.pjax.method.complete.start()})),document.addEventListener("pjax:error",(function(e){"pjax"===volantis.debug?(console.error(e),console.log("pjax error: \n"+JSON.stringify(e))):(volantis.pjax.method.error.start(),window.location.href=e.triggerElement.href)}))</script></div><pjax> <a style="display:none" target="_blank" rel="external nofollow noopener noreferrer" href="https://bot-trap.mhuig.top/">Are You A Robot?</a></pjax><script>(()=>{function t(){if("localhost:4000"!=window.location.host&&!/blog\.mhuig\.top/.test(window.location.host)){const t=document.createElement("meta");t.name="robots",t.content=atob("bm9pbmRleCwgbm9mb2xsb3csIG5vYXJjaGl2ZQ=="),document.head.appendChild(t)}}function o(){document.querySelector("figcaption")&&document.querySelectorAll("figcaption").forEach((t=>{volantis.dom.$(t).on("click",(function(){const t=!window.CodeBlockFullscreen;window.CodeBlockFullscreen=t;const o=document.getElementById("post")||document.getElementById("docs")||document.getElementById("page");if(!o)return;const e=this.parentElement,n=e.parentElement,l=document.documentElement,c=document.querySelectorAll(".highlight > table .gutter");o.classList.toggle("code-block-fullscreen",t),e.classList.toggle("code-block-fullscreen",t),n.classList.toggle("code-block-fullscreen",t),e.classList.toggle("code-block-fullscreen-overflow-auto",t),l.classList.toggle("code-block-fullscreen-html-scroll",t),c.forEach((o=>{o.classList.toggle("code-block-fullscreen-gutter",t)}))}))}))}t(),volantis.pjax.push(t),top.location!=self.location&&(top.location=self.location),"mhuig.github.io"==window.location.host||"localhost:4000"==window.location.host||/mhuig\.top$/.test(window.location.host)||/kix\.moe$/.test(window.location.host)||/mhuig/.test(window.location.host)||/ipfs/.test(window.location.host)||(window.location.href=atob("aHR0cHM6Ly9ibG9nLm1odWlnLnRvcC8=")),o(),volantis.pjax.push(o);const e=[{month:12,day:13},function(){const t=(new Date).getFullYear(),o=t%100,e=t>=2e3?4.81:5.59,n=Math.floor(o/4),l=Math.floor(.2422*o+e)-n;return{month:4,day:Math.max(4,l)}}(),{month:7,day:7},{month:9,day:18},{month:9,day:30}];function n(){document.documentElement.classList.remove("mourning-mode");if(!["/","/index.html","/index.htm","/index"].includes(window.location.pathname))return;const t=new Date,o=t.getMonth()+1,n=t.getDate();e.some((t=>t.month===o&&t.day===n))&&document.documentElement.classList.add("mourning-mode")}const l=document.createElement("style");l.textContent="\n html.mourning-mode {\n filter: grayscale(100%);\n -webkit-filter: grayscale(100%);\n transition: filter 0.5s ease;\n }\n ",document.head.appendChild(l),n(),document.addEventListener("pjax:complete",n)})()</script></body></html>