Getting Started
ECharts can uses geoJSON format as map outline. You can use third-party geoJSON data (like maps) and register them into ECharts. You can get the JSON data from this Starbuck's Github repository.
Echart's map documentationWorld map
JavaScript
<script src="assets/data/world.js"> </script>
<div class="position-absolute z-2" style="right:16px"><button class="btn btn-falcon-default btn-sm mb-1 session-by-country-map-reset"><span class="fas fa-sync-alt fs-10"></span></button></div>
<!-- Find the JS file for the following chart at: src/js/charts/echarts/session-by-country-map.js-->
<!-- If you are not using gulp based workflow, you can find the transpiled code at: public/assets/js/theme.js-->
<div class="echart-session-by-country-map" style="min-height: 400px;" data-echart-responsive="true"></div>
<h5 class="mt-3">JavaScript </h5><pre class="scrollbar mt-2"><code class="language-html"><script src="assets/data/world.js"> </script></code></pre>
Usa map
JavaScript
<script src="assets/data/usa.js"> </script>
<div class="position-absolute z-2" style="right:16px"><button class="btn btn-falcon-default btn-sm mb-1 usa-map-reset"><span class="fas fa-sync-alt fs-10"></span></button></div>
<!-- Find the JS file for the following chart at: src/js/charts/echarts/examples/map-usa.js-->
<!-- If you are not using gulp based workflow, you can find the transpiled code at: public/assets/js/echarts-example.js-->
<div class="echart-map-usa-example" style="min-height: 400px;" data-echart-responsive="true"></div>
<h5 class="mt-3">JavaScript </h5><pre class="scrollbar mt-2"><code class="language-html"><script src="assets/data/usa.js"> </script></code></pre>