JSFiddle - React, Tailwind, and code Playground

by YeongCY

HTML

<html>
  <head>
     <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key={ak}&plugin=AMap.Scale,AMap.ToolBar"></script>
  <!-- 引入ECharts -->
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
  <!-- 引入ECharts高德地图扩展 -->
  <!-- <script type="text/javascript" src="../dist/echarts-extension-amap.min.js"></script> -->
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts-extension-amap.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
  </head>
  <body>
    <div id="echarts-amap"></div>
  </body>
</html>

CSS

#echarts-amap {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

JavaScript

var heatmapDataURI = 'https://cdn.jsdelivr.net/gh/apache/echarts-examples/public/data/asset/data/hangzhou-tracks.json';

    var option = {
      // amap component option
      amap: {
        // enable 3D mode
        // Note that it's suggested to enable 3D mode to improve echarts rendering.
        viewMode: '3D',
        // initial options of AMap
        // See https://lbs.amap.com/api/javascript-api/reference/map#MapOption for details
        // initial map center [lng, lat]
        center: [120.098776, 30.226665],
        // initial map zoom
        zoom: 13,
        // whether the map and echarts automatically handles browser window resize to update itself.
        resizeEnable: true,
        // customized map style, see https://lbs.amap.com/dev/mapstyle/index for details
        mapStyle: 'amap://styles/dark',
        // whether echarts layer should be rendered when the map is moving. Default value is true.
        // if false, it will only be re-rendered after the map `moveend`.
        // It's better to set this option to false if data is large.
        renderOnMoving: true,
        // the zIndex of echarts layer for AMap, default value is 2000.
        // deprecated since v1.9.0, use `echartsLayerInteractive` instead.
        echartsLayerZIndex: 2000,
        // whether echarts layer is interactive. Default value is true
        // supported since v1.9.0
        echartsLayerInteractive: true,
        // whether to enable large mode. Default value is false
        // supported since v1.9.0
        largeMode: false
        // Note: Please DO NOT use the initial option `layers` to add Satellite/RoadNet/Other layers now.
        // There are some bugs about it, we can use `amap.add` instead.
        // Refer to the codes at the bottom.

        // More initial options...
      },
      visualMap: {
        show: true,
        right: 20,
        min: 0,
        max: 5,
        seriesIndex: 0,
        calculable: true,
        inRange: {
          color:...