| <!doctype html> |
| <html data-n-head-ssr lang="en" data-n-head="%7B%22lang%22:%7B%22ssr%22:%22en%22%7D%7D"> |
| <head> |
| <meta charset="utf-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
| <meta name="viewport" content="width=device-width,initial-scale=1"> |
| <title>SVG Base Map - Geo - Common Components - How To Guides - Handbook - Apache ECharts</title><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="shortcut icon" type="image/png" href="https://echarts.apache.org/en/images/favicon.png"><link data-n-head="ssr" rel="stylesheet" href="//echarts.apache.org/en/js/vendors/bootstrap@3.3.7/css/bootstrap.min.css"><link data-n-head="ssr" rel="stylesheet" href="https://echarts.apache.org/en/css/main.css"><link data-n-head="ssr" rel="stylesheet" href="//echarts.apache.org/en/js/vendors/docsearch.js@2.6.3/dist/cdn/docsearch.min.css"><script data-n-head="ssr">window.ECHARTS_WWW_VENDORS_CDN_ROOT="//echarts.apache.org/en/js/vendors/"</script><script data-n-head="ssr" src="//echarts.apache.org/en/js/vendors/jquery@3.7.1/dist/jquery.min.js"></script><script data-n-head="ssr" src="//echarts.apache.org/en/js/vendors/bootstrap@3.3.7/js/bootstrap.min.js"></script><script data-n-head="ssr" src="//echarts.apache.org/en/js/vendors/docsearch.js@2.6.3/dist/cdn/docsearch.min.js"></script><link rel="preload" href="/handbook/_nuxt/2d53fcd.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/fa73816a85b29fbf7562.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8117eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/b964c20bb1562bc48da6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6b95e13.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/926187fdeb8e698e0437.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/be446d2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8284fb35e00f68dfbb0.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/3556c50.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8cbc28eba39ffdac2c44.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/8117eb7.css"><link rel="stylesheet" href="/handbook/_nuxt/css/6b95e13.css"><link rel="stylesheet" href="/handbook/_nuxt/css/be446d2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/3556c50.css"> |
| </head> |
| <body> |
| <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png?_v_=20240226" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v6-upgrade-guide">V6 Upgrade Guide</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://github.com/apache/echarts-custom-series">Download Custom Series</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li><li id="nav-github"><a href="https://github.com/apache/echarts" target="_blank"><svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-262.000000, -2480.000000)" fill="#333"><g transform="translate(252.000000, 2470.000000)"><path d="M29.9006449,27.904446 C28.5016932,29.8668872 26.6944882,31.2248797 24.4790301,31.9784237 C24.2211218,32.0272886 24.0325745,31.9931534 23.9133882,31.876018 C23.7942019,31.7588827 23.7346171,31.6119968 23.7346338,31.4353603 L23.7346338,28.3376019 C23.7346338,27.3880159 23.4865017,26.6930482 22.9902375,26.2526987 C23.5347812,26.1938141 24.024319,26.1058042 24.458851,25.9886688 C24.893383,25.8715335 25.3422785,25.680801 25.8055376,25.4164714 C26.2687966,25.1521418 26.6556591,24.8267354 26.9661251,24.4402521 C27.276591,24.0537688 27.5296112,23.5398222 27.7251857,22.8984123 C27.9207602,22.2570024 28.0185475,21.5203805 28.0185475,20.6885464 C28.0185475,19.504056 27.6414612,18.4959023 26.8872886,17.6640854 C27.240536,16.7733669 27.2023419,15.7752328 26.7727063,14.6696833 C26.5050218,14.5813565 26.1181593,14.6352226 25.6121189,14.8312818 C25.1060784,15.0273409 24.6669591,15.2428141 24.2947609,15.4777015 L23.7502256,15.8300324 C22.8622108,15.5757225 21.9454689,15.4485675 21,15.4485675 C20.0545311,15.4485675 19.1377892,15.5757225 18.2497744,15.8300324 C18.0969813,15.7223001 17.8940788,15.5901353 17.641067,15.433538 C17.3880551,15.2769408 16.9892689,15.0884007 16.4447085,14.8679176 C15.9001481,14.6474346 15.4894467,14.5813479 15.2126043,14.6696576 C14.7921266,15.7758408 14.7588206,16.7739749 15.1126863,17.6640597 C14.3585137,18.4958938 13.9814275,19.5040475 13.9814275,20.6885208 C13.9814275,21.5203548 14.0792147,22.2544676 14.2747892,22.8908591 C14.4703637,23.5272505 14.720944,24.0411971 15.0265302,24.4326988 C15.3321164,24.8242005 15.7165391,25.1521076 16.1797981,25.41642 C16.6430571,25.6807325 17.0919527,25.871465 17.5264847,25.9886174 C17.9610167,26.1057699 18.4505545,26.1937799 18.9950982,26.2526473 C18.6131238,26.60467 18.3790461,27.1085884 18.292865,27.7644025 C18.0924107,27.8621152 17.8775846,27.935404 17.6483866,27.984269 C17.4191886,28.0331339 17.1469167,28.0575663 16.831571,28.0575663 C16.5162253,28.0575663 16.203612,27.9523346 15.8937309,27.7418712 C15.5838499,27.5314078 15.3189144,27.225424 15.0989244,26.8239198 C14.9174043,26.5107253 14.6857747,26.2564154 14.4040358,26.0609899 C14.1222969,25.8655645 13.8860801,25.7481209 13.6953854,25.708659 L13.4084408,25.6644956 C13.2079866,25.6644956 13.069557,25.6864188 12.9931521,25.7302654 C12.9167472,25.7741119 12.8929083,25.8304873 12.9216353,25.8993914 C12.9503623,25.9682956 12.9934529,26.0368829 13.050907,26.1051533 C13.1083611,26.1734238 13.1703941,26.2319915 13.2370061,26.2808564 L13.336924,26.3541538 C13.5471712,26.4518665 13.7549701,26.6378974 13.9603209,26.9122466 C14.1656716,27.1865958 14.3160164,27.4362043 14.4113555,27.661072 L14.554364,27.9983735 C14.67843,28.3704354 14.8886689,28.6714094 15.1850804,28.9012955 C15.481492,29.1311815 15.8014334,29.2780674 16.1449045,29.3419532 C16.4883756,29.405839 16.8202406,29.4399742 17.1404995,29.4443589 C17.4607584,29.4487435 17.7256939,29.4315218 17.935306,29.3926936 L18.2644137,29.3335008 C18.2644137,29.7055627 18.2668619,30.1412107 18.2717584,30.6404447 C18.2766548,31.1396787 18.279103,31.4040083 18.279103,31.4334334 C18.279103,31.6094533 18.21707,31.7563392 18.093004,31.8740912 C17.9689379,31.9918431 17.7779507,32.0259784 17.5200424,31.9764969 C15.3045843,31.22297 13.4973793,29.8649774 12.0984276,27.9025191 C10.6994759,25.9400608 10,23.7305118 10,21.2738721 C10,19.2281225 10.4916769,17.3417791 11.4750308,15.6148418 C12.4583846,13.8879045 13.7928551,12.5202092 15.4784422,11.5117558 C17.1640293,10.5033024 19.0045486,9.99938397 21,10.0000006 C22.9954514,10.0006172 24.8359707,10.5045356 26.5215578,11.5117558 C28.2071449,12.518976 29.5416154,13.8866713 30.5249692,15.6148418 C31.5083231,17.3430123 32,19.2293557 32,21.2738721 C31.9990725,23.7324558 31.2995966,25.9420048 29.9006449,27.904446 Z"></path></g></g></g></svg></a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/basics/release-note/v6-feature" class="nav-link"><span class="title">ECharts 6 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v6-upgrade-guide" class="nav-link"><span class="title">Migration from v5 to v6</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-feature" class="nav-link"><span class="title">5.0</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">Migration from v4 to v5</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-3-0" class="nav-link"><span class="title">5.3</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-4-0" class="nav-link"><span class="title">5.4</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-5-0" class="nav-link"><span class="title">5.5</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-6-0" class="nav-link"><span class="title">5.6</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">Bar</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Line</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Pie</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Scatter</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Common Components</span> <span class="glyphicon glyphicon-menu-up"></span></a> <ul class="nav bd-sidenav level2"><li class="nav-item"><a class="nav-link"><span class="title">Geo</span> <span class="glyphicon glyphicon-menu-up"></span></a> <ul class="nav bd-sidenav level3"><li class="nav-item"><a href="/handbook/en/how-to/component-types/geo/svg-base-map" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">SVG Base Map</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Animation</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/animation/transition" class="nav-link"><span class="title">Data Transition</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/interaction/coarse-pointer" class="nav-link"><span class="title">Intelligent Pointer Snapping</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/best-practices/aria" class="nav-link"><span class="title">Aria</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="svg-base-map" tabindex="-1">SVG Base Map</h1> <p>Since <code>v5.1.0</code>, ECharts support to use SVG as the base map in <a href="https://echarts.apache.org/option.html#geo">geo coordinate system</a> and <a href="https://echarts.apache.org/option.html#series-map">map series</a>, where previously only <a href="https://echarts.apache.org/api.html#echarts.registerMap">GeoJSON</a> is supported.</p> <p>This feature enables ECharts to display SVG in either of the render modes (<code>canvas</code> render mode and <code>svg</code> render mode), and enables features like <a href="https://echarts.apache.org/option.html#geo.roam">zoom</a>, <a href="https://echarts.apache.org/option.html#geo.roam">pan</a>, <a href="https://echarts.apache.org/option.html#geo.select">select</a>, <a href="https://echarts.apache.org/option.html#geo.emphasis">emphasis</a>, <a href="https://echarts.apache.org/option.html#geo.emphasis.focus">focus-blur</a>, <a href="https://echarts.apache.org/option.html#geo.label">label</a>, <a href="https://echarts.apache.org/option.html#series-map.labelLayout">labelLayout</a>, <a href="https://echarts.apache.org/option.html#geo.tooltip">tooltip</a> on SVG with only simple some ECharts options. Series like <a href="https://echarts.apache.org/option.html#series-scatter">scatter</a>, <a href="https://echarts.apache.org/option.html#series-effectScatter">effectScatter</a>, <a href="https://echarts.apache.org/option.html#series-lines">lines</a>, <a href="https://echarts.apache.org/option.html#series-custom">custom</a> that are available on <a href="https://echarts.apache.org/option.html#geo">geo coordinate system</a> can also be positioned and displayed based on SVG base map.</p> <p>There are several examples where SVG base map is used: |
| <a href="https://echarts.apache.org/examples/en/editor.html?c=geo-beef-cuts">Beef Cuts</a> | |
| <a href="https://echarts.apache.org/examples/en/editor.html?c=geo-organ">Organ Visualization</a> | |
| <a href="https://echarts.apache.org/examples/en/editor.html?c=geo-seatmap-flight">Flight Seatmap</a> | |
| <a href="https://echarts.apache.org/examples/en/editor.html?c=geo-svg-map">SVG Map</a> | |
| <a href="https://echarts.apache.org/examples/en/editor.html?c=geo-svg-scatter-simple">SVG Scatter</a> | |
| <a href="https://echarts.apache.org/examples/en/editor.html?c=geo-svg-lines">SVG Lines</a> | |
| <a href="https://echarts.apache.org/examples/en/editor.html?c=geo-svg-traffic">SVG Traffic</a></p> <h2 id="basic-usage" tabindex="-1">Basic Usage</h2> <p>The usage of SVG base map is the same as the usage of <a href="https://echarts.apache.org/api.html#echarts.registerMap">GeoJSON</a>.</p> <p>If using it in <a href="https://echarts.apache.org/option.html#geo">geo coordinate system</a>: |
| </p><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code>$<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'map/organ.svg'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>svg<span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| <span class="token comment">// Firstly we need to register SVG raw string or parsed SVG DOM</span> |
| <span class="token comment">// to echarts with a name:</span> |
| echarts<span class="token punctuation">.</span><span class="token function">registerMap</span><span class="token punctuation">(</span><span class="token string">'organ_diagram'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>svg<span class="token operator">:</span> svg<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| |
| <span class="token keyword">var</span> chart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'main'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| chart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token punctuation">{</span> |
| geo<span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token comment">// Reference it in echarts option.</span> |
| map<span class="token operator">:</span> <span class="token string">'organ_diagram'</span><span class="token punctuation">,</span> |
| <span class="token operator">...</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div><p></p> <p>If using it in <a href="https://echarts.apache.org/option.html#series-map">map series</a>: |
| </p><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code>$<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'map/beef_cuts.svg'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>svg<span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| <span class="token comment">// Firstly we need to register SVG raw string or parsed SVG DOM</span> |
| <span class="token comment">// to echarts with a name:</span> |
| echarts<span class="token punctuation">.</span><span class="token function">registerMap</span><span class="token punctuation">(</span><span class="token string">'beef_cuts_diagram'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>svg<span class="token operator">:</span> svg<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| |
| <span class="token keyword">var</span> chart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'main'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| chart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token punctuation">{</span> |
| series<span class="token operator">:</span> <span class="token punctuation">{</span> |
| type<span class="token operator">:</span> <span class="token string">'map'</span><span class="token punctuation">,</span> |
| <span class="token comment">// Reference it in echarts option.</span> |
| map<span class="token operator">:</span> <span class="token string">'beef_cuts_diagram'</span><span class="token punctuation">,</span> |
| <span class="token operator">...</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div><p></p> <h2 id="zoom-and-pan" tabindex="-1">Zoom and Pan</h2> <p>For <a href="https://echarts.apache.org/option.html#geo">Geo coordinate system</a> </p><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code>option <span class="token operator">=</span> <span class="token punctuation">{</span> |
| geo<span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token comment">// Enable zoom and pan.</span> |
| roam<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> |
| <span class="token operator">...</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> |
| For <a href="https://echarts.apache.org/option.html#series-map">map series</a> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code>option <span class="token operator">=</span> <span class="token punctuation">{</span> |
| series<span class="token operator">:</span> <span class="token punctuation">{</span> |
| type<span class="token operator">:</span> <span class="token string">'map'</span><span class="token punctuation">,</span> |
| <span class="token comment">// Enable zoom and pan.</span> |
| roam<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> |
| <span class="token operator">...</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div><p></p> <p>See <a href="https://echarts.apache.org/option.html#geo.roam">roam</a>. |
| See also example <a href="https://echarts.apache.org/examples/en/editor.html?c=geo-svg-map">SVG Map</a>.</p> <h2 id="named-element" tabindex="-1">Named Element</h2> <p>If intending to interact with some elements of SVG, we need to mark those elements in SVG firstly. That can be done simply by adding names to the target elements. The interaction related feature like <a href="https://echarts.apache.org/option.html#geo.select">select</a>, <a href="https://echarts.apache.org/option.html#geo.emphasis">emphasis</a>, <a href="https://echarts.apache.org/option.html#geo.emphasis.focus">focus-blur</a>, <a href="https://echarts.apache.org/option.html#geo.label">label</a>, <a href="https://echarts.apache.org/option.html#series-map.labelLayout">labelLayout</a>, <a href="https://echarts.apache.org/option.html#geo.tooltip">tooltip</a> depend on those named elements.</p> <p>For example, we add name attribute <code>name="named_rect"</code> only to the left SVG <code>path</code>. |
| </p><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-xml line-numbers"><code><span class="token prolog"><?xml version="1.0" encoding="utf-8"?></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span> <span class="token attr-name">xmlns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://www.w3.org/2000/svg<span class="token punctuation">"</span></span> <span class="token attr-name">version</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1.2<span class="token punctuation">"</span></span> <span class="token attr-name">fill-rule</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>evenodd<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">xml:</span>space</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>preserve<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>path</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>named_rect<span class="token punctuation">"</span></span> <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>M 0,0 L 0,100 100,100 100,0 Z<span class="token punctuation">"</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#765<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>path</span> <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>M 150,0 L 150,100 250,100 250,0 Z<span class="token punctuation">"</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#567<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> |
| Then hover on the left rect, it can be highlighted, whereas the right one can not.<p></p> <p><iframe width="100%" height="200" src=""></iframe></p> <p>Option for some certain named elements can be specified in <a href="https://echarts.apache.org/option.html#geo.regions">geo.regions</a>, like: |
| </p><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code>option <span class="token operator">=</span> <span class="token punctuation">{</span> |
| geo<span class="token operator">:</span> <span class="token punctuation">{</span> |
| map<span class="token operator">:</span> <span class="token string">'some_svg'</span><span class="token punctuation">,</span> |
| regions<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> |
| name<span class="token operator">:</span> <span class="token string">'element_name_1'</span><span class="token punctuation">,</span> |
| itemStyle<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
| name<span class="token operator">:</span> <span class="token string">'element_name_2'</span><span class="token punctuation">,</span> |
| itemStyle<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">]</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div><p></p> <p>Note:</p> <ul><li>These SVG elements can be named and recognized by ECharts: |
| <code>rect</code>, <code>circle</code>, <code>line</code>, <code>ellipse</code>, <code>polygon</code>, <code>polyline</code>, <code>path</code>, <code>text</code>, <code>tspan</code>, <code>g</code>.</li> <li>It is supported that multiple elements are named with the same name, will they will be highlighted/selected together.</li></ul> <h2 id="style-customization" tabindex="-1">Style Customization</h2> <p>Although the style (such as color, font, lineWidth, ...) of SVG Elements can be defined directly in SVG file, style of named elements can also be customized in ECharts option, which will be handy in some scenario.</p> <p>Styles can be specified in <a href="https://echarts.apache.org/option.html#geo.itemStyle">geo.itemStyle</a> and <a href="https://echarts.apache.org/option.html#series-map.itemStyle">series-map.itemStyle</a> (also includes <code>emphasis.itemStyle</code>, <code>select.itemStyle</code>, <code>blur.itemStyle</code>, <code>regions[i].itemStyle</code>, <code>regions[i].emphasis.itemStyle</code>, <code>regions[i].select.itemStyle</code>, <code>regions[i].blur.itemStyle</code>). Some default style of the named elements can also be removed here (e.g., set <code>emphasis.itemStyle.color: null</code> to prevent the fill color from changing when mouse hovering.)</p> <p>Moreover, named elements can also be styled by <a href="https://echarts.apache.org/option.html#visualMap">visualMap component</a> if using <a href="https://echarts.apache.org/option.html#series-map">series-map</a>. See <a href="https://echarts.apache.org/examples/en/editor.html?c=geo-beef-cuts">Beef Cuts</a>.</p> <p>Note: |
| Only these named elements can be styled in <code>itemStyle</code>: |
| <code>rect</code>, <code>circle</code>, <code>line</code>, <code>ellipse</code>, <code>polygon</code>, <code>polyline</code>, <code>path</code>.</p> <h2 id="select" tabindex="-1">Select</h2> <p>Named elements can adopt "select" feature by setting <a href="https://echarts.apache.org/option.html#geo.selectedMode">geo.selectedMode</a> or <a href="https://echarts.apache.org/option.html#series-map.selectedMode">series-map.selectedMode</a> as <code>'single'</code> or <code>'multiple'</code>. The style of element when selected can be specified in <a href="https://echarts.apache.org/option.html#geo.select">geo.select</a> or <a href="https://echarts.apache.org/option.html#series-map.select">series-map.select</a>.</p> <p>The selected names can be obtained by <a href="https://echarts.apache.org/api.html#event.geoselectchanged">geoselectchanged</a> event, like: |
| </p><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code>myChart<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'geoselectchanged'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>params<span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| <span class="token keyword">var</span> selectedNames <span class="token operator">=</span> params<span class="token punctuation">.</span>allSelected<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>name<span class="token punctuation">;</span> |
| <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'selected'</span><span class="token punctuation">,</span> selectedNames<span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div><p></p> <p>See <a href="https://echarts.apache.org/examples/en/editor.html?c=geo-seatmap-flight">Flight Seatmap</a> for more details.</p> <h2 id="emphasis-and-focus-blur" tabindex="-1">Emphasis and Focus-Blur</h2> <p><code>emphasis</code> state (highlight when hovering) can be auto adopted to named elements.</p> <p>Especially, <a href="https://echarts.apache.org/option.html#geo.emphasis.focus">geo.emphasis.focus</a> and be set as <code>'self'</code> to enable "focus-blur" feature, where all all of the other elements will be blurred when hovering on an named element.</p> <p>See <a href="https://echarts.apache.org/examples/en/editor.html?c=geo-organ">Organ Visualization</a> for more details.</p> <h2 id="tooltip" tabindex="-1">Tooltip</h2> <p>Tooltip can be enabled or disabled on named elements. |
| </p><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code>option <span class="token operator">=</span> <span class="token punctuation">{</span> |
| <span class="token comment">// Need to declare the root tooltip to</span> |
| <span class="token comment">// enable tooltip feature on ECharts.</span> |
| tooltip<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> |
| geo<span class="token operator">:</span> <span class="token punctuation">{</span> |
| map<span class="token operator">:</span> <span class="token string">'some_svg'</span><span class="token punctuation">,</span> |
| tooltip<span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token comment">// Use `show` to enable/disable tooltip</span> |
| <span class="token comment">// on geo coordinate system.</span> |
| show<span class="token operator">:</span> <span class="token boolean">true</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| regions<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> |
| name<span class="token operator">:</span> <span class="token string">'some_name1'</span><span class="token punctuation">,</span> |
| <span class="token comment">// Set named element specified tooltip option if needed.</span> |
| tooltip<span class="token operator">:</span> <span class="token punctuation">{</span> |
| formatter<span class="token operator">:</span> <span class="token string">'some special tooltip 1'</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
| name<span class="token operator">:</span> <span class="token string">'some_name2'</span><span class="token punctuation">,</span> |
| tooltip<span class="token operator">:</span> <span class="token punctuation">{</span> |
| formatter<span class="token operator">:</span> <span class="token string">'some special tooltip 2'</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">]</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div><p></p> <p>If intending to disable the geo tooltip when hovering a on named elements, just: |
| </p><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code>option <span class="token operator">=</span> <span class="token punctuation">{</span> |
| tooltip<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> |
| geo<span class="token operator">:</span> <span class="token punctuation">{</span> |
| map<span class="token operator">:</span> <span class="token string">'some_svg'</span><span class="token punctuation">,</span> |
| tooltip<span class="token operator">:</span> <span class="token punctuation">{</span> |
| show<span class="token operator">:</span> <span class="token boolean">false</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div><p></p> <p>See <a href="https://echarts.apache.org/examples/en/editor.html?c=geo-svg-map">SVG Map</a> for more details.</p> <h2 id="label" tabindex="-1">Label</h2> <p>Although text label can be declared in SVG file directly via <code><text></code>/<code><tspan></code>, we can also use ECharts built-in label feature on named elements by specifying <a href="https://echarts.apache.org/option.html#geo.label">geo.label</a> or <a href="https://echarts.apache.org/option.html#series-map.label">series-map.label</a>.</p> <p>By default the label feature is enabled when hovering on a named element. If intending to disable it, just: |
| </p><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code>option <span class="token operator">=</span> <span class="token punctuation">{</span> |
| geo<span class="token operator">:</span> <span class="token punctuation">{</span> |
| map<span class="token operator">:</span> <span class="token string">'some_svg'</span><span class="token punctuation">,</span> |
| emphasis<span class="token operator">:</span> <span class="token punctuation">{</span> |
| label<span class="token operator">:</span> <span class="token punctuation">{</span> |
| show<span class="token operator">:</span> <span class="token boolean">false</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div><p></p> <p>When multiple elements need to share one label text, we have two choices:</p> <ul><li>Wrap those elements in a named <code><g></code> (e.g., <code><g name="name_a"></code>), where a single label will be displayed and located based on the bounding rect of the <code><g></code>.</li> <li>Name those elements with the same name (e.g., <code><path name="name_b"/><path name="name_b"/></code>), where multiple labels will be displayed and located based on each elements self.</li></ul> <p>For example (hover to show the labels): |
| <iframe width="100%" height="300" src=""></iframe></p> <p>Note: Only these named elements can be labeled via <code>label</code> option: |
| <code>rect</code>, <code>circle</code>, <code>line</code>, <code>ellipse</code>, <code>polygon</code>, <code>polyline</code>, <code>path</code>, <code>g</code>.</p> <p>See also <a href="https://echarts.apache.org/examples/en/editor.html?c=geo-organ">Organ Visualization</a> for the usage of label.</p> <h2 id="events" tabindex="-1">Events</h2> <p>Mouse events or touch events of named elements can be listened simply by: |
| </p><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code><span class="token comment">// 'name1' is a name of a SVG element.</span> |
| myChart<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> geoIndex<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'name1'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>params<span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>params<span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div><p></p> <h2 id="layout-of-svg-base-map" tabindex="-1">Layout of SVG Base Map</h2> <p>By default ECharts will position the SVG base map in the center of the canvas. If need some adjust, we usually only adjust <a href="https://echarts.apache.org/option.html#geo.layoutCenter">layoutCenter</a>/<a href="https://echarts.apache.org/option.html#geo.layoutSize">layoutSize</a>, and occasionally <code><svg viewBox="..."></code>/<a href="https://echarts.apache.org/option.html#geo.boundingCoords">geo.boundingCoords</a> (difference: clip or not). In most cases they are enough.</p> <p>If need some advanced precise control of the position and zoom, several concepts below can be noticed.</p> <p>The layout rule and options of <a href="https://echarts.apache.org/option.html#geo">geo coordinate system</a> and <a href="https://echarts.apache.org/option.html#series-map">map series</a> are the same. So we only demonstrate <a href="https://echarts.apache.org/option.html#geo">geo coordinate system</a> below.</p> <p><iframe width="100%" height="600" src=""></iframe></p> <p>The demo above shows six <a href="https://echarts.apache.org/option.html#geo">geo coordinate system</a> with three SVG files in a single ECharts canvas. Each two <a href="https://echarts.apache.org/option.html#geo">geo</a> that are in the same column use the same SVG file.</p> <p>Firstly, what shapes looks like is determined by SVG file itself. That is, in the demo above, determined by the <code><circle></code> and <code>viewBox</code> attribute (<code>viewBox</code> cut (clips) the circle). We can noticed that the final shape outlines in each column are the same (despite the difference in position, size and scratch), since they use the same SVG file.</p> <p>Secondly, users can use either of the two option groups below to determine the location and the size of the <code>geo view port</code> of <a href="https://echarts.apache.org/option.html#geo">geo coordinate system</a> according to the entire chart canvas (all of these options are measured in echarts canvas pixel, or percentage value):</p> <ul><li><a href="https://echarts.apache.org/option.html#geo.layoutCenter">layoutCenter</a>, <a href="https://echarts.apache.org/option.html#geo.layoutSize">layoutSize</a> (recommended).</li> <li><a href="https://echarts.apache.org/option.html#geo.top">top</a>, <a href="https://echarts.apache.org/option.html#geo.right">right</a>, <a href="https://echarts.apache.org/option.html#geo.bottom">bottom</a>, <a href="https://echarts.apache.org/option.html#geo.left">left</a> (which is used in the demo above).</li></ul> <p>In the demo above, the six geo <code>geo view ports</code> are displayed as six black squares.</p> <p>Thirdly, a <code>bounding rect</code> of the SVG is determined, which is determined by methods below (all of them are measured in SVG local unit):</p> <ol><li>If <a href="https://echarts.apache.org/option.html#geo.boundingCoords">geo.boundingCoords</a> is specified, use it as <code>bounding rect</code>.</li> <li>Else if <code><svg width="..." height="..."></code> is specified, use <code>[0, 0, width, height]</code> as <code>bounding rect</code>. (If only <code>width</code> or only <code>height</code> is specified, only use <code>[0, width]</code> or <code>[0, height]</code>).</li> <li>Else if <code>svg viewBox="..."></code> is specified, use <code>viewBox</code> as <code>bounding rect</code>.</li> <li>Else use the union bounding rect of all of the SVG elements as the <code>bounding rect</code>.</li> <li>If <a href="https://echarts.apache.org/option.html#geo.center">geo.center</a> or <a href="https://echarts.apache.org/option.html#geo.zoom">geo.zoom</a> is specified, transform the <code>bounding rect</code> determined by <code>1~4</code> above.</li></ol> <p>Having <code>bounding rect</code> determined, it will be placed into its corresponding <code>geo view port</code>:</p> <ul><li>If <a href="https://echarts.apache.org/option.html#geo.layoutCenter">layoutCenter</a>, <a href="https://echarts.apache.org/option.html#geo.layoutSize">layoutSize</a> is used, the <code>bounding rect</code> will be placed at the center and as big as possible into the <code>geo view port</code> (keep aspect ratio).</li> <li>If <a href="https://echarts.apache.org/option.html#geo.top">top</a>, <a href="https://echarts.apache.org/option.html#geo.right">right</a>, <a href="https://echarts.apache.org/option.html#geo.bottom">bottom</a>, <a href="https://echarts.apache.org/option.html#geo.left">left</a> is used, the view rect will be stretched to fill the <code>geo view port</code> entirely.</li></ul> <h2 id="place-series-on-svg-base-map" tabindex="-1">Place Series on SVG Base Map</h2> <p>Series like <a href="https://echarts.apache.org/option.html#series-scatter">scatter</a>, <a href="https://echarts.apache.org/option.html#series-effectScatter">effectScatter</a>, <a href="https://echarts.apache.org/option.html#series-lines">lines</a>, <a href="https://echarts.apache.org/option.html#series-custom">custom</a> that are available on <a href="https://echarts.apache.org/option.html#geo">geo coordinate system</a> can also be positioned and displayed on SVG base map.</p> <p>Note that in this kind of usage the unit of series data value is the SVG file local coords. For example: |
| </p><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code>option <span class="token operator">=</span> <span class="token punctuation">{</span> |
| geo<span class="token operator">:</span> <span class="token punctuation">{</span> |
| map<span class="token operator">:</span> <span class="token string">'some_svg'</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| series<span class="token operator">:</span> <span class="token punctuation">{</span> |
| type<span class="token operator">:</span> <span class="token string">'effectScatter'</span><span class="token punctuation">,</span> |
| coordinateSystem<span class="token operator">:</span> <span class="token string">'geo'</span><span class="token punctuation">,</span> |
| geoIndex<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> |
| data<span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token comment">// SVG local coords.</span> |
| <span class="token punctuation">[</span><span class="token number">488.2358421078053</span><span class="token punctuation">,</span> <span class="token number">459.70913833075736</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token number">770.3415644319939</span><span class="token punctuation">,</span> <span class="token number">757.9672194986475</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token number">1180.0329284196291</span><span class="token punctuation">,</span> <span class="token number">743.6141808346214</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">]</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div><p></p> <p>By the way, there is a simple approach to get SVG local coord: |
| </p><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code>myChart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token punctuation">{</span> |
| geo<span class="token operator">:</span> <span class="token punctuation">{</span> |
| map<span class="token operator">:</span> <span class="token string">'some_svg'</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| myChart<span class="token punctuation">.</span><span class="token function">getZr</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>params<span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| <span class="token keyword">var</span> pixelPoint <span class="token operator">=</span> <span class="token punctuation">[</span>params<span class="token punctuation">.</span>offsetX<span class="token punctuation">,</span> params<span class="token punctuation">.</span>offsetY<span class="token punctuation">]</span><span class="token punctuation">;</span> |
| <span class="token keyword">var</span> dataPoint <span class="token operator">=</span> myChart<span class="token punctuation">.</span><span class="token function">convertFromPixel</span><span class="token punctuation">(</span><span class="token punctuation">{</span> geoIndex<span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> pixelPoint<span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token comment">// When click, the data in SVG local coords will be printed,</span> |
| <span class="token comment">// which can be used in `series.data`.</span> |
| <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>dataPoint<span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div><p></p> <p>See also <a href="https://echarts.apache.org/examples/en/editor.html?c=geo-svg-scatter-simple">SVG Scatter</a>, <a href="https://echarts.apache.org/examples/en/editor.html?c=geo-svg-lines">SVG Lines</a>, <a href="https://echarts.apache.org/examples/en/editor.html?c=geo-traffic">SVG Traffic</a>.</p> <h2 id="unsupported-svg-features" tabindex="-1">Unsupported SVG features</h2> <p>Unfortunately it is difficult to implement a complete SVG parser. While the common SVG features are supported, at least these features listed below are not supported yet:</p> <ul><li>Flip and skew (will be supported <code>v5.1.2</code>): |
| <ul><li>Not support <code>transform: skew(...)</code> (including <code>transform: matrix(...)</code> that includes skew).</li> <li>Not support <code>transform: scale(x, y)</code> that <code>x</code>, <code>y</code> has different sign while has <code>rotate</code> (e.g., <code>scale: (1, -1), rotate(90)</code>).</li></ul></li> <li>Standalone <code><style></code> tag is not supported. |
| <ul><li>But inline style is supported (e.g., <code><path style="color:red" /></code>).</li></ul></li> <li>Unit: |
| <ul><li>Only <code>px</code> is supported. Other unit like <code>width="231.65mm"</code> is not supported.</li> <li>Percentage value like <code><svg width="30%" height="40%"></code> is not supported.</li></ul></li> <li><code><defs></code> tag: |
| <ul><li>Only <code><linearGradient></code>, <code><radialGradient></code> are supported.</li> <li>other elements (e.g., <code><pattern></code>, <code><path></code>, ...) defined in <code><defs></code> are not supported yet.</li></ul></li> <li><code><linearGradient></code>, <code><radialGradient></code>: |
| <ul><li><code>fx</code>, <code>fy</code> is not supported.</li> <li><code>gradientTransform</code> attribute is not supported.</li></ul></li> <li><code>fill:url(...)</code>, <code>stroke:utl(...)</code>: |
| <ul><li>Only <code>url(#someId)</code> is supported.</li> <li>Other URL patterns are not supported. e.g., |
| <ul><li><code>url(https://example.com/images/myImg.jpg)</code>;</li> <li><code>url(data:image/png;base64,iRxVB0…)</code>;</li> <li><code>url(myFont.woff)</code>;</li></ul></li></ul></li> <li><code><switch></code> tag: |
| <ul><li>All the content inside <code><switch></code> tag will be displayed. The "switch" feature is not supported.</li></ul></li> <li><code><text></code>: |
| <ul><li><code>textPath</code> is not supported.</li> <li><a href="https://www.w3.org/TR/SVG/text.html#TermAddressableCharacter">Addressable character</a> is not supported. That is,</li></ul> <pre><code class="language-xml"><!-- Not supported: --> |
| <tspan x="0 4.94 9.89">abc</tspan> |
| <!-- Supported: --> |
| <tspan x="0">a</tspan> |
| <tspan x="4.94">b</tspan> |
| <tspan x="9.89">c</tspan> |
| </code></pre></li></ul></article></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">Contributors</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/en/how-to/component-types/geo/svg-base-map.md" title="Edit this Document" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">Edit this page on GitHub</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/100pah" target="_blank" class="post-contributor"><span>100pah</span></a></div></div></div></div></div></div></div></div></div></div><script>window.__NUXT__=function(e,t,o,a,i,l,s,r,n,d,h,c,g,p,m,I,C,b,u,A,f,y,w,v,G,B,S,V,Z,W,x,z,N,H,k,L,Y,R,M,T,F,X,O,J,K,D,E,q,P,U,Q,j,_,$,ee,te,oe,ae,ie,le,se,re){return{layout:"default",data:[{html:'<h1 id="svg-base-map" tabindex="-1">SVG Base Map</h1>\n<p>Since <code>v5.1.0</code>, ECharts support to use SVG as the base map in <a href="https://echarts.apache.org/option.html#geo">geo coordinate system</a> and <a href="https://echarts.apache.org/option.html#series-map">map series</a>, where previously only <a href="https://echarts.apache.org/api.html#echarts.registerMap">GeoJSON</a> is supported.</p>\n<p>This feature enables ECharts to display SVG in either of the render modes (<code>canvas</code> render mode and <code>svg</code> render mode), and enables features like <a href="https://echarts.apache.org/option.html#geo.roam">zoom</a>, <a href="https://echarts.apache.org/option.html#geo.roam">pan</a>, <a href="https://echarts.apache.org/option.html#geo.select">select</a>, <a href="https://echarts.apache.org/option.html#geo.emphasis">emphasis</a>, <a href="https://echarts.apache.org/option.html#geo.emphasis.focus">focus-blur</a>, <a href="https://echarts.apache.org/option.html#geo.label">label</a>, <a href="https://echarts.apache.org/option.html#series-map.labelLayout">labelLayout</a>, <a href="https://echarts.apache.org/option.html#geo.tooltip">tooltip</a> on SVG with only simple some ECharts options. Series like <a href="https://echarts.apache.org/option.html#series-scatter">scatter</a>, <a href="https://echarts.apache.org/option.html#series-effectScatter">effectScatter</a>, <a href="https://echarts.apache.org/option.html#series-lines">lines</a>, <a href="https://echarts.apache.org/option.html#series-custom">custom</a> that are available on <a href="https://echarts.apache.org/option.html#geo">geo coordinate system</a> can also be positioned and displayed based on SVG base map.</p>\n<p>There are several examples where SVG base map is used:\n<a href="https://echarts.apache.org/examples/en/editor.html?c=geo-beef-cuts">Beef Cuts</a> |\n<a href="https://echarts.apache.org/examples/en/editor.html?c=geo-organ">Organ Visualization</a> |\n<a href="https://echarts.apache.org/examples/en/editor.html?c=geo-seatmap-flight">Flight Seatmap</a> |\n<a href="https://echarts.apache.org/examples/en/editor.html?c=geo-svg-map">SVG Map</a> |\n<a href="https://echarts.apache.org/examples/en/editor.html?c=geo-svg-scatter-simple">SVG Scatter</a> |\n<a href="https://echarts.apache.org/examples/en/editor.html?c=geo-svg-lines">SVG Lines</a> |\n<a href="https://echarts.apache.org/examples/en/editor.html?c=geo-svg-traffic">SVG Traffic</a></p>\n<h2 id="basic-usage" tabindex="-1">Basic Usage</h2>\n<p>The usage of SVG base map is the same as the usage of <a href="https://echarts.apache.org/api.html#echarts.registerMap">GeoJSON</a>.</p>\n<p>If using it in <a href="https://echarts.apache.org/option.html#geo">geo coordinate system</a>:\n<md-code-block lang="ts" code="\'JC5nZXQoJ21hcC9vcmdhbi5zdmcnLCBmdW5jdGlvbiAoc3ZnKSB7CiAgICAvLyBGaXJzdGx5IHdlIG5lZWQgdG8gcmVnaXN0ZXIgU1ZHIHJhdyBzdHJpbmcgb3IgcGFyc2VkIFNWRyBET00KICAgIC8vIHRvIGVjaGFydHMgd2l0aCBhIG5hbWU6CiAgICBlY2hhcnRzLnJlZ2lzdGVyTWFwKCdvcmdhbl9kaWFncmFtJywge3N2Zzogc3ZnfSk7CgogICAgdmFyIGNoYXJ0ID0gZWNoYXJ0cy5pbml0KGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdtYWluJykpOwogICAgY2hhcnQuc2V0T3B0aW9uKHsKICAgICAgICBnZW86IHsKICAgICAgICAgICAgLy8gUmVmZXJlbmNlIGl0IGluIGVjaGFydHMgb3B0aW9uLgogICAgICAgICAgICBtYXA6ICdvcmdhbl9kaWFncmFtJywKICAgICAgICAgICAgLi4uCiAgICAgICAgfQogICAgfSk7Cn0pOw\'" line-highlights="\'\'" /></p>\n<p>If using it in <a href="https://echarts.apache.org/option.html#series-map">map series</a>:\n<md-code-block lang="ts" code="\'JC5nZXQoJ21hcC9iZWVmX2N1dHMuc3ZnJywgZnVuY3Rpb24gKHN2ZykgewogICAgLy8gRmlyc3RseSB3ZSBuZWVkIHRvIHJlZ2lzdGVyIFNWRyByYXcgc3RyaW5nIG9yIHBhcnNlZCBTVkcgRE9NCiAgICAvLyB0byBlY2hhcnRzIHdpdGggYSBuYW1lOgogICAgZWNoYXJ0cy5yZWdpc3Rlck1hcCgnYmVlZl9jdXRzX2RpYWdyYW0nLCB7c3ZnOiBzdmd9KTsKCiAgICB2YXIgY2hhcnQgPSBlY2hhcnRzLmluaXQoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ21haW4nKSk7CiAgICBjaGFydC5zZXRPcHRpb24oewogICAgICAgIHNlcmllczogewogICAgICAgICAgICB0eXBlOiAnbWFwJywKICAgICAgICAgICAgLy8gUmVmZXJlbmNlIGl0IGluIGVjaGFydHMgb3B0aW9uLgogICAgICAgICAgICBtYXA6ICdiZWVmX2N1dHNfZGlhZ3JhbScsCiAgICAgICAgICAgIC4uLgogICAgICAgIH0KICAgIH0pOwp9KTs\'" line-highlights="\'\'" /></p>\n<h2 id="zoom-and-pan" tabindex="-1">Zoom and Pan</h2>\n<p>For <a href="https://echarts.apache.org/option.html#geo">Geo coordinate system</a>\n<md-code-block lang="ts" code="\'b3B0aW9uID0gewogICAgZ2VvOiB7CiAgICAgICAgLy8gRW5hYmxlIHpvb20gYW5kIHBhbi4KICAgICAgICByb2FtOiB0cnVlLAogICAgICAgIC4uLgogICAgfQp9Ow\'" line-highlights="\'\'" />\nFor <a href="https://echarts.apache.org/option.html#series-map">map series</a>\n<md-code-block lang="ts" code="\'b3B0aW9uID0gewogICAgc2VyaWVzOiB7CiAgICAgICAgdHlwZTogJ21hcCcsCiAgICAgICAgLy8gRW5hYmxlIHpvb20gYW5kIHBhbi4KICAgICAgICByb2FtOiB0cnVlLAogICAgICAgIC4uLgogICAgfQp9Ow\'" line-highlights="\'\'" /></p>\n<p>See <a href="https://echarts.apache.org/option.html#geo.roam">roam</a>.\nSee also example <a href="https://echarts.apache.org/examples/en/editor.html?c=geo-svg-map">SVG Map</a>.</p>\n<h2 id="named-element" tabindex="-1">Named Element</h2>\n<p>If intending to interact with some elements of SVG, we need to mark those elements in SVG firstly. That can be done simply by adding names to the target elements. The interaction related feature like <a href="https://echarts.apache.org/option.html#geo.select">select</a>, <a href="https://echarts.apache.org/option.html#geo.emphasis">emphasis</a>, <a href="https://echarts.apache.org/option.html#geo.emphasis.focus">focus-blur</a>, <a href="https://echarts.apache.org/option.html#geo.label">label</a>, <a href="https://echarts.apache.org/option.html#series-map.labelLayout">labelLayout</a>, <a href="https://echarts.apache.org/option.html#geo.tooltip">tooltip</a> depend on those named elements.</p>\n<p>For example, we add name attribute <code>name="named_rect"</code> only to the left SVG <code>path</code>.\n<md-code-block lang="xml" code="\'PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMiIgZmlsbC1ydWxlPSJldmVub2RkIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KICAgIDxwYXRoIG5hbWU9Im5hbWVkX3JlY3QiIGQ9Ik0gMCwwIEwgMCwxMDAgMTAwLDEwMCAxMDAsMCBaIiBmaWxsPSIjNzY1IiAvPgogICAgPHBhdGggZD0iTSAxNTAsMCBMIDE1MCwxMDAgMjUwLDEwMCAyNTAsMCBaIiBmaWxsPSIjNTY3IiAvPgo8L3N2Zz4\'" line-highlights="\'\'" />\nThen hover on the left rect, it can be highlighted, whereas the right one can not.</p>\n<p><md-example src="doc-example/geo-svg-named-basic" width="100%" height="200"></md-example></p>\n<p>Option for some certain named elements can be specified in <a href="https://echarts.apache.org/option.html#geo.regions">geo.regions</a>, like:\n<md-code-block lang="ts" code="\'b3B0aW9uID0gewogICAgZ2VvOiB7CiAgICAgICAgbWFwOiAnc29tZV9zdmcnLAogICAgICAgIHJlZ2lvbnM6IFt7CiAgICAgICAgICAgIG5hbWU6ICdlbGVtZW50X25hbWVfMScsCiAgICAgICAgICAgIGl0ZW1TdHlsZTogeyAuLi4gfQogICAgICAgIH0sIHsKICAgICAgICAgICAgbmFtZTogJ2VsZW1lbnRfbmFtZV8yJywKICAgICAgICAgICAgaXRlbVN0eWxlOiB7IC4uLiB9CiAgICAgICAgfV0KICAgIH0KfTs\'" line-highlights="\'\'" /></p>\n<p>Note:</p>\n<ul>\n<li>These SVG elements can be named and recognized by ECharts:\n<code>rect</code>, <code>circle</code>, <code>line</code>, <code>ellipse</code>, <code>polygon</code>, <code>polyline</code>, <code>path</code>, <code>text</code>, <code>tspan</code>, <code>g</code>.</li>\n<li>It is supported that multiple elements are named with the same name, will they will be highlighted/selected together.</li>\n</ul>\n<h2 id="style-customization" tabindex="-1">Style Customization</h2>\n<p>Although the style (such as color, font, lineWidth, ...) of SVG Elements can be defined directly in SVG file, style of named elements can also be customized in ECharts option, which will be handy in some scenario.</p>\n<p>Styles can be specified in <a href="https://echarts.apache.org/option.html#geo.itemStyle">geo.itemStyle</a> and <a href="https://echarts.apache.org/option.html#series-map.itemStyle">series-map.itemStyle</a> (also includes <code>emphasis.itemStyle</code>, <code>select.itemStyle</code>, <code>blur.itemStyle</code>, <code>regions[i].itemStyle</code>, <code>regions[i].emphasis.itemStyle</code>, <code>regions[i].select.itemStyle</code>, <code>regions[i].blur.itemStyle</code>). Some default style of the named elements can also be removed here (e.g., set <code>emphasis.itemStyle.color: null</code> to prevent the fill color from changing when mouse hovering.)</p>\n<p>Moreover, named elements can also be styled by <a href="https://echarts.apache.org/option.html#visualMap">visualMap component</a> if using <a href="https://echarts.apache.org/option.html#series-map">series-map</a>. See <a href="https://echarts.apache.org/examples/en/editor.html?c=geo-beef-cuts">Beef Cuts</a>.</p>\n<p>Note:\nOnly these named elements can be styled in <code>itemStyle</code>:\n<code>rect</code>, <code>circle</code>, <code>line</code>, <code>ellipse</code>, <code>polygon</code>, <code>polyline</code>, <code>path</code>.</p>\n<h2 id="select" tabindex="-1">Select</h2>\n<p>Named elements can adopt "select" feature by setting <a href="https://echarts.apache.org/option.html#geo.selectedMode">geo.selectedMode</a> or <a href="https://echarts.apache.org/option.html#series-map.selectedMode">series-map.selectedMode</a> as <code>\'single\'</code> or <code>\'multiple\'</code>. The style of element when selected can be specified in <a href="https://echarts.apache.org/option.html#geo.select">geo.select</a> or <a href="https://echarts.apache.org/option.html#series-map.select">series-map.select</a>.</p>\n<p>The selected names can be obtained by <a href="https://echarts.apache.org/api.html#event.geoselectchanged">geoselectchanged</a> event, like:\n<md-code-block lang="ts" code="\'bXlDaGFydC5vbignZ2Vvc2VsZWN0Y2hhbmdlZCcsIGZ1bmN0aW9uIChwYXJhbXMpIHsKICAgIHZhciBzZWxlY3RlZE5hbWVzID0gcGFyYW1zLmFsbFNlbGVjdGVkWzBdLm5hbWU7CiAgICBjb25zb2xlLmxvZygnc2VsZWN0ZWQnLCBzZWxlY3RlZE5hbWVzKTsKfSk7\'" line-highlights="\'\'" /></p>\n<p>See <a href="https://echarts.apache.org/examples/en/editor.html?c=geo-seatmap-flight">Flight Seatmap</a> for more details.</p>\n<h2 id="emphasis-and-focus-blur" tabindex="-1">Emphasis and Focus-Blur</h2>\n<p><code>emphasis</code> state (highlight when hovering) can be auto adopted to named elements.</p>\n<p>Especially, <a href="https://echarts.apache.org/option.html#geo.emphasis.focus">geo.emphasis.focus</a> and be set as <code>\'self\'</code> to enable "focus-blur" feature, where all all of the other elements will be blurred when hovering on an named element.</p>\n<p>See <a href="https://echarts.apache.org/examples/en/editor.html?c=geo-organ">Organ Visualization</a> for more details.</p>\n<h2 id="tooltip" tabindex="-1">Tooltip</h2>\n<p>Tooltip can be enabled or disabled on named elements.\n<md-code-block lang="ts" code="\'b3B0aW9uID0gewogICAgLy8gTmVlZCB0byBkZWNsYXJlIHRoZSByb290IHRvb2x0aXAgdG8KICAgIC8vIGVuYWJsZSB0b29sdGlwIGZlYXR1cmUgb24gRUNoYXJ0cy4KICAgIHRvb2x0aXA6IHt9LAogICAgZ2VvOiB7CiAgICAgICAgbWFwOiAnc29tZV9zdmcnLAogICAgICAgIHRvb2x0aXA6IHsKICAgICAgICAgICAgLy8gVXNlIGBzaG93YCB0byBlbmFibGUvZGlzYWJsZSB0b29sdGlwCiAgICAgICAgICAgIC8vIG9uIGdlbyBjb29yZGluYXRlIHN5c3RlbS4KICAgICAgICAgICAgc2hvdzogdHJ1ZQogICAgICAgIH0sCiAgICAgICAgcmVnaW9uczogW3sKICAgICAgICAgICAgbmFtZTogJ3NvbWVfbmFtZTEnLAogICAgICAgICAgICAvLyBTZXQgbmFtZWQgZWxlbWVudCBzcGVjaWZpZWQgdG9vbHRpcCBvcHRpb24gaWYgbmVlZGVkLgogICAgICAgICAgICB0b29sdGlwOiB7CiAgICAgICAgICAgICAgICBmb3JtYXR0ZXI6ICdzb21lIHNwZWNpYWwgdG9vbHRpcCAxJwogICAgICAgICAgICB9CiAgICAgICAgfSwgewogICAgICAgICAgICBuYW1lOiAnc29tZV9uYW1lMicsCiAgICAgICAgICAgIHRvb2x0aXA6IHsKICAgICAgICAgICAgICAgIGZvcm1hdHRlcjogJ3NvbWUgc3BlY2lhbCB0b29sdGlwIDInCiAgICAgICAgICAgIH0KICAgICAgICB9XQogICAgfQp9Ow\'" line-highlights="\'\'" /></p>\n<p>If intending to disable the geo tooltip when hovering a on named elements, just:\n<md-code-block lang="ts" code="\'b3B0aW9uID0gewogICAgdG9vbHRpcDoge30sCiAgICBnZW86IHsKICAgICAgICBtYXA6ICdzb21lX3N2ZycsCiAgICAgICAgdG9vbHRpcDogewogICAgICAgICAgICBzaG93OiBmYWxzZQogICAgICAgIH0KICAgIH0KfTs\'" line-highlights="\'\'" /></p>\n<p>See <a href="https://echarts.apache.org/examples/en/editor.html?c=geo-svg-map">SVG Map</a> for more details.</p>\n<h2 id="label" tabindex="-1">Label</h2>\n<p>Although text label can be declared in SVG file directly via <code><text></code>/<code><tspan></code>, we can also use ECharts built-in label feature on named elements by specifying <a href="https://echarts.apache.org/option.html#geo.label">geo.label</a> or <a href="https://echarts.apache.org/option.html#series-map.label">series-map.label</a>.</p>\n<p>By default the label feature is enabled when hovering on a named element. If intending to disable it, just:\n<md-code-block lang="ts" code="\'b3B0aW9uID0gewogICAgZ2VvOiB7CiAgICAgICAgbWFwOiAnc29tZV9zdmcnLAogICAgICAgIGVtcGhhc2lzOiB7CiAgICAgICAgICAgIGxhYmVsOiB7CiAgICAgICAgICAgICAgICBzaG93OiBmYWxzZQogICAgICAgICAgICB9CiAgICAgICAgfQogICAgfQp9Ow\'" line-highlights="\'\'" /></p>\n<p>When multiple elements need to share one label text, we have two choices:</p>\n<ul>\n<li>Wrap those elements in a named <code><g></code> (e.g., <code><g name="name_a"></code>), where a single label will be displayed and located based on the bounding rect of the <code><g></code>.</li>\n<li>Name those elements with the same name (e.g., <code><path name="name_b"/><path name="name_b"/></code>), where multiple labels will be displayed and located based on each elements self.</li>\n</ul>\n<p>For example (hover to show the labels):\n<md-example src="doc-example/geo-svg-label-basic" width="100%" height="300"></md-example></p>\n<p>Note: Only these named elements can be labeled via <code>label</code> option:\n<code>rect</code>, <code>circle</code>, <code>line</code>, <code>ellipse</code>, <code>polygon</code>, <code>polyline</code>, <code>path</code>, <code>g</code>.</p>\n<p>See also <a href="https://echarts.apache.org/examples/en/editor.html?c=geo-organ">Organ Visualization</a> for the usage of label.</p>\n<h2 id="events" tabindex="-1">Events</h2>\n<p>Mouse events or touch events of named elements can be listened simply by:\n<md-code-block lang="ts" code="\'Ly8gJ25hbWUxJyBpcyBhIG5hbWUgb2YgYSBTVkcgZWxlbWVudC4KbXlDaGFydC5vbignY2xpY2snLCB7IGdlb0luZGV4OiAwLCBuYW1lOiAnbmFtZTEnIH0sIGZ1bmN0aW9uIChwYXJhbXMpIHsKICAgIGNvbnNvbGUubG9nKHBhcmFtcyk7Cn0pOw\'" line-highlights="\'\'" /></p>\n<h2 id="layout-of-svg-base-map" tabindex="-1">Layout of SVG Base Map</h2>\n<p>By default ECharts will position the SVG base map in the center of the canvas. If need some adjust, we usually only adjust <a href="https://echarts.apache.org/option.html#geo.layoutCenter">layoutCenter</a>/<a href="https://echarts.apache.org/option.html#geo.layoutSize">layoutSize</a>, and occasionally <code><svg viewBox="..."></code>/<a href="https://echarts.apache.org/option.html#geo.boundingCoords">geo.boundingCoords</a> (difference: clip or not). In most cases they are enough.</p>\n<p>If need some advanced precise control of the position and zoom, several concepts below can be noticed.</p>\n<p>The layout rule and options of <a href="https://echarts.apache.org/option.html#geo">geo coordinate system</a> and <a href="https://echarts.apache.org/option.html#series-map">map series</a> are the same. So we only demonstrate <a href="https://echarts.apache.org/option.html#geo">geo coordinate system</a> below.</p>\n<p><md-example src="doc-example/geo-svg-layout-basic" width="100%" height="600"></md-example></p>\n<p>The demo above shows six <a href="https://echarts.apache.org/option.html#geo">geo coordinate system</a> with three SVG files in a single ECharts canvas. Each two <a href="https://echarts.apache.org/option.html#geo">geo</a> that are in the same column use the same SVG file.</p>\n<p>Firstly, what shapes looks like is determined by SVG file itself. That is, in the demo above, determined by the <code><circle></code> and <code>viewBox</code> attribute (<code>viewBox</code> cut (clips) the circle). We can noticed that the final shape outlines in each column are the same (despite the difference in position, size and scratch), since they use the same SVG file.</p>\n<p>Secondly, users can use either of the two option groups below to determine the location and the size of the <code>geo view port</code> of <a href="https://echarts.apache.org/option.html#geo">geo coordinate system</a> according to the entire chart canvas (all of these options are measured in echarts canvas pixel, or percentage value):</p>\n<ul>\n<li><a href="https://echarts.apache.org/option.html#geo.layoutCenter">layoutCenter</a>, <a href="https://echarts.apache.org/option.html#geo.layoutSize">layoutSize</a> (recommended).</li>\n<li><a href="https://echarts.apache.org/option.html#geo.top">top</a>, <a href="https://echarts.apache.org/option.html#geo.right">right</a>, <a href="https://echarts.apache.org/option.html#geo.bottom">bottom</a>, <a href="https://echarts.apache.org/option.html#geo.left">left</a> (which is used in the demo above).</li>\n</ul>\n<p>In the demo above, the six geo <code>geo view ports</code> are displayed as six black squares.</p>\n<p>Thirdly, a <code>bounding rect</code> of the SVG is determined, which is determined by methods below (all of them are measured in SVG local unit):</p>\n<ol>\n<li>If <a href="https://echarts.apache.org/option.html#geo.boundingCoords">geo.boundingCoords</a> is specified, use it as <code>bounding rect</code>.</li>\n<li>Else if <code><svg width="..." height="..."></code> is specified, use <code>[0, 0, width, height]</code> as <code>bounding rect</code>. (If only <code>width</code> or only <code>height</code> is specified, only use <code>[0, width]</code> or <code>[0, height]</code>).</li>\n<li>Else if <code>svg viewBox="..."></code> is specified, use <code>viewBox</code> as <code>bounding rect</code>.</li>\n<li>Else use the union bounding rect of all of the SVG elements as the <code>bounding rect</code>.</li>\n<li>If <a href="https://echarts.apache.org/option.html#geo.center">geo.center</a> or <a href="https://echarts.apache.org/option.html#geo.zoom">geo.zoom</a> is specified, transform the <code>bounding rect</code> determined by <code>1~4</code> above.</li>\n</ol>\n<p>Having <code>bounding rect</code> determined, it will be placed into its corresponding <code>geo view port</code>:</p>\n<ul>\n<li>If <a href="https://echarts.apache.org/option.html#geo.layoutCenter">layoutCenter</a>, <a href="https://echarts.apache.org/option.html#geo.layoutSize">layoutSize</a> is used, the <code>bounding rect</code> will be placed at the center and as big as possible into the <code>geo view port</code> (keep aspect ratio).</li>\n<li>If <a href="https://echarts.apache.org/option.html#geo.top">top</a>, <a href="https://echarts.apache.org/option.html#geo.right">right</a>, <a href="https://echarts.apache.org/option.html#geo.bottom">bottom</a>, <a href="https://echarts.apache.org/option.html#geo.left">left</a> is used, the view rect will be stretched to fill the <code>geo view port</code> entirely.</li>\n</ul>\n<h2 id="place-series-on-svg-base-map" tabindex="-1">Place Series on SVG Base Map</h2>\n<p>Series like <a href="https://echarts.apache.org/option.html#series-scatter">scatter</a>, <a href="https://echarts.apache.org/option.html#series-effectScatter">effectScatter</a>, <a href="https://echarts.apache.org/option.html#series-lines">lines</a>, <a href="https://echarts.apache.org/option.html#series-custom">custom</a> that are available on <a href="https://echarts.apache.org/option.html#geo">geo coordinate system</a> can also be positioned and displayed on SVG base map.</p>\n<p>Note that in this kind of usage the unit of series data value is the SVG file local coords. For example:\n<md-code-block lang="ts" code="\'b3B0aW9uID0gewogICAgZ2VvOiB7CiAgICAgICAgbWFwOiAnc29tZV9zdmcnCiAgICB9LAogICAgc2VyaWVzOiB7CiAgICAgICAgdHlwZTogJ2VmZmVjdFNjYXR0ZXInLAogICAgICAgIGNvb3JkaW5hdGVTeXN0ZW06ICdnZW8nLAogICAgICAgIGdlb0luZGV4OiAwLAogICAgICAgIGRhdGE6IFsKICAgICAgICAgICAgLy8gU1ZHIGxvY2FsIGNvb3Jkcy4KICAgICAgICAgICAgWzQ4OC4yMzU4NDIxMDc4MDUzLCA0NTkuNzA5MTM4MzMwNzU3MzZdLAogICAgICAgICAgICBbNzcwLjM0MTU2NDQzMTk5MzksIDc1Ny45NjcyMTk0OTg2NDc1XSwKICAgICAgICAgICAgWzExODAuMDMyOTI4NDE5NjI5MSwgNzQzLjYxNDE4MDgzNDYyMTRdLAogICAgICAgIF0KICAgIH0KfTs\'" line-highlights="\'\'" /></p>\n<p>By the way, there is a simple approach to get SVG local coord:\n<md-code-block lang="ts" code="\'bXlDaGFydC5zZXRPcHRpb24oewogICAgZ2VvOiB7CiAgICAgICAgbWFwOiAnc29tZV9zdmcnCiAgICB9Cn0pOwpteUNoYXJ0LmdldFpyKCkub24oJ2NsaWNrJywgZnVuY3Rpb24gKHBhcmFtcykgewogICAgdmFyIHBpeGVsUG9pbnQgPSBbcGFyYW1zLm9mZnNldFgsIHBhcmFtcy5vZmZzZXRZXTsKICAgIHZhciBkYXRhUG9pbnQgPSBteUNoYXJ0LmNvbnZlcnRGcm9tUGl4ZWwoeyBnZW9JbmRleDogMCB9LCBwaXhlbFBvaW50KTsKICAgIC8vIFdoZW4gY2xpY2ssIHRoZSBkYXRhIGluIFNWRyBsb2NhbCBjb29yZHMgd2lsbCBiZSBwcmludGVkLAogICAgLy8gd2hpY2ggY2FuIGJlIHVzZWQgaW4gYHNlcmllcy5kYXRhYC4KICAgIGNvbnNvbGUubG9nKGRhdGFQb2ludCk7Cn0pOw\'" line-highlights="\'\'" /></p>\n<p>See also <a href="https://echarts.apache.org/examples/en/editor.html?c=geo-svg-scatter-simple">SVG Scatter</a>, <a href="https://echarts.apache.org/examples/en/editor.html?c=geo-svg-lines">SVG Lines</a>, <a href="https://echarts.apache.org/examples/en/editor.html?c=geo-traffic">SVG Traffic</a>.</p>\n<h2 id="unsupported-svg-features" tabindex="-1">Unsupported SVG features</h2>\n<p>Unfortunately it is difficult to implement a complete SVG parser. While the common SVG features are supported, at least these features listed below are not supported yet:</p>\n<ul>\n<li>Flip and skew (will be supported <code>v5.1.2</code>):\n<ul>\n<li>Not support <code>transform: skew(...)</code> (including <code>transform: matrix(...)</code> that includes skew).</li>\n<li>Not support <code>transform: scale(x, y)</code> that <code>x</code>, <code>y</code> has different sign while has <code>rotate</code> (e.g., <code>scale: (1, -1), rotate(90)</code>).</li>\n</ul>\n</li>\n<li>Standalone <code><style></code> tag is not supported.\n<ul>\n<li>But inline style is supported (e.g., <code><path style="color:red" /></code>).</li>\n</ul>\n</li>\n<li>Unit:\n<ul>\n<li>Only <code>px</code> is supported. Other unit like <code>width="231.65mm"</code> is not supported.</li>\n<li>Percentage value like <code><svg width="30%" height="40%"></code> is not supported.</li>\n</ul>\n</li>\n<li><code><defs></code> tag:\n<ul>\n<li>Only <code><linearGradient></code>, <code><radialGradient></code> are supported.</li>\n<li>other elements (e.g., <code><pattern></code>, <code><path></code>, ...) defined in <code><defs></code> are not supported yet.</li>\n</ul>\n</li>\n<li><code><linearGradient></code>, <code><radialGradient></code>:\n<ul>\n<li><code>fx</code>, <code>fy</code> is not supported.</li>\n<li><code>gradientTransform</code> attribute is not supported.</li>\n</ul>\n</li>\n<li><code>fill:url(...)</code>, <code>stroke:utl(...)</code>:\n<ul>\n<li>Only <code>url(#someId)</code> is supported.</li>\n<li>Other URL patterns are not supported. e.g.,\n<ul>\n<li><code>url(https://example.com/images/myImg.jpg)</code>;</li>\n<li><code>url(data:image/png;base64,iRxVB0…)</code>;</li>\n<li><code>url(myFont.woff)</code>;</li>\n</ul>\n</li>\n</ul>\n</li>\n<li><code><switch></code> tag:\n<ul>\n<li>All the content inside <code><switch></code> tag will be displayed. The "switch" feature is not supported.</li>\n</ul>\n</li>\n<li><code><text></code>:\n<ul>\n<li><code>textPath</code> is not supported.</li>\n<li><a href="https://www.w3.org/TR/SVG/text.html#TermAddressableCharacter">Addressable character</a> is not supported. That is,</li>\n</ul>\n<pre><code class="language-xml"><!-- Not supported: -->\n<tspan x="0 4.94 9.89">abc</tspan>\n<!-- Supported: -->\n<tspan x="0">a</tspan>\n<tspan x="4.94">b</tspan>\n<tspan x="9.89">c</tspan>\n</code></pre>\n</li>\n</ul>\n',postPath:"en/how-to/component-types/geo/svg-base-map",title:"SVG Base Map - Geo - Common Components - How To Guides"}],fetch:{},error:null,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:i,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:s},{title:"资源列表",dir:r,draft:e},{title:"寻求帮助",dir:n},{title:"版本特性",dir:d,children:[{title:"ECharts 6 特性介绍",dir:h},{title:"v5 升级 v6 指南",dir:c},{title:"5.0",dir:g},{title:"v4 升级 v5 指南",dir:p},{title:5.2,dir:m},{title:5.3,dir:I},{title:5.4,dir:C},{title:5.5,dir:b},{title:5.6,dir:u}]}]},{title:"概念篇",dir:A,children:[{title:"图表容器及大小",dir:f},{title:"配置项",dir:y,draft:e},{title:"系列",dir:w,draft:e},{title:"样式",dir:v},{title:"数据集",dir:G},{title:"数据转换",dir:B},{title:"坐标系",dir:S,draft:e},{title:"坐标轴",dir:V},{title:"视觉映射",dir:o},{title:"图例",dir:Z},{title:"事件与行为",dir:W}]},{title:"应用篇",dir:x,children:[{title:"常用图表类型",dir:z,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:N},{title:"堆叠柱状图",dir:H},{title:"动态排序柱状图",dir:k},{title:"极坐标系柱状图",dir:L,draft:e},{title:"阶梯瀑布图",dir:Y},{title:"视觉映射的柱状图",dir:o,draft:e}]},{title:"折线图",dir:R,children:[{title:"基础折线图",dir:M},{title:"堆叠折线图",dir:T},{title:"区域面积图",dir:F},{title:"平滑曲线图",dir:X},{title:"阶梯线图",dir:O}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:J},{title:"圆环图",dir:K},{title:"南丁格尔图（玫瑰图）",dir:"rose"}]},{title:"散点图",dir:D,children:[{title:"基础散点图",dir:E}]}]},{title:"常用组件",dir:q,children:[{title:"地理坐标系（Geo）",dir:"geo",children:[{title:"SVG 底图",dir:P}]}]},{title:"移动端优化",dir:t,draft:e},{title:"跨平台方案",dir:U,children:[{title:"服务端渲染",dir:"server"},{title:"微信小程序",dir:"wechat-app"},{title:"百度智能小程序",dir:"baidu-app"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:Q},{title:"数据下钻",dir:j,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:_}]},{title:"动画",dir:$,children:[{title:"数据过渡动画",dir:ee}]},{title:"交互",dir:te,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:oe,draft:e},{title:"智能指针吸附",dir:ae}]}]},{title:"最佳实践",dir:ie,children:[{title:"移动端优化",dir:t,draft:e},{title:le,dir:se},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:re}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:i,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:s},{title:"Resources",dir:r,draft:e},{title:"Get Help",dir:n},{title:"What's New",dir:d,children:[{title:"ECharts 6 Features",dir:h},{title:"Migration from v5 to v6",dir:c},{title:"5.0",dir:g},{title:"Migration from v4 to v5",dir:p},{title:5.2,dir:m},{title:5.3,dir:I},{title:5.4,dir:C},{title:5.5,dir:b},{title:5.6,dir:u}]}]},{title:"Concepts",dir:A,children:[{title:"Chart Container",dir:f},{title:"Chart Option",dir:y,draft:e},{title:"Series",dir:w,draft:e},{title:"Style",dir:v},{title:"Dataset",dir:G},{title:"Data Transform",dir:B},{title:"Coordinate",dir:S,draft:e},{title:"Axis",dir:V},{title:"Visual Mapping",dir:o},{title:"Legend",dir:Z},{title:"Event and Action",dir:W}]},{title:"How To Guides",dir:x,children:[{title:"Common Charts",dir:z,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:N},{title:"Stacked Bar",dir:H},{title:"Bar Racing",dir:k},{title:"Bar Polar",dir:L,draft:e},{title:"Waterfall",dir:Y}]},{title:"Line",dir:R,children:[{title:"Basic Line",dir:M},{title:"Stacked Line",dir:T},{title:"Area Chart",dir:F},{title:"Smoothed Line",dir:X},{title:"Step Line",dir:O}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:J},{title:"Ring Style",dir:K},{title:"Rose Style",dir:"rose"}]},{title:"Scatter",dir:D,children:[{title:"Basic Scatter",dir:E}]}]},{title:"Common Components",dir:q,children:[{title:"Geo",dir:"geo",children:[{title:"SVG Base Map",dir:P}]}]},{title:"Mobile",dir:t,draft:e},{title:"Cross Platform",dir:U,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:Q},{title:"Drilldown",dir:j,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:_}]},{title:"Animation",dir:$,children:[{title:"Data Transition",dir:ee}]},{title:"Interaction",dir:te,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:oe,draft:e},{title:"Intelligent Pointer Snapping",dir:ae}]}]},{title:"Best Practices",dir:ie,children:[{title:"Mobile Optimization",dir:t,draft:e},{title:le,dir:se},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:re}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",apiPath:"https://echarts.apache.org/api.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:e,routePath:"/en/how-to/component-types/geo/svg-base-map",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:null}}}}(!0,"mobile","visual-map","get-started","basics","download","import","resource","help","release-note","v6-feature","v6-upgrade-guide","v5-feature","v5-upgrade-guide","5-2-0","5-3-0","5-4-0","5-5-0","5-6-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","how-to","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","scatter","basic-scatter","component-types","svg-base-map","cross-platform","dynamic-data","drilldown","rich-text","animation","transition","interaction","connect","coarse-pointer","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/2d53fcd.js" defer></script><script src="/handbook/_nuxt/js/a8284fb35e00f68dfbb0.js" defer></script><script src="/handbook/_nuxt/js/8cbc28eba39ffdac2c44.js" defer></script><script src="/handbook/_nuxt/js/fa73816a85b29fbf7562.js" defer></script><script src="/handbook/_nuxt/js/b964c20bb1562bc48da6.js" defer></script><script src="/handbook/_nuxt/js/926187fdeb8e698e0437.js" defer></script><noscript data-n-head="ssr" data-body="true"><div class="no-script"><strong>很抱歉，Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript> |
| <script type="text/javascript">document.getElementById("nav-doc").className="active"</script> |
| </body> |
| </html> |
